jQuery Grid Plugin - jqGridForum

27/09/2010
08:58

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

1

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)

27/09/2010
09:58

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

2

You can use addRowData method.

Best regards
Oleg

27/09/2010
10:05

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

3

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?

27/09/2010
12:50

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

4

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

28/09/2010
07:25

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

5

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.

28/09/2010
07:59

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

6

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...

28/09/2010
08:16

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

7

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?

29/09/2010
09:20

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

8

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
        }

29/09/2010
10:33

MaximG

Member

Members

Forum Posts: 10

Member Since:
27/09/2010

Offline

9

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