Jquery – jqGrid: All rows in “inline edit mode” by default

jqgridjquery

I have a jqGrid where a row is editable on click (i.e. 'editRow' inside 'OnSelectRow' works fine). But my requirement is to "load the grid with ALL ROWS IN EDIT MODE by default (Inline edit)", so there should not be any need for me click individual rows. Can someone throw some lights on?

I tried the below code but didnt work

var data_val = myGrid.getRowData();
for (var i=0;i<data_val.length;i++)
{
myGrid.editRow(data_val[i], true);
}

Best Answer

You have to enumerate all rows of grid and call editRow for every row. The code can be like the following

loadComplete: function () {
    var $this = $(this), ids = $this.jqGrid('getDataIDs'), i, l = ids.length;
    for (i = 0; i < l; i++) {
        $this.jqGrid('editRow', ids[i], true);
    }
}

or the following

loadComplete: function () {
    var $this = $(this), rows = this.rows, l = rows.length, i, row;
    for (i = 0; i < l; i++) {
        row = rows[i];
        if ($.inArray('jqgrow', row.className.split(' ')) >= 0) {
            $this.jqGrid('editRow', row.id, true);
        }
    }
}

Related Solutions

Jquery – How to implement edit inline in jqgrid

You can enumerate all rows in the grid and call editRow inside of loadComplete (see here for the code example). You should understand some disadvantages of the approach:

setting a line of grid in inline editing mode in the loop can work slowly in case of large number of rows. So you should carefully choose rowNum in the case. The reason of the slow performance is simple: every change of one element on the page follow to recalculation of positions of all other elements on the page or at least to reflow. editRow method change one cell in the row, then change another one and so on. Applying of editRow in the loop for all rows follows to reflow of the whole page after every cell modifications. In case of large grid you will have a lot of reflows.
If you will need to read information from editing rows you will need to do some tricks because getRowData and getCol will not work in the case. In the answer you can find the corresponding solution. If if would be enough for you to get last saved data you can use getLocalRow method.

UPDATED: The keyboard navigation between editable rows is in reality absolutely another question. Nevertheless you can bind keydownevent on the grid for example and change focus on the another cell if it's needed. For example the next demo shows for how Up and Down arrow keys can be used together with the standard Tab and Shift+Tab keys:

$('#list').keydown(function (e) {
    var $td = $(e.target).closest("td"),
        $tr = $td.closest("tr.jqgrow"),
        ci, ri, rows = this.rows;
    if ($td.length === 0 || $tr.length === 0) {
        return;
    }
    ci = $.jgrid.getCellIndex($td[0]);
    ri = $tr[0].rowIndex;
    if (e.keyCode === $.ui.keyCode.UP) { // 38
        if (ri > 0) {
            $(rows[ri-1].cells[ci]).find("input,select").focus();
        }
    }
    if (e.keyCode === $.ui.keyCode.DOWN) { // 40
        if (ri + 1 < rows.length) {
            $(rows[ri+1].cells[ci]).find("input,select").focus();
        }
    }
});

Jquery – jqGrid: disable edit and delete buttons inLine edit mode

I modified your if statement where you add the not-editable-row class. Just replace #gridName with your grid's id:

if (rowid != row.id) {
    $(row).addClass('not-editable-row');
    var v = myGrid.jqGrid('getCell', row, 'act');

    // hide the edit/delete buttons on non-editable rows (not the row we are editing)
    $("#gridName tr#" + row.id + " .ui-inline-edit").hide();
    $("#gridName tr#" + row.id + " .ui-inline-del").hide();
}
else {
    // show the edit/delete buttons for the current row
    $("#gridName tr#" + row.id + " .ui-inline-edit").show();
    $("#gridName tr#" + row.id + " .ui-inline-del").show();
}

Does this help?

Best Answer

Related Solutions

Jquery – How to implement edit inline in jqgrid

Jquery – jqGrid: disable edit and delete buttons inLine edit mode

Related Topic