Inline edit not working on Dynamic jqGrid

Question

Based on Bruno's answer I create a dynamic jqGrid but the inline-edit doesn't seems to work:

var colN = '{ "JSON":"success","colNames":["Id","Name","Check In","Check Out","Check In","Check Out","Check In","Check Out","Check In","Check Out"],';
var colM = '"colModel":[ { "name": "IdEmployee", "index": "IdEmployee", "jsonmap":"IdEmployee", "width": "120", "align": "center", "key": "true", "editable": "false"},{ "name": "NameEmp", "index": "NameEmp", "jsonmap":"NameEmp", "width": "450", "align": "center", "editable": "false"},{ "name": "IDay7", "index": "IDay7", "jsonmap": "IDay7", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay7", "index": "ODay7", "jsonmap": "ODay7", "width": "170", "align": "center", "editable": "true"},{ "name": "IDay8", "index": "IDay8", "jsonmap": "IDay8", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay8", "index": "ODay8", "jsonmap": "ODay8", "width": "170", "align": "center", "editable": "true"},{ "name": "IDay9", "index": "IDay9", "jsonmap": "IDay9", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay9", "index": "ODay9", "jsonmap": "ODay9", "width": "170", "align": "center", "editable": "true"},{ "name": "IDay10", "index": "IDay10", "jsonmap": "IDay10", "width": "170", "align": "center", "editable": "true"},{ "name": "ODay10", "index": "ODay10", "jsonmap": "ODay10", "width": "170", "align": "center", "editable": "true"}],';
var colG = '"gridModel":{ "dataset":[{"IdEmployee":"560","NameEmp":"L A S","IDay9":"07:37:07","ODay9":"20:04:46","IDay10":"20:01:35","ODay10":"07:38:47"},{"IdEmployee":"859","NameEmp":"A P A","IDay7":"19:29:37","ODay7":"08:05:00","IDay8":"19:29:19","ODay8":"08:00:12","IDay9":"19:31:36","ODay9":"08:00:59"},{"IdEmployee":"864","NameEmp":"M R T","IDay8":"07:17:21","ODay8":"20:07:27","IDay9":"07:20:01","ODay9":"20:07:24"}],"page":"1","records":"3","total":"1"}}';

var jsonGrid = jQuery.parseJSON(colN + colM + colG);

var gridPreNomina = $("#tblPreNomina");
gridPreNomina.jqGrid({
    jsonReader: {
        root: "dataset",
        id: "IdEmployee",
        page: "page",
        total: "total",
        records: "records"
    },
    datatype: 'jsonstring',
    datastr: jsonGrid.gridModel,
    colNames: jsonGrid.colNames,
    colModel: jsonGrid.colModel,
    pager: $('#pagerPreNomina'),
    rowList: [],
    rowNum: '',
    loadonce: true,
    width: '1200',
    height: '100',
    viewrecords: true
})

gridPreNomina.jqGrid('inlineNav', "#pagerPreNomina", { add: false, edit: true });

I reduced the jqGrid code and played with jsonReader options but the results are similar.

Thanks in advance

EDIT: I'm using free jqGrid 4.9.2

EDIT2: This is the way to make the grid work, with improved syntax:

