How to open a jquery dialog on iggridupdating editor focus

Question

I am using Ignite UI grid. I have to open a dialog when a specific editor is focused in new row insertion or updation. The edit mode is 'row'.

I am able to open the dialog and I am using editCellStarted event for this and binding the editor to focus event. The code is as follows:

             $("#Grid").igGrid({
                       primaryKey: "keyCode",                           
                       autoCommit: true,
                       columns: _getColumnsResult,                           
                       features: [
                        {
                            name: 'Updating',                               
                            columnSettings: updateColSettings,                                
                            editMode: 'row',                                
                            editCellStarted: function (evt, ui) {
                              if(ui.columnKey=="Demo")
                             { 
                               $("#" + ui.columnkey + " input").bind('focus', { id: ui.columnIndex}, function (e) {                                          
                                $("dialog1").dialog();                                            
                               });                                  
                             }                                                                   
                            },          
                        }, //Updating feature ended                  
                        {
                            name: "Sorting",
                            type: "local",
                        },
                        {
                            name: "Selection",
                            mode: "row",
                            rowSelectionChanged: function (evt, ui) { Selectedrow = ui.row.index }
                        }]
                    });

Problem: When add new is clicked,if that specific column is first column, focus goes to the dialog and returns back to the editor.The focus does not remains in the dialog.

But if the column is other than first column, the code is working fine.

Please help to accomplish this. Thanks in advance.

here is the fiddle for it.

Answer 1

I can't test here, it'd be good if you could provide a jsFiddle as an example but it may be that something else is bound to that event that's returning focus to the row, you could try changing the code in the if clause to add:

$("#" + ui.columnkey + " input").bind('focus', { id: ui.columnIndex}, function (e) {                                          
    e.stopPropagation();
    $("dialog1").dialog();
});  

To stop the focus event firing any other handlers.

Otherwise you're going to have to work out what's causing focus to go back to that row.

EDIT

OK, so it looks like the focus is actually going there first (before the dialog event fires), not sure why the dialog doesn't keep focus -- maybe it's asynchronous and there's a timing issue there, but you can fix it just by forcing focus to the dialog. I added an ID to your input and then used that in the event handler:

$("#" + ui.columnKey + " input").bind('focus', function (e) {
    $("#dialog").dialog();
    $("#dia_inputbox").focus();
});

Working fiddle here

Also, I would have thought you don't need to bind to focus but instead just pop the dialog directly in the handler for editCellStarted -- that works but you can't move the focus back and if you stop the propagation the cell doesn't edit properly. I also tried with editCellStarting. The solution above works but it feels like a bit of a hack, there should be a way to do that more cleanly, but I'm not sure what it is.

Answer 2

As an alternative, since you are providing editor options, if this dialog is needed only on one field perhaps handle some of the editor events instead? Like so:

//...
 {
    columnKey: "Name",
    editorOptions: {
        id: "Name",
        type: 0,
        focus: function (evt) {
            $("#dialog").dialog().children("input").focus();
        }
    }
}
//...

Fiddle

Handling the focus event(and removing it) on all editors sort of makes them uneditable, defeating their purpose. It almost feels like using row edit template if that's what you are after (yes you can still use the editor events to pop a dialog there as well). If you give me a bit more insight on what exactly is the idea behind the dialog I might be able to provide some more ways to do it :)