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.

SpaceDog · Accepted Answer · 2013-12-06T01:04:06.180

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.

yes you are correct its some other event which is making it to focus back and i am not able to identify it. I have tried stopPropogation() earlier, it was stopping the dialog to open. i will try to provide fiddle. — abc123, Dec 05 '13 at 08:48
Thanks, the focus event is happening before the handler so you can just take the focus back. I've edited my answer. — SpaceDog, Dec 06 '13 at 01:04

score 1 · Answer 2 · answered Dec 10 '13 at 09:21

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 :)

yes dialog is for specific fields only.These fields are database constraint fields in which data is entered from another table which are fetched in the related dialog.But now problem is solved and it can be achieved either of the two solutions provided.Thanks — abc123, Dec 11 '13 at 03:58

How to open a jquery dialog on iggridupdating editor focus

2 Answers2