jQGrid - “jpg1” instead of proper id number

Question

I'm loading local file (I'm parsing csv file into json and then transfer the array to jqGrid). Table generated through jqGrid should allow user to modify, add and delete the data in the grid. Everything seemed to work perfectly until I wanted to add a row to my grid. One of the columns had a parameter key = true which is my id for the rows. When I try to add new row, the grid changes my id into jpg1. The others columns are fine. Below is the code I'm using:

$("#jqGrid").jqGrid({
datatype: "local",
data: myData,
editurl: "clientArray",
colModel: [
{ 
  label: 'Kod',
  name: 'Kod',
  width: 60,
  editable: true,
  key: true,
  sorttype: 'number'
},

{ 
  label: 'Firma', 
  name: 'Firma', 
  width: 120,
  editoptions:
  {
    size: 40,
    sopt:['cn']
  },
  editable: true,
  sorttype: 'string'
},
{
  label: 'Adres', 
  name: 'Adres', 
  width: 80,
  editoptions: {size: 40},
  editable: true
},
{
  label: 'Miasto', 
  name: 'Miasto', 
  width: 80,
  editoptions:
  {
    size: 40,
    sopt:['cn']
  },
  editable: true
}
],
height: 'auto',
autowidth: true,
shrinkToFit: false,
forceFit: false,
autoencode: true,
viewrecords: true,
caption: "Title",
pager: "#jqGridPager",
sortable: true,
ignoreCase: true,
sortname: 'Kod',
sortorder: 'asc',
rowNum: 5,
rowList: [5, 10, 20, "10000:All"],
ondblClickRow: function(rowid) {
  $("#jqGrid").jqGrid('editGridRow', rowid,
  {
    editCaption: "The Edit Dialog",
    zIndex:100,
    recreateForm: true,
    closeAfterEdit: true,
    width: 900,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  });
}


});



$('#jqGrid').jqGrid('navGrid',"#jqGridPager",
  { edit: true, add: true, del: true, search: false, refresh: true, view: true, cloneToTop: true},
  // options for the Edit Dialog
  {
    editCaption: "The Edit Dialog",
    zIndex:100,
    recreateForm: true,
    closeAfterEdit: true,
    reloadAfterSubmit: true,
    width: 900,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Add Dialog
  {
    width: 900,
    zIndex:100,
    closeAfterAdd: true,
    recreateForm: true,
    reloadAfterSubmit: true,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Delete Dialog
  delSettings,
  // options for the Search Dialog
  {
    zIndex:100
  },
  // options for the View Dialog
  {
    width: '100%'
  });

I'm attaching a screenshot that shows a problem: Photo The data I use is a file parsed into JSON array via Papaparse.js plugin.

EDIT: I've added the test data if somebody would like to test the code.

var myData = [];
  myData.push(
  {
    Kod: 1.1,
    Firma: 'Hutchinson',
    Adres: '5th Avenue',
    Miasto: 'Wroclaw'
  },
  {
    Kod: 2.1,
    Firma: 'BMW',
    Adres: '6th Avenue',
    Miasto: 'Warsaw'
  });

I will be grateful for any help.

Answer 1

If you need the grid only for local editing, you can consider just remove key: true property to solve the problem. It's the way, which I would recommend you. You can include id property in the input data which will be used as value of rowid (id of <tr> elements).

Alternatively you can change the block "options for the Add Dialog" to the following

// options for the Add Dialog
{
  width: 900,
  zIndex:100,
  closeAfterAdd: true,
  recreateForm: true,
  reloadAfterSubmit: true,
  onclickSubmit: function (options, postdata, frmoper) {
      // save Kod in some other parameter
      return {myKod: postdata.Kod};
  },
  afterSubmit: function (jqXHR,postdata, frmoper) {
      // restore the correct value
      postdata.Kod = postdata.myKod;
      // inform jqGrid that it was not an error
      return [true];
  }
},

You still don't would be able to change the id of the row in the way.

By the way you wrote that you use jqGrid 4.7.1. I want remind you that jqGrid 4.7.0 is the last version which is free. It's the reason why I started free jqGrid project which still free. You can get it here (see readme and wiki).

The demo shows an example of the above code fixes using free jqGrid 4.8.