Question

I would like to write a custom editor for a column in my slickgrid. Ideally this editor would include another slickgrid that allows the user to filter and select multiple items.

• Has anyone tried writing an editor that includes another instance of a slickgrid?
• Are there any gotcha’s I should avoid?

Answer 1

We have just done this and the issue we found with SlickGrid v1.4.3 is that you run into problems with two slick grids as they share the GlobalEditorLock state. In other words when you select an item from say your popup slick grid it fires the commit event on the handler you have setup in the originating grid. That is the gotcha. We got around this by adding a new option called disableEditorCommit defaulting to false and changing source in the handleClick method:

if (options.enableCellNavigation && !columns[cell].unselectable) {
    // if this is a popup then do not commit edits to the global editor
    if (options.disableEditorCommit) {
        scrollRowIntoView(row,false);
        setSelectedCellAndRow($cell[0], (row === defaultGetLength()) || options.autoEdit);
    } else {
        // commit current edit before proceeding
        if (validated === true || (validated === null && options.editorLock.commitCurrentEdit())) {
            scrollRowIntoView(row,false);
            setSelectedCellAndRow($cell[0], (row === defaultGetLength()) || options.autoEdit);
        }    
    }
}

and in the handleDblClick method:

validated = options.disableEditorCommit ? true : options.editorLock.commitCurrentEdit();

Our popup slickgrid has disableEditorCommit = true so that it doesn’t interface with the editor we have set up on the originating grid.