jQuery Grid Plugin - jqGrid - Topic: Paging, Sorting and appending with Local Data

MaximG on Paging, Sorting and appending with Local Data

Wed, 29 Sep 2010 10:33:34 +0300

For anyone interested please refer to http://www.trirand.com/blog/?p.....correctly/ for solution.

MaximG on Paging, Sorting and appending with Local Data

Wed, 29 Sep 2010 09:20:11 +0300

I can confirm without question that this is a bug. (Will post in bug forum)

Still trying to work out how to fix it.

Code to recreate problem:

$(function () {
            $("#tableSearch").jqGrid({
                datatype: "local",
                colNames: ['Type', 'Description', 'Options'],
                colModel: [{ name: 'Type', index: 'Type', width: 50, align: "center" },
                            { name: 'Description', index: 'Description', width: 230, sortable: true },
                            { name: 'Options', index: 'Options', width: 69, sortable: false}],
                rowNum: 10,
                sortname: 'type',
                sortorder: "desc",
                id: "RowID",
                caption: "Search",
                rowList: [10, 20, 30],
                pager: "#divPager",
                gridComplete: function () {
                }
            })
        });

        function GoGoGo() {
            $("#tableSearch").clearGridData();
            $("#tableSearch").addRowData("RowID", [{ RowID: "101", Type: "Type", Description: "Desc", Options: "Option" }, { RowID: "102", Type: "Type", Description: "Desc", Options: "Option"}]);
            $("#tableSearch").trigger("reloadGrid");

            var test1 = $("#tableSearch").getDataIDs();
            debugger;
            //Will return ID of 1 for row 1
        }

MaximG on Paging, Sorting and appending with Local Data

Tue, 28 Sep 2010 08:16:38 +0300

After all that it doesnt work. It only worked with my test data as I was using integers for my IDs in my test.

There appears to be some specialized code inside the addRowData method that (ONLY IN THE CASE OF LOCAL DATA) deletes the predefined key and sets it to the length of the data array. (I Could be wrong though - still testing where its happening exactly)

This is the code here (at least I think)


if(t.p.datatype == 'local') {
 
         t.p._index[rowid] = t.p.data.length;
 
         t.p.data.push(lcdata);
 
         lcdata = {};

 }

Anyone care to comment?

MaximG on Paging, Sorting and appending with Local Data

Tue, 28 Sep 2010 07:59:40 +0300

OK so for anyone interested I ended up looking at the source code and worked it out....

The first param of the addRowData method is actually the NAME of the id column in your dataset...

So basically this is how you would do it...

var data = [{ id: "ROW1ID" , param1: "", param2: "", param3: "", (Ect)...... },

{ id: "ROW2ID" , param1: "", param2: "", param3: "", (Ect)...... }];

jQuery("#grid_id").addRowData("id", data);

WORKS A CHARM!!!

Thanks so much for your help Oleg...

MaximG on Paging, Sorting and appending with Local Data

Tue, 28 Sep 2010 07:25:04 +0300

Thank you so much. I was unaware you could pass an array into that method.

One last issue I am having with is how to pass in the IDs for each row.

Passing an array of IDs to the .addRowData() method doesnt seem to work, nor does passing an ID parameter as part of the data definition. Could you advise what I might be doing wrong?

Have tried…

var data = [{ id: "ROW1ID" , param1: "", param2: "", param3: "", (Ect)...... },

{ id: "ROW2ID" , param1: "", param2: "", param3: "", (Ect)...... }]

jQuery("#grid_id").addRowData(null, data);

and have tried

var data = [{ param1: "", param2: "", param3: "", (Ect)...... },

{ param1: "", param2: "", param3: "", (Ect)...... }]

var IDs = [ "ID1", "ID2" ]

jQuery("#grid_id").addRowData(IDs, data);

Neither of which have seemed to work and simply return an array of "undefined" for the method getDataIDs().

Thanks again for all your help and so sorry to be a pest. Hopefully this post will be useful to someone else also.

OlegK on Paging, Sorting and appending with Local Data

Mon, 27 Sep 2010 12:50:11 +0300

You can use addRowData method to add not only one row. The data parameter can be also array or row items, which can also include the id value for every new row. You can also use it in the form

jQuery("#grid_id").addRowData(rowid,data)

to add multiple rows or use

jQuery("#grid_id").getRowData()

to get all data from the grid.

Best regards
Oleg

MaximG on Paging, Sorting and appending with Local Data

Mon, 27 Sep 2010 10:05:41 +0300

OlegK said:

You can use addRowData method.

Best regards
Oleg

My concern with addRowData was what happens if you have a large dataset? Seems to me like the performance might end up being an issue (given that you are adding one row at a time), no?

Further it seemed to cause issues with paging (although those issues seem to disappear if I call .trigger("reloadGrid"); )

Is this considered the optimal solution?

OlegK on Paging, Sorting and appending with Local Data

Mon, 27 Sep 2010 09:58:18 +0300

You can use addRowData method.

Best regards
Oleg

MaximG on Paging, Sorting and appending with Local Data

Mon, 27 Sep 2010 08:58:50 +0300

Could someone please be kind enough to advise how I can add data to the grid when using datatype: "local" and when I do not want to add the data during the instantiation of the grid using the data: option?

(My goal is to create a blank grid and populate it as the user types from a local variable so obviously recreating the grid in such a scenario after every keystroke would be a bad idea)

.addJSONData() doesnt work (as this seems to be designed to work only with webservices)

So what are my options?

Thanks in advance for any help

PS: THANK YOU GUYS FOR CREATING SUCH AN AMAZING PRODUCT… (I wish we had such a fully featured grid in forms applications)