jQuery EasyUI: confirm/save datagrid inline editing

Bernd picture Bernd · Feb 26, 2013 · Viewed 14.1k times · Source

I am using jquery & EasyUI to create a table from a SQL database. I have managed making some of the columns editable via inline editing following this tutorial, where the possible cell values are given by a combobox. I have a php file for the updateURL and the updating of existing content is working fine.

My question is the following: So far, to confirm the editing of a cell (after clicking into the cell and selecting a value from the combobox), the user has to click on some other row of the table to trigger the update-script. If the table has only one row and only one of the columns is editable, there seems to be no possibility to confirm the change (e.g. by pressing enter).

Is there any way for such confirmation? Thanks for any help!


Update: I have come this far: In the datagrid, the column which is to be edited via the combobox is created via

<th field="..." data-options="formatter:...,
editor:{type:'combobox',options:{valueField:'...',textField:'...',url:'file.php'‌​,
onSelect: function (record) {*}}}">field</th>

I believe I need to save/finish the editing via a command in place of the asterik (*). I have used endEdit, saveRow, but with no success. It is the right place (I tested it with a simple alert), but not the right command/syntax.

Answer

Bernd picture Bernd · Feb 27, 2013

Solved!

The code that needs to go for the asterisk is:

var selectedrow = $('#dg_id').datagrid('getSelected');
var rowIndex = $('#dg_id').datagrid('getRowIndex', selectedrow);
$('#dg_id').datagrid('endEdit',rowIndex);

Hope this is of help for others, too.