Custom Inline Editors

Gantt
#1

Hi Support,

I refer the code sample (DHTMLX Snippets). In this sample displays multi select drop down. in here editor mode its display template mode values. pls refer the screen shot.

image
image1287×349 29.8 KB

How can I hide this value.

Thanks.
Rasangika

#2

Hello,
I propose to increase the size of the selector to hide the contents of the grid cell:

<style>
    .multi-select-button {
        height: 28px;
        min-width: 70px;
    }
</style>

Here is an example in the snippet: http://snippet.dhtmlx.com/5/2195058d1.

#3

Hi Maksim,
Thank for the reply.
But in my scenario I am developing custom checkbox editor. in item template its display ‘yes’ or ‘No’. and Edit template it displays checkbox. with checkbox control increasing heigh is not a solution, we need to hide it,

Thanks.
Rasagb

#4

Hello,
You can hide cell text using template in gantt.config.columns if custom_editor is opened above the cell. The inlineEditors state can be obtained using gantt.ext.inlineEditors.getState():

{
    name: "owner", label: "owner", editor: ownerEditor, template: function (task) {
        let editorState = gantt.ext.inlineEditors.getState();
        if(editorState && editorState.id !== null && editorState.id == task.id && editorState.columnName == "owner") {
            return "";
        }
        if (task.owner) {
            let owners = task.owner.split(',');
            let server_list = gantt.serverList("people");
            let grid_value = [];
            for (let i = 0; i < owners.length; i++) {
                for (let j = 0; j < server_list.length; j++) {
                    if (owners[i] == server_list[j].key) grid_value.push(server_list[j].label)
                }
            }
            return grid_value
        }
        else return "Unassigned";
    }
},

You need to refresh the task with the refreshTask method while editing the cell value. This can be done with the onEditStart event:

let inlineEditors = gantt.ext.inlineEditors;
inlineEditors.attachEvent("onEditStart", function(state){
    gantt.refreshTask(state.id);
});

Finally, we need to hide the custom_editor when clicking cells in other columns. This can be done with onTaskClick and the gantt.ext.inlineEditors.hide() method:

gantt.attachEvent("onTaskClick", function(id,e){
    gantt.ext.inlineEditors.hide()
    return true;
});

We have developed a new snippet tool, you can use it, here is the complete example: https://snippet.dhtmlx.com/jknrn712
If you have additional questions, write to us, and we will try to help you.

1 Like