custom events and editing cells

[Leo F]

I have an editable grid with some calculated rows that are handled by my own custom javascript code which updates the data model. Basically any time a cell is exited from edit mode it runs the Recalculate function which updates the model if necessary and calls grid.pqGrid("refresh"). The issue is that when a user finishes editing a cell and clicks on a new one, the refresh is called and they are taken out of edit mode on the new cell, so it has to be clicked again to go into edit mode. So I am tracking the last selected cell and calling grid.pqGrid("editCell", { colIndx: gridLastSelected_ColIndx, rowIndx: gridLastSelected_RowIndx }) after the refresh is done. Unfortunately this isn't working properly and I am getting strange behavior(screenshot attached). White boxes are replacing cells after the cell exits from edit mode, about 50% of the time. I am getting these errors in the Firefox console:

01:07:46.993 TypeError: $table[0] is undefined pqgrid.dev.js:3999
01:08:00.108 TypeError: column is undefined pqgrid.dev.js:5682
01:08:01.655 TypeError: $table[0] is undefined pqgrid.dev.js:3999
01:08:03.853 TypeError: column is undefined pqgrid.dev.js:5682


Below are my event handlers, please let me know if you need additional information.

        obj.editable = function(ui){
            var rowIndx = ui.rowIndx;
            if ($(this).pqGrid("hasClass", { rowIndx: rowIndx, cls: 'gridRowEditable' }))
                return true;
            else
                return false;
        }
        obj.quitEditMode = function (event, ui) {
            grid.pqGrid("saveEditCell");
            Recalculate(ui.dataIndx, ui.rowIndx);
            grid.pqGrid("editCell", { colIndx: gridLastSelected_ColIndx, rowIndx: gridLastSelected_RowIndx });
        }
        obj.cellClick = function (event, ui) {
            gridLastSelected_ColIndx = ui.colIndx;
            gridLastSelected_RowIndx = ui.rowIndx;
        }




Thank you!

[paramvir]

It looks like you are making changes in the current row data in Recalculate function.

Use refreshRow

http://paramquery.com/pro/api#method-refreshRow

insted of refresh (which refreshes the whole view).

And cellSave http://paramquery.com/pro/api#event-cellSave is more appropriate to call Recalculate than using quitEditMode

[Leo F]

I made the changes as you suggested and it works great now. Thanks!

There seems to be a minor annoyance with Firefox that I've encountered. If you look at the screenshot there is a dashed line horizontally through the editable cell. Normally a selected cell has a dashed border around it, but when editing in Firefox this happens.
It appears fine in IE 9 and Chrome 32. For me this only happens in Firefox(26).

[paramvir]

Use textbox editor as shown in this demo http://paramquery.com/pro/demos/editing

Code: [Select]

editor: { type: 'textbox' }


[Leo F]

That actually made it somewhat worse with dashed lines showing up indented on each side.

[paramvir]

You may disable the dashed lines with css

Code: [Select]

editor: { style: 'outline:none;' }