$(function () {
    "use strict";
    var colN = '{ "JSON":"success","colNames":["Id","Name","Check In","Check Out","Check In","Check Out","Check In","Check Out","Check In","Check Out"],';
    var colM = '"colModel":[ { "name": "IdEmployee", "index": "IdEmployee", "jsonmap":"IdEmployee", "width": "120", "align": "center", "key": "true", "editable": "false"},{ "name": "NameEmp", "index": "NameEmp", "jsonmap":"NameEmp", "width": "450", "align": "center", "editable": "false"},{ "name": "IDay7", "index": "IDay7", "jsonmap": "IDay7", "width": "170", "align": "center"},{ "name": "ODay7", "index": "ODay7", "jsonmap": "ODay7", "width": "170", "align": "center"},{ "name": "IDay8", "index": "IDay8", "jsonmap": "IDay8", "width": "170", "align": "center"},{ "name": "ODay8", "index": "ODay8", "jsonmap": "ODay8", "width": "170", "align": "center"},{ "name": "IDay9", "index": "IDay9", "jsonmap": "IDay9", "width": "170", "align": "center"},{ "name": "ODay9", "index": "ODay9", "jsonmap": "ODay9", "width": "170", "align": "center"},{ "name": "IDay10", "index": "IDay10", "jsonmap": "IDay10", "width": "170", "align": "center"},{ "name": "ODay10", "index": "ODay10", "jsonmap": "ODay10", "width": "170", "align": "center"}],';
    var colG = '"gridModel":{ "dataset":[{"IdEmployee":"560","NameEmp":"L A S","IDay9":"07:37:07","ODay9":"20:04:46","IDay10":"20:01:35","ODay10":"07:38:47"},{"IdEmployee":"859","NameEmp":"A P A","IDay7":"19:29:37","ODay7":"08:05:00","IDay8":"19:29:19","ODay8":"08:00:12","IDay9":"19:31:36","ODay9":"08:00:59"},{"IdEmployee":"864","NameEmp":"M R T","IDay8":"07:17:21","ODay8":"20:07:27","IDay9":"07:20:01","ODay9":"20:07:24"}],"page":"1","records":"3","total":"1"}}';

    var jsonGrid = jQuery.parseJSON(colN + colM + colG);

    $("#tblPreNomina").jqGrid({
        jsonReader: {
            root: "dataset",
            id: "IdEmployee"
        },
        cmTemplate: { editable: true, autoResizable: true },
        iconSet: "fontAwesome",
        datatype: "jsonstring",
        datastr: jsonGrid.gridModel,
        colNames: jsonGrid.colNames,
        colModel: jsonGrid.colModel,
        pager: true,
        width: 1200,
        height: 100,
        viewrecords: true,
        navOptions: {add: false, edit: false, del: false, search: false, refresh: false },
        inlineNavOptions: { edit: true }
    }).jqGrid('inlineNav');
});

JSFIDDLE

Oleg · Accepted Answer · 2016-01-20T20:55:10.647

1

You should include call of navGrid before inlineNav:

gridPreNomina.jqGrid('navGrid', "#pagerPreNomina",
    { add: false, edit: false, del: false, search: false, refresh: false });
gridPreNomina.jqGrid('inlineNav', "#pagerPreNomina", { add: false, edit: true });

Finally you should write in all questions which version of jqGrid and from which fork (free jqGrid, Guriddo jqGrid JS, jqGrid in an old version <=4.7) you use. The possibilities, the performance and the options of jqGrid depends more and more from the fork which one uses. Free jqGrid is the fork which I develop, thus I would recommend you to use the latest 4.12.1 version of free jqGrid.

UPDATED: There are exist additional problem in the colModel, which you use. It has no columns having editable: true property. You can set *all columns editable by default by usage cmTemplate: { editable: true } option. Moreover Free jqGrid don't required that you call navGrid.

See the demo https://jsfiddle.net/OlegKi/w3b8862d/1/

edited Jan 20 '16 at 20:55

answered Jan 20 '16 at 20:20

Oleg

220,925
34
403
798

Thank you for your quick response Oleg. Unfortunately, including the call to "navGrid" still does not work, I tried with the latest version and still does not work – DarK_WisH Jan 20 '16 at 20:35
@DarK_WisH: You are welcome! See **UPDATED** part of my answer. I'd recommend you to update to the latest free jqGrid 4.12.1 additionally. – Oleg Jan 20 '16 at 20:56
your example is not working. However, if I remove all the "editable: true" and keep "cmTemplate" it works! Thanks again, also for show me the new free jqGrid syntax! – DarK_WisH Jan 20 '16 at 21:14
@DarK_WisH: You are welcome! `cmTemplate` can't overwrite **explicit** `"editable": "false"`values from `colModel`. `"editable": "true"` is the value of the **wrong type**. the value of `editable` property must be Boolean. `"editable": true` instead of `"editable": "true"`. – Oleg Jan 20 '16 at 21:53

Inline edit not working on Dynamic jqGrid

1 Answers1

Linked