Jeff Finn Jeff Finn - 8 days ago 4
Javascript Question

Enabling Save button on JQ Grid with InlineEditing and CellEdit

Hi I have a Grid that is using cell edit and Inline editing. It saves to the ClientArray

$('#list').jqGrid({
datatype: "local",
colNames: ["Parameter Id", "Parameter Name", 'Parameter Value'],
colModel: [
{ name: "Id", index: "Id", align: "left", key: true, editable: false,hidden:true, jmap: 0 },
{ name: "ParameterName", index: "ParameterName", align: "left", editable: false, jmap: 1 },
{ name: "ParameterValue", index: "ParameterValue", align: "left", editable: true, edittype: "text", editoptions: { maxlength: 100 }, editrules: {required: true }, jmap: 2 }
],

pager: "#pager",
rowNum: 100,
rowList: [],
pgbuttons: false, // disable page control like next, back button
pgtext: null, // disable pager text like 'Page 0 of 10'
viewrecords: true, // disable current view record text like 'View 1-10 of 100'
height: '100%',
scrollOffset: 0,
sortname: "Name",
sortorder: "Asc",
gridview: true,
caption: 'Parameters',
autowidth: true,
hidegrid: false,
loadonce: true,
//beforeEditCell: function () {
// $("#list_ilsave").removeClass('ui-state-disabled');
// return;
//},
//afterEditCell: function (rowid, cellname, value, iRow, iCol) {
// $('#list').jqGrid('getCell', rowid, iCol).focus();
// return;
//},
width: totalWidth,
cellEdit: true,
cellsubmit: "clientArray"
});

$('#list').jqGrid('inlineNav', '#pager', {
edit: false,
add: false,
del: false,
save: true,
savetext: 'Save',
cancel: false
});


When I edit a Cell the save button remains disabled. If I manually Enable the button in beforeCellEdit, the editable cell hasn't got focus until you select another cell. This behavior is only happening in IE.

I have tried to fix both these issues individually in my commented out code, and I have found that the loss of focus is caused by the line

$("#list_ilsave").removeClass('ui-state-disabled');


I tried placing this line in beforeEditCell and in afterEditCell and it causes the input field to loose focus.

I was using JQ Grid 4.4.4 and I have tried updating to 4.6.0 after I read there were updates to Inline Editing after 4.4.4

UPDATE
I have changed my grid to use onSelectRow

onSelectRow: function (rowid) {
var $grid = $('#list');
var iRow = $("#" + rowid)[0].rowIndex;

$grid.jqGrid('editRow', rowid, {
keys: true,
oneditfunc: function(rowid, response) {
var $saveButton = $("#list_ilsave");

if ($saveButton.hasClass('ui-state-disabled')) {
$saveButton.removeClass('ui-state-disabled');
}

markCellAsDirty(rowid, $grid);
return true;
},
successfunc: function() {
alert('success');
return true;
},
aftersavefunc: function() {
alert('after save');
return true;
},
errorfunc: function() {
alert('error');
return true;
}
});
},
cellsubmit: "clientArray"


But I can't get any of the editRow events to fire other than
oneditfunc
. I also have an issue with getting the changed cells.

This method marks the cells as dirty / edited

function markCellAsDirty(rowid, grid) {
$(grid.jqGrid("setCell", rowid, "ParameterValue", "", "dirty-cell"));
$(grid[0].rows.namedItem(rowid)).addClass("edited");
}


I try to get the edited cells as follows

var editedRows = $grid.getChangedCells('dirty');


Before posting editedRows in an AJAX method to my server.

Answer

I'm not sure what you want to implement exactly, but I modified your demo to the following https://jsfiddle.net/OlegKi/byygepy3/11/. I include the full JavaScript code of the demo below

$(function () {
    var myData = [
            { id: 10, ParameterName: "Test", ParameterValue: "" },
            { id: 20, ParameterName: "Test 1", ParameterValue: "" },
            { id: 30, ParameterName: "Test 2", ParameterValue: "" }
        ],
        $grid = $("#list");

    // change the text displayed on editrules: {required: true } 
    $.extend(true, $.jgrid.locales["en-US"].edit.msg, {
        required: "No value was entered for this parameter!!!"
    });

    $grid.jqGrid({
        datatype: "local",
        data: myData,
        colNames: ["", "Parameter Name", "Parameter Value"],
        colModel: [
            { name: "act", template: "actions" }, // optional feature
            { name: "ParameterName" },
            { name: "ParameterValue", editable: true,
                editoptions: { maxlength: 100 }, editrules: {required: true } }
        ],
        cmTemplate: { autoResizable: true },
        autoResizing: { compact: true },
        pager: true,
        pgbuttons: false,     // disable page control like next, back button
        pgtext: null,         // disable pager text like 'Page 0 of 10'
        viewrecords: true,    // disable current view record text like 'View 1-10 of 100'
        sortname: "Name",
        iconSet: "fontAwesome",
        caption: 'Parameters',
        autowidth: true,
        hidegrid: false,
        inlineEditing: {
            keys: true
        },
        singleSelectClickMode: "selectonly", // prevent unselect once selected rows
        beforeSelectRow: function (rowid) {
            var $self = $(this), i,
                // savedRows array is not empty if some row is in inline editing mode
                savedRows = $self.jqGrid("getGridParam", "savedRow");
            for (i = 0; i < savedRows.length; i++) {
                if (savedRows[i].id !== rowid) {
                    // save currently editing row
                    // one can replace saveRow to restoreRow in the next line
                    $self.jqGrid("saveRow", savedRows[i].id);
                }
            }
            return savedRows.length === 0; // allow selection if saving successful
        },
        onSelectRow: function (rowid) {
            $(this).jqGrid("editRow", rowid);
        },
        afterSetRow: function (options) {
            var item = $(this).jqGrid("getLocalRow", options.rowid);
            if (item != null) {
                item.dirty = true;
            }
        },
        navOptions: {
            edit: false,
            add: false,
            search: false,
            deltext: "Delete",
            refreshtext: "Refresh"
        },
        inlineNavOptions: {
            save: true,
            savetext: "Save",
            cancel: false,
            restoreAfterSelect: false
        },
        formDeleting: {
            // delete options
            url: window.g_baseUrl + 'MfgTransactions_MVC/COA/Delete?',
            beforeSubmit: function () {
                // get value
                var selRowId = $(this).jqGrid('getGridParam', 'selrow');
                var parametricValue = $(this).jqGrid('getCell', selRowId, 'ParameterValue');

                // check if empty
                if (parametricValue === "") {
                    return [false, "Cannot delete: No value exists for this parameter"];
                }

                return [true, "Successfully deleted"];
            },
            delData: {
                batchId: function () {
                    return $("#BatchId").val();
                }
            },
            closeOnEscape: true,
            closeAfterDelete: true,
            width: 400,
            msg: "Are you sure you want to delete the Parameter?",
            afterComplete: function (response) {
                if (response.responseText) {
                    alert("response.responseText");
                }

                //loadBatchListIntoGrid();
            }
        }
    }).jqGrid('navGrid')
    .jqGrid('inlineNav')
    .jqGrid('navButtonAdd', {
        caption: "Save Changed",
        buttonicon: "fa-floppy-o",
        onClickButton: function () {
            var localData = $(this).jqGrid("getGridParam", "data"),
                dirtyData = $.grep(localData, function (item) {
                    return item.dirty;
                });
            alert(dirtyData.length > 0 ? JSON.stringify(dirtyData) : "no dirty data");
        }
    });

    // make more place for navigator buttons be rwducing the width of the right part
    var pagerIdSelector = $grid.jqGrid("getGridParam", "pager");
    $(pagerIdSelector + "_right").width(100);

    // make the grid responsive
    $(window).bind("resize", function () {
        $grid.jqGrid("setGridWidth", $grid.closest(".container-fluid").width());
    }).triggerHandler("resize");
});

where HTML code is

<div class="container-fluid">
    <div class="row">
        <div id="gridarea" class="col-md-6 col-md-offset-3">
            <table id="list"></table>
        </div>
    </div>
</div>

and CSS code

.ui-th-column>div, .ui-jqgrid-btable .jqgrow>td {
    word-wrap: break-word; /* IE 5.5+ and CSS3 */
    white-space: pre-wrap; /* CSS3 */
    white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
    white-space: -pre-wrap; /* Opera 4-6 */
    white-space: -o-pre-wrap; /* Opera 7 */
    overflow: hidden;
    vertical-align: middle;
}

It demonstrate how one can implement starting inline editing on select row. Additionally I added optional column with template: "actions" which can be alternative implementation. I set property dirty in every item of data inside of afterSetRow callback and I added "Save Changed" button, which uses localData = $(this).jqGrid("getGridParam", "data") and dirtyData = $.grep(localData, function (item) { return item.dirty; }); to get the dirty (modified) data.

Comments