0

I am current using a JqGrid for my data visualization. Here is my JqGrid configurations.

 $('#jqGrid').jqGrid({
  url: '/ConfirmationOfEmployment/GetUsers',
  mtype: "POST",
  rowNum: currentPageSize,
    datatype: "json",
    colNames: ['UserId', 'First Name', 'Last Name', 'Email Address', 'Expiry Date', 'Remaining Days', 'Actions','Remind Status'],
    colModel: [
            { name: 'UserId', index: 'UserId', align: 'left', hidden: true, edittype: 'text' },
            { name: 'FirstName', index: 'FirstName', align: 'left' },
            { name: 'LastName', index: 'LastName', align: 'left' },
            { name: 'Email', index: 'Email', align: 'left' },
            { name: 'userExpiryDate', index: 'ExpiryDate', align: 'center', classes: 'createdDate' },
            { name: 'remainingDays', index: 'RemainingDays', align: 'center' },
            { name: 'isReminded', index: 'isReminded', align: 'left', hidden: true, edittype: 'text' },
            { name: 'act', index: 'act' },
                    ],
    pager: $('#jqPager'),
    sortname: currentSortName,
    width: '700',
    shrinkToFit: false,
    sortorder: currentSortOrder,
    search: true,
    postData: {
        filters: RetrieveFilters
    },
    gridComplete: function () {
      var ids = jQuery('#jqGrid').jqGrid('getDataIDs');
      var remindStatus = jQuery('#jqGrid').jqGrid('getCol', 'isReminded');
      for (var i = 0; i < ids.length; i++) {
        var userId = ids[i];
        var isUserReminded = remindStatus[i];
        var confrim = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Confirm' onclick=\"ConfirmUser('" + userId + "','"+i+"');\"  />";
        var remove = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Delete' onclick=\"DeleteUser('" + userId + "');\" />";
        var remind;
        if (isUserReminded == 'True') {
          remind = "<input style='height:25px;width:60px;margin-left:5px;' type='button' disabled value='Remind' onclick=\"RemindUser('" + userId + "');\"  />";
        }
        else {
          remind = "<input style='height:25px;width:60px;margin-left:5px;' type='button' value='Remind' onclick=\"RemindUser('" + userId + "');\"  />";
        }      

        jQuery('#jqGrid').jqGrid('setRowData', ids[i], { act: confrim + remind + remove });
      };
      PageIndexHashUpdate();
    }
});


In each of row, there are three buttons. Once user click on the "Confirm button" it fire the ConfirmUser javascript ajax call to the server and update the expiry date and the remaining days of the particular user.Once it's get succeeded, it will reload the grid.So its working fine.Here is the code.

ConfirmUser = function (selectedUserId, rowId) {
  $.ajax({
    url: "/ConfirmationOfEmployment/ConfirmUser",
    async: false,
    cache: false,
    type: "POST",
    dataType: "json",
    data: { userId: selectedUserId },
    error: function (jqXHR, textStatus, errorThrown) {
      $.flashMessage({ "error": errorThrown, "alert": "error" });
    },
    success: function (data, textStatus, jqXHR) {
      console.log(rowId);
      console.log(data.newExpiryDate);
      var rowData = $('#jqGrid').jqGrid('getRowData', rowId);
      console.log(rowData);
      //rowData.remainingDays = '180';
      //rowData.userExpiryDate = data.newExpiryDate;
      //$('#jqGrid').jqGrid('setRowData', rowId, rowData)
      //$("#jqGrid").jqGrid('setCell', rowid, 'remainingDays', data.remaining);
      //$("#jqGrid").jqGrid('getLocalRow', rowid).remainingDays = data.remaining;
      $('#jqGrid').trigger("reloadGrid", [{ page: currentPage, current: true }]);
    }
  });
};


But the problem is that,once the user keep on clicking the confirm button for various user records, each and every time it will reload the grid which is much time consuming.
So what I am seeking is a way to update the particular row only(instead of reloading the grid.) I tried to use 'setCell' and 'setRowData' methods(commented out lines.) but I failed. So I would like to know how to do update particular cell or row without reloading the grid? Thank you.

Punuth
  • 417
  • 3
  • 6
  • 19
  • First of all the code you should include the information about the version of jqGrid and the fork ([free jqGrid](https://github.com/free-jqgrid/jqGrid), commercial [Guriddo jqGrid JS](http://guriddo.net/?page_id=103334) or an old jqGrid in version <=4.7), which you use (or can use) in every question about jqGrid. The code, which you posted is **very slow** because of `gridComplete` which you use. It's really good example how one should never fill the grid. Instead of modification of the data with respect of `setRowData` in the loop *after the filling* one should fill correct data. – Oleg Oct 20 '16 at 11:53
  • One can use custom formatters for example if you use old version of jqGrid. If you use free jqGrid fork, which I develop, then the best choice would be the usage of custom buttons of `formatter: "actions"`: see [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Enhancement-of-formatter:%22actions%22), [the demo](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton.htm) or [another one](http://www.ok-soft-gmbh.com/jqGrid/OK/CustomActionButton1.htm). See [the old answer](http://stackoverflow.com/a/29735149/315935) for more details. – Oleg Oct 20 '16 at 11:57
  • The usage of `setRowData` or `setCell` is correct to modify the grid. I suppose that you used the methods in the wrong way or you first made the modifications of **local** grid and then reloaded the grid refilling it with **old** data from the server. In any way one could find the reason why your code with `setRowData` or `setCell` worked incorrectly only after to see the demo of at least the code fragment, which reproduces the problem. – Oleg Oct 20 '16 at 12:01

0 Answers0