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.

which version of jqGrid you use? Is `editurl: "clientArray"` is what you want to use in your final solution? You use for example `errorTextFormat` which works only if you save the data to the server. Do you plan that **the user** types the new unique id value like `262.1`? — Oleg, Mar 27 '15 at 10:56
@ Oleg: Exactly - the user can type the value like you said. And that is the problem. I use version 4.7.1 of jQGrid. The data is local, it wont be sent to any server. Client works on local array and then saves it into a csv file (using node-webkit for that). I used `errorTextFormat` because I used the code from some examples, I don't need that at all. — rascal90, Mar 27 '15 at 11:29

score 1 · Accepted Answer · answered Mar 27 '15 at 13:13

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.

When I delete the **key** parameter, problem with adding new row fades but I got then problem with deleting a row. It deletes wrong row. Lets say I am on the page 5, when I delete second row on the page 5, it deletes the second row but on the page **1**. The same goes to editing. When I edit the row, after reloading the grid it duplicates the row I just edited. — rascal90, Mar 27 '15 at 13:36
I switched to your repository - I did that before when you were helping me with my first question about jQGrid. I've changed options for the **Add dialog** and now everything seems to be alright. Thanks for your help! — rascal90, Mar 27 '15 at 13:45
@rascal90: You are welcome! The problem with deleting of wrong row is can exist only in case of wrong *filling* the grid. You can for example assign to any row **unique** `id` property using call of `$.jgrid.randId()` for every item of the input data. You can remove `key: true`. It's good it you need to allow to edit **all properties** inclusive `Kod` column. The `id` of every row on every page will be sure different. — Oleg, Mar 27 '15 at 15:39

jQGrid - "jpg1" instead of proper id number

1 Answers1

Linked