CODEWITHSUNDEEP
jqgrid
Bill200
Bill200

Reputation: 103

How to post variable data with editData or onclickSubmit in jqgrid

I can't get editData or onclickSubmit to do what I need.

I want the grid to follow the added or edited row after update. So, I need to post some additional info so the server can return the id and correct page of the added/edited record.

I was able to do this using the addfunc and editfunc and a custom form, but I'd like to do it with the jqgrid generated forms.

I have a global declared before the DocumentReady function. Then, I tried using editData in the edit parameters and setting the variables in beforeSubmit or beforeInitData. The variables are posted to the server, but only as they are initially declared. It seems like the editData is created at initialization and can't be updated. I also tried using onclickSubmit, but couldn't get that to work either.

Here's an edited example:

var data2pass = {};
    data2pass['sortColumnName'] = '';
    data2pass['sortOrder'] = '';
    data2pass['rowNum'] = '';

$(document).ready(function(){

  $("#ProdGrid").jqGrid({
    url:'products_DAT.php?thespot=server_ProdGrid',
    datatype: 'json',
    mtype: 'POST',
    colNames:['ID','Product Name:','Category:','Unit Price:'],
    colModel :[ 
      {name:'ProductID', editable:true},
      {name:'ProductName', editable:true},
      {name:'CategoryID', editable:true, edittype:"select", editoptions: { dataUrl:  "products_DAT.php?thespot=select4_CategoryID" }},
      {name:'UnitPrice', align:'right', editable:true, formatter:'currency'}
    ],
    pager: '#ProdGrid_pager',
    rowNum: 15,
    sortname: 'ProductName',
    sortorder: 'asc',
    gridview: true,
    editurl: 'products_DAT.php?thespot=update_ProdGrid',
    height: 'auto'
  });

$("#ProdGrid").jqGrid('navGrid','#ProdGrid_pager', {},
{closeAfterEdit:true, reloadAfterSubmit: false, editData: data2pass,
    beforeInitData: function(formid) { 
    data2pass['sortColumnName'] = 'ProductName';
    data2pass['sortOrder'] = 'asc';
    data2pass['rowNum'] = '15';
    }
}, // Edit parameters
{}, // Add Parameters
{reloadAfterSubmit:true}, // Delete parameters
{}, // Search params
{} // View params
 );

However the data2pass variables are initially declared is what gets posted to the server. What event should I use to update the values of data2pass to post to the server? Or is there another better way to do it?

Any advice is greatly appreciated.

Thanks

Upvotes: 1

Views: 10848

Answers (2)

Oleg
Oleg

Reputation: 221997

You can either define properties of editData using functions

editData: {
    sortColumnName: function () { return "ProductName"; },
    sortOrder: function () { return "asc"; },
    rowNum: function () { return 15; }
}

or use callback onclickSubmit to extend the data posted to the server

onclickSubmit: function (options, postData) {
    return {
        sortColumnName: "ProductName",
        sortOrder: "asc",
        rowNum: 15
    };
}

or use serializeEditData callback

serializeEditData: function (postData) {
    return $.extend(true, {}, postData, {
        sortColumnName: "ProductName",
        sortOrder: "asc",
        rowNum: 15
    });
}

Every from above ways do the same. You can choose one way which you find the mostly convenient for your requirements.

Upvotes: 4

Mark
Mark

Reputation: 3123

I think this should do exactly what you want, it changes the postData variable that is sent to the controller, and then triggers a reload.

$('#gridName').jqGrid('setGridParam', { postData: { KeyName: KeyValue } }).trigger('reloadGrid', [{ page: 1}]);

if you need it to go as part of your edit you can do almost the same thing

$(#gridName).jqGrid('editGridRow', rowid, { editData: { KeyName: KeyValue

Upvotes: 0

Related Questions