jQuery EasyUI dataGrid save when enter pressed

Question

I have a EasyUI propertyGrid (which inherits dataGrid) with a few rows. I need that when user is editing a text field, when enter is pressed, editing is finished and onAfterEdit is called. EasyUI does not do this by default! Any solution?

Answer 1

I had the same problem with treegrid, so i think you can use this code with propertyGrid also:

    onDblClickRow: function(row){
            if (editingId != undefined){
                $('#arbol_eui').treegrid('select', editingId);
                return;
            }

            if (row){
                editingId = row.id;
                pos = row.id;
                $('#arbol_eui').treegrid('beginEdit', editingId);
            }
            var ed = $(this).treegrid('getEditor',
                                     {index:editingId,field:'peso'});

            $(ed.target).focus().select().bind('keyup', function(e) 
            {
                var code = e.keyCode || e.which;
                if(code == 13) { //Enter keycode
                  //Trigger code to save row
                                      //This executes onAfterEdit event code
                  var t = $('#arbol_eui'); //My treegrid selector
                              t.treegrid('endEdit', editingId);
                              editingId = undefined; //editingId is a global var

                }
            });
        },

The key is to bind jquery event 'keyup' to the textbox editor for the cell at the 'onDblClickRow' event that also starts editing the row

Good luck

Answer 2

Try the datagrid-cellediting extension, it adds some functionality like this