jqGrid - how to delete row from local data?

Question

I am really new to the jqGrid. 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. I tried to resolve my problem using various answers from here like:

Adding new row to jqGrid using modal form on client only

There I have found the example made by Oleg for the 4.7 version of jqGrid and reproduced the same code for my purpose. The result was that I am able to delete row which I added after the grid initialisation but I am unable to delete any other row which was loaded from the array.

Another interesting thing is that I am able to modify the rows loaded from array, the only thing I cannot do with the grid is to delete rows loaded from array. I appreciate any advices.

Here is part of the code with jqGrid:

var delSettings = {
onclickSubmit: function () {
  var $this = $(this), p = $this.jqGrid("getGridParam"), newPage = p.page;

    if (p.lastpage > 1) {// on the multipage grid reload the grid
      if (p.reccount === 1 && newPage === p.lastpage) {
        // if after deliting there are no rows on the current page
        // which is the last page of the grid
        newPage--; // go to the previous page
      }
      // reload grid to make the row from the next page visable.
      setTimeout(function () {
        $this.trigger("reloadGrid", [{page: newPage}]);
      }, 50);
    }
    return true;
}
};

  $("#jqGrid").jqGrid({
    datatype: "local",
    data: results.data,
    editurl: "clientArray",
    colModel: [
    { 
      label: 'Id',
      name: 'Id', 
      width: 60,
      editable: true, 
      key: true,
      sorttype: 'number'
    },
    { 
      label: 'Company', 
      name: 'Company', 
      width: 90,
      editoptions: {size: 40},
      editable: true,
      sorttype: 'string'
    },
    {
      label: 'Address', 
      name: 'Address', 
      width: 100,
      editoptions: {size: 40},
      editable: true
    },
    {
      label: 'City', 
      name: 'City', 
      width: 80,
      editoptions: {size: 40},
      editable: true
    }
    ],
    height: '100%',
    viewrecords: true,
    caption: "Baza klientów Klimatest",
    pager: "#jqGridPager",
    sortable: true,
    ignoreCase: true,
    cmTemplate: {editable: true, searchoptions: {clearSearch: true }},
    rowNum: 5,
    rowList: [5, 10, 20],
  });

  // toolbar searching
  $('#jqGrid').jqGrid('filterToolbar', { defaultSearch: 'cn'});
  $('#jqGrid').jqGrid('navGrid',"#jqGridPager",
  { edit: true, add: true, del: true, search: true, refresh: true, view: true},
  // options for the Edit Dialog
  {
    editCaption: "The Edit Dialog",
    recreateForm: true,
    closeAfterEdit: true,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Add Dialog
  {
    closeAfterAdd: true,
    recreateForm: true,
    errorTextFormat: function (data) {
      return 'Error: ' + data.responseText
    }
  },
  // options for the Delete Dialog
  delSettings,
  // options for the Search Dialog
  {

  },
  // options for the View Dialog
  {

  });
  // add first custom button
  $('#jqGrid').navButtonAdd('#jqGridPager',
  {
    buttonicon: "ui-icon-calculator",
    title: "Column chooser",
    caption: "Columns",
    position: "last",
    onClickButton: function() {
        // call the column chooser method
        jQuery("#jqGrid").jqGrid('columnChooser');
    }
  });

EDIT Data source is the result of parsed CSV file via Papaparse.js plugin (array of objects), which looks like this:

Id: "100,1"
Address: "Strefowa 8"
Company: "DSSE Sp. z o.o."
City: "Warsaw"

I edited the code just like Oleg suggested and I'm still able to delete only records which are added via interface of jqGrid.

I don't know if it may help, but when I click delete icon and confirm that I want to delete selected row, that row is no longer highlighted, but still visible. Thanks for feedback.

Answer 1

You have clear error in your code near // options for the View Dialog block. The View option should be included after delete and search options (see the documentation). So your current code don't use delSettings options.

I recommend you additionally to include test data in your next questions, because some problems exist only with some specific format of input data.

UPDATED: The problem is in the data which you use. The value for Id which you use contains comma ("100,1"). It's not allowed for jqGrid. First of all id in HTML should not use characters which have special meaning in CSS. The second problem: delGridRow method uses commas in separator to delete multiple rows at once. So the usage of id="100,1" will follows to attempt to delete tow rows: one row with id=100 and the second one with the id=1. By the way I'm developing now jqGrid in my fork of GitHub. I fixed many restrictions with the usage of special characters in ids. So you will be do able to use id="100,1" and successfully delete the rows if you would use jqGrid from my fork.

I recommend you to use underscore if you need to construct id which consist from multiple numbers: Id: "100_1" instead of Id: "100,1".