Forum

November 2nd, 2014
A A A
Avatar

Lost password?
Advanced Search

— Forum Scope —




— Match —





— Forum Options —





Minimum search word length is 3 characters - maximum search word length is 84 characters

The forums are currently locked and only available for read only access
sp_Feed Topic RSS sp_Related Related Topics sp_TopicIcon
Local Data Paging & Sorting
15/12/2010
19:48
Avatar
feto
Member
Members
Forum Posts: 8
Member Since:
15/12/2010
sp_UserOfflineSmall Offline

Hello,

So upgrading from 3.6 to 3.8 has caused several breaks. And I've been pounding my head for 2 days trying to fix them.

1. addJSONData stopped displaying data in the grid, this was do to the stricter rules on json formatting - Finally FIXED

2. Now data is displaying in grid but when i go to change the page or sort on column the data disappears from the grid.

I first define the grid this way:

        $("#Grid").jqGrid({
            datatype: 'local',
            height: 255,
            width: 400,
            colNames: ['Id', 'Name'],
            colModel: [{ name: 'Id', index: 'Id', align: 'center', width: 20, hidden: true, key: true },
                            { name: 'Name', index: 'Name', align: 'center', width: 40}],
            rowNum: 0,
            rowTotal: -1,
            //scroll: 1,
            rowList: [10, 20, 50],
            loadonce: true,
            gridview: true,
            sortname: 'Name',
            viewrecords: true,
            sortorder: "asc",
            caption: 'Managers NOT in Group',
            pager: '#Pager'
        });

        jQuery("#Grid").jqGrid('navGrid', '#Pager', { del: false, add: false, edit: false, search: false, refresh: false });
        jQuery("#Grid").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false });

then a seperate function is called via AJAX to populate the grid this way:

        $.ajax({
            url: dataUrl,
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8",
            success: function(jsondata, stat) { //jsondata is already in json object form not json string form, from the server
                if (stat == "success") {
                    var grid = $("#Grid")[0];
                    grid.addJSONData(jsondata);
                }
            }
        });

Like I said initally the grid is populated with data corretly but when I try to do a page change or sort all data disappears from the grid and the pager changes its correct values (page 1 of 4 viewing 1-10 of 32) to (page 1 of NaN No Records) .

thx in advance

15/12/2010
22:08
Avatar
OlegK
Germany
Member
Members
Forum Posts: 1255
Member Since:
10/08/2009
sp_UserOfflineSmall Offline

First of all you should not use parameters rowNum: 0 and rowTotal: -1. It is better to set rowNum to one from the values from the rowList array.

Instead of usage of separate $.ajax call it is better to use

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
url: dataUrl,
mtype: 'POST',
datatype: 'json'

If the returned data contain array of objects having properties Id and Name, then you should additionally include parameter

jsonReader: { repeatitems: false }

See this, this and this answer for more informations and examples.

Best regards
Oleg 

15/12/2010
23:28
Avatar
feto
Member
Members
Forum Posts: 8
Member Since:
15/12/2010
sp_UserOfflineSmall Offline

Correct on the RowNum: 0 and rowTotal: -1, rowNum was supposed to be 10 but i copied it wrong.

But the reason i didnt call back to the server from the grid definition itself is because, and i should have mentioned it before i am actually returning 4 grid result sets from the server in one call and i populate 4 different datatype local grids locally from one server call so my AJAX post really looks like this:

        $.ajax({
            url: dataUrl,
            data: "{}",
            dataType: "json",
            type: "POST",
            contentType: "application/json; charset=utf-8″,
            success: function(jsondata, stat) { //jsondata is already in json object form not json string form, from the server
                if (stat == "success") {
                    var grid1 = $("#Grid1")[0];

                    var grid2 = $("#Grid2")[0];

                    var grid3 = $("#Grid3")[0];

                    var grid4 = $("#Grid4")[0];

                    grid1.addJSONData(jsondata[0]);

                    grid2.addJSONData(jsondata[1]);

                    grid3.addJSONData(jsondata[2]);

                    grid4.addJSONData(jsondata[3]);
                }
            }
        });

What you suggested works i set loadonce:true datatype:json after the post becomes datatype:local, paging/sorting works. BUT like i said i have 4 local grids that i want to populate with one call to the server/webservice. And i do populate them initially but when i page/sort the grid data disappears

15/12/2010
23:41
Avatar
feto
Member
Members
Forum Posts: 8
Member Since:
15/12/2010
sp_UserOfflineSmall Offline

And I guess the question really is why after the grid is displaying my data and the grid is datatype:local, why doesn't local paging and sorting just work? Why would attempting to page or sort make the data disappear from the grid?

16/12/2010
00:38
Avatar
feto
Member
Members
Forum Posts: 8
Member Since:
15/12/2010
sp_UserOfflineSmall Offline

Even when I write a hardcoded example it does the same thing, data adds and displays fine but when I try and sort on the Name column (All Row Data disappears):

        $("#Grid").jqGrid({
            datatype: 'local',
            height: 255,
            width: 400,
            colNames: ['Id', 'Name'],
            colModel: [{ name: 'Id', index: 'Id', align: 'center', width: 20, hidden: true, key: true },
                            { name: 'Name', index: 'Name', align: 'center', width: 40}],
            rowNum: 10,
            rowList: [10, 20, 50],
            loadonce: true,
            sortname: 'Name',
            viewrecords: true,
            sortorder: "asc",
            caption: 'Hardcoded Example',
            pager: '#Pager'
        });

        var grid = $("#Grid")[0];
        var r = '{"rows":[{"Id":75,"Name":"JoeK"},{"Id":74,"Name":"JohnK"},{"Id":87,"Name":"test"}],"Page":1,"total":1,"records":3}';
        var rr = (eval("(" + r + ")"));
        grid.addJSONData(rr);

I don't get it, am i missing files or am i adding them out of order? They get added in this order:

files.Add("/Content/Scripts/Shared/JqGrid/i18n/grid.locale-en.js");
files.Add("/Content/Scripts/Shared/JqGrid/jquery.jqGrid.settings.js");
files.Add("/Content/Scripts/Shared/JqGrid/jquery.jqGrid_3-8-1.min.js");

And am using jquery 1.4.2

16/12/2010
01:21
Avatar
feto
Member
Members
Forum Posts: 8
Member Since:
15/12/2010
sp_UserOfflineSmall Offline

Sorry for all the post :))) but am working through this now so my progress is currently fluid New discovery (reference example in my post above): grid.addJSONData(rr); //Adds data but local sort and paging NOT WORK $("#Grid").jqGrid("addRowData", "Id", rr.rows); //adds data and local sort and paging WORKS! Why?? And i guess i can use addRowData instead of addJSONData as long as performance is similar on large data sets?

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
51 Guest(s)

Currently Browsing this Page:
1 Guest(s)

Top Posters:

OlegK: 1255

markw65: 179

kobruleht: 144

phicarre: 132

YamilBracho: 124

Renso: 118

Member Stats:

Guest Posters: 447

Members: 11373

Moderators: 2

Admins: 1

Forum Stats:

Groups: 1

Forums: 8

Topics: 10592

Posts: 31289

Newest Members:

, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.com

Moderators: tony: 7721, Rumen[Trirand]: 81

Administrators: admin: 66

Comments are closed.
Privacy Policy   Terms and Conditions   Contact Information