JQGrid data from Local Object array

Question

I create a local object collection based on the user's selection. The dynamic Array should be loaded to the jqGrid. After dynamically creating the array I tried to reload, but nothing happens. Here is the code -

$(document).ready(function () {

         var arrobj = [];           

         var JSONString = []; //[{"DOId":"0","DONo":"Please select","DealerCode":"0","Week":"0","Item":"0","Qty":"11","Date":"11"}]

         $("#<%=btnAdd.ClientID%>").click(function () {
             //Get values
             //Date
             var dlDt = $("#<%=tbRchngDt.ClientID%>").val();
             //Qty
             var dlQty = $("#<%=tbQty.ClientID%>").val();
             //item
             var dlItem = $("#<%=ddlItem.ClientID%>").val();
             //DO No
             var dlDOId = $("#<%=ddlDO.ClientID%>").val();
             var dlDO = $("#<%=ddlDO.ClientID%> option:selected").text();
             //Week
             var dlWeek = $("#<%=ddlWeek.ClientID%>").val();
             //Dealer
             var dlDealer = $("#<%=ddlDealer.ClientID%>").val();

             DistributionDtl = new Object();
             DistributionDtl.DOId = dlDOId;
             DistributionDtl.DONo = dlDO;
             DistributionDtl.DealerCode = dlDealer;
             DistributionDtl.Week = dlWeek;
             DistributionDtl.Item = dlItem;
             DistributionDtl.Qty = dlQty;
             DistributionDtl.Date = dlDt;


             //alert(DistributionDtl);
             arrobj.push(DistributionDtl);
             JSONString = JSON.stringify(arrobj);
             //alert(JSONString);
             $("#list").jqGrid('setGridParam',
             { datatype: "local",
                 data: JSONString
             }).trigger("reloadGrid");

         });
         jQuery("#list").jqGrid({ data: JSONString,
             datatype: "local",
             height: 150,
             width: 600,
             rowNum: 10,
             rowList: [10, 20, 30],
             colNames: ['DOID', 'Item', 'Qty', 'Date'],
             colModel: [{ name: 'DOId', index: 'DOId', width: 60, sorttype: "int" },
                                { name: 'Item', index: 'Item', width: 120 },
                                 { name: 'Qty', index: 'Qty', width: 80 },
                                  { name: 'Date', index: 'Date', width: 120}],
             pager: "#pager",
             viewrecords: true,
             caption: "Contacts"
         });

     });

I small nitpick, but it might make be worth trying is that there is probably no need in your trigger line to setGridParam to values that area already set when you build the grid. So you could $("#list").jqGrid().trigger("reloadGrid"); — Mark, Dec 20 '12 at 12:40
Do you see the grid requesting new data in Firebug / Chrome ? Could you setup a completely different text array with some static data to test if your grid is pulling any data at all on the change? — Mark, Dec 20 '12 at 16:41

TigOldBitties · Accepted Answer · 2012-12-20T12:24:35.730

0

You should add data local to jqgrid with any of the following methods:

addJSONData - with data as json
addRowData - adding row by row and then trigger reload grid to recalculate pagination - data should be a javascript object

Documentation can be found here. Edit: According to the documentation you CAN set local data directly in the "data" param but it should be an array not a json string and you do not have the contents of JSONString in your question, so the problem might come from that.

edited Dec 20 '12 at 12:24

answered Dec 20 '12 at 12:13

TigOldBitties

1,331
9
15

hanks. addRowData is working. What I am doing is jQuery("#list").addRowData(DistributionDtl.DOId, DistributionDtl); – Dibakar Dec 21 '12 at 06:05
There is a problem. After adding data this way, when i select a row it selects the first row and if i try to delete a record as Oleg has shown [here](http://stackoverflow.com/questions/12281463/local-form-editing-demo-and-jqgrid-4-4-1/12296186#12296186) all rows are deleted – Dibakar Dec 21 '12 at 06:24
Sorry, its working fine now. Somehow Rowid was same for all rows. thats why i was encountering that problem. Now I have changed addrowdata to jQuery("#list").addRowData(slNo, DistributionDtl, "last"); and it is working fine. – Dibakar Dec 21 '12 at 06:41
When you use addrowdata, after all rows have been added do not forget to `.trigger('reloadGrid'), because if, for example, your grid shows 10 lines/page and you add 11 rows, the grid will not paginate properly until your reload, as it hasn't done the pagination calculations. – TigOldBitties Dec 21 '12 at 06:54

JQGrid data from Local Object array

1 Answers1