CODEWITHSUNDEEP
javascriptjqgrid
Andrus
Andrus

Reputation: 27975

How to update column after inline add in jqGrid

jqGrid contains columns defined in colmodel as

{"name":"_actions",
  "formatoptions":{"editbutton":true,"keys":true
  ,"delbutton":true
    } },

{ "name":"Kood","editable":true,"hidden":true}

New row is added to grid pressing inline add button in toolbar. After data in saved, controller returns new Kood column value. This new value should assigned to Kood column.

Code below shows two methods which I tried but both fail. Kood column values does not change

How to update column after inline add ? How to update column also if inline added row is saved using save action button ?

$grid.jqGrid('inlineNav', '#grid_toppager', {
  addParams: {
     addRowParams: {
            keys: true,
            // This is called if enter key is pressed to save added row
            aftersavefunc: afterSaveFuncAfterAdd,
        }
    },

  editParams: {
      keys: true,
      // This is called if saver button in toolbar is pressed on inline add
      aftersavefunc: afterSaveFuncAfterAdd,
    },
add: true,
edit: false,
save: true,
cancel: true
});

function afterSaveFuncAfterAdd(rowID, response ) {
  var json = $.parseJSON(response.responseText);
      postData = $grid.jqGrid('getGridParam', 'postData');
  // this shows correct value:
  alert(json.PrimaryKeyValues[0]);
  // attempt 1:
  $('#' + rowID + '_Kood').val(json.PrimaryKeyValues[0]);
  // attempt2:
  postData['Kood'] = json.PrimaryKeyValues[0];
  }

Upvotes: 2

Views: 5951

Answers (1)

Oleg
Oleg

Reputation: 222017

The callback aftersavefunc of the editRow will be called after the and of editing. At the moment you will find no $('#' + rowID + '_Kood'). Moreover the postData will be not changed during inline editing so $grid.jqGrid('getGridParam', 'postData') will get you no helpful information.

So I recommend you to post back all the data which you need as the response from the editurl. For example the columns which have default values calculated by the server, like last editing timestamp, you can post back. The response of the Add operation should additionally contains the id generated by the server. You can use setRowData or setCell to modify the data in the grid after receiving the response from the server.

For example, You can return

{"Id": "DB_Id", "Kood": "new Kood value"}

from the server as the response on the "Add" operation and return

{"Kood": "new Kood value"}

as the response on the "Edit" operation. In the case the code of afterSaveFuncAfterAdd can be like the following

var afterSaveFunc = function (rowId, response) {
    var data = $.parseJSON(response.responseText);
    if ($.isPlainObject(data) && typeof data.Kood !== "undefined") {
        if (typeof data.Id !== "undefined") {
            // if we have 'Id' column in the grid we have to update the column
            // together with the value of `Kood`
            $(this).jqGrid('setRowData', rowId, { Id: data.Id, Kood: data.Kood });
            // if we have no additional `Id` we can update the Kood column only with
            // the statement like below
            // $(this).jqGrid('setCell', rowId, 'Kood', data.Kood);

            // in case of "Add" operation we have to update the row Id
            $('#' + $.jgrid.jqID(rowId)).attr('id', data.Id);
        } else {
            $(this).jqGrid('setCell', rowId, 'Kood', data.Kood);
        }
    }
}

Upvotes: 5

Related Questions