jQuery Grid Plugin - jqGridForum

Forum

November 2nd, 2014

A A A

Topic RSS

Pager not working (for me). Where am I doing wrong?

24/08/2010
00:01

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

Hello all,

I am working with asp.net. I have done my first jqGrid and I am not able to make the pager works...

As you can see in the following image the records are displayed corectly except for the pager that show them all together and not in pages of 25 as I have specified.

This is my HTML:

</div>

This is the script block:

$(function () {

$("#contactsList").jqGrid({

datatype: function (pdata) { getData(pdata); },

height: 230,

colNames: ['ID', 'Sigla', 'Nome Provincia', 'Regione'],

colModel: [

{ name: 'ID', width: 60, sortable: false },

{ name: 'Sigla', width: 80, sortable: false },

{ name: 'Name', width: 180, sortable: false },

{ name: 'Region', width: 180, sortable: false }

imgpath: '<%= ResolveClientUrl("~/media/css/redmond/images") %>',

pager : '#gridpager',

rowList:[25,50,100],

viewrecords: true,

caption: "Lista province"

}).navGrid("#gridpager",{});

});

function getData(pData) {

$.ajax({

type: 'POST',

contentType: "application/json; charset=utf-8",

url: '<%= ResolveClientUrl("~/ws/RubricaWS.asmx/GetProvinces") %>',

data: '{}',

dataType: "json",

success: function (data, textStatus) {

if (textStatus == "success") {

ReceivedClientData(JSON.parse(getMain(data)).rows);

}

error: function (data, textStatus) {

alert('An error has occured retrieving data!');

}

});

}

function ReceivedClientData(data) {

var thegrid = $("#contactsList");

thegrid.clearGridData();

for (var i = 0; i < data.length; i++) {

thegrid.addRowData(i + 1, data[i]);

}

function getMain(dObj) {

if (dObj.hasOwnProperty('d'))

return dObj.d;

else

return dObj;

}

</script>

And this is the json data returned from the web service

Any suggestion? Cry

Thanks a lot

verorange

24/08/2010
03:59

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

I don't understand why you use datatype as function to load JSON data? jqGrid has already support for JSON data. You should just use datatype: "json" parameter of jqGrid (not dataType: "json") and mtype: "POST". To have contentType: "application/json; charset=utf-8" in the corresponding ajax request you should include ajaxGridOptions: { contentType: "application/json" } parameter of the jqGrid.

jqGrid will send to the server additional parameters int page, int rows, string sidx, string sord, bool _search. You have to define all the parameters and use serializeGridData with JSON.stringify to serialize the data.

To support simple searching you should include also string searchField, string searchOper, string searchString in the method prototype. To support advanced searching you should include string filters instead.

Having all this parameters your server can gives back the correct page of data asked by jqGrid (corresponds to page, rows parameters). The data you will sort also on the server corresponds to sidx, sord.

A code example you can find in my old answer on the stackoverflow: http://stackoverflow.com/quest.....2 and http://stackoverflow.com/quest.....17#2836817.

Because you post currently "ID" instead of "id" in the JSON data you will be required either define key: true parameter for the 'ID' column or include jsonReader { id: "ID"} as an additional parameter of jqGrid.

Best regards
Oleg

24/08/2010
13:47

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

OlegK said:

I don't understand why you use datatype as function to load JSON data? jqGrid has already support for JSON data. You should just use datatype: "json" parameter of jqGrid (not dataType: "json") and mtype: "POST". To have contentType: "application/json; charset=utf-8" in the corresponding ajax request you should include ajaxGridOptions: { contentType: "application/json" } parameter of the jqGrid.

jqGrid will send to the server additional parameters int page, int rows, string sidx, string sord, bool _search. You have to define all the parameters and use serializeGridData with JSON.stringify to serialize the data.

To support simple searching you should include also string searchField, string searchOper, string searchString in the method prototype. To support advanced searching you should include string filters instead.

Having all this parameters your server can gives back the correct page of data asked by jqGrid (corresponds to page, rows parameters). The data you will sort also on the server corresponds to sidx, sord.

A code example you can find in my old answer on the stackoverflow: http://stackoverflow.com/quest.....2 and http://stackoverflow.com/quest.....17#2836817.

Because you post currently "ID" instead of "id" in the JSON data you will be required either define key: true parameter for the 'ID' column or include jsonReader { id: "ID"} as an additional parameter of jqGrid.

Best regards
Oleg

I am sorry but I cannot answer your question. I have just started using jqGrid from some example code found on the internet. I wrote here to ask for help. You should ask somewhere else if you want help...

Anyway... I have followed some of yoiur advices present in the first stack overflow link (there's no way for me to access the second one) and now the code does not work anymore..... the grid does not appear as well....

The HTML has not been changed. Same for server code. I have only changed some of the client code. The first problem is that doing this way the webservice is never called (I have tried setting a breakpoint in code)

$("#contactsList").jqGrid({

url: '<%= ResolveClientUrl("~/ws/RubricaWS.asmx/GetProvinces") %>',

datatype: "json",

mtype: 'POST',

loadonce: true,

ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },

serializeGridData: function(postData) {

return JSON.stringify(postData);

jsonReader: {

root: function(obj) { return obj.rows; },

page: function(obj) { return obj.page; },

total: function(obj) { return obj.total; },

records: function(obj) { return obj.records; }

height: 230,

colNames: ['Id', 'Sigla', 'Nome', 'Regione'],

colModel: [

{ name: 'ID', width: 60, align: center, hidden: false },

{ name: 'Sigla', width: 80, sortable: false, hidden: false },

{ name: 'Name', width: 180, sortable: false, hidden: false },

{ name: 'Region', width: 180, sortable: false, hidden: false }

imgpath: '<%= ResolveClientUrl("~/media/css/redmond/images") %>',

rowNum: 10,

rowList: [25, 50, 100],

pager: '#gridpager',

viewrecords: true,

gridview: true,

rownumbers: true,

caption: "Lista province"

}).jqGrid('navGrid', '#gridpager', {edit:true, add:true, del:false, search:true});

});

If you want to give some help I am very grateful.... thanks! Smile

24/08/2010
18:21

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

I don't like if sombody be not polite to me. Jokes like "You should ask somewhere else if you want help…" I find not funny.

Your code not works because it has errors (at least 2). Good luck in searching of errors. Bye bye.

Oleg

24/08/2010
20:27

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

OlegK said:

I don't like if sombody be not polite to me. Jokes like "You should ask somewhere else if you want help…" I find not funny.

Your code not works because it has errors (at least 2). Good luck in searching of errors. Bye bye.

Oleg

Hello Oleg,

You say that I have not been polite with you….. I dont believe that you're right

and invite you to read again your first answer to see if you have been polite with me.

I have clearly stated in my first post that it was my first usage of the jqGrid package

and I have asked why the pager did not worked correctly. Your answer has told me:

to change "datatype"
to add "mtype"
to use "ajaxGridOptions"
to use additional parameters and "serializeGridData"
how to support simple and advanced searching
to add the "key: true" parameter or include jsonReader

But nothing that would instead really help me to find a solution to the problem.

And I am the one not polite?

Dont be worry! In this world there are many people much more educated than you and,

especially, available to help others.

regards

verorange

24/08/2010
22:32

admin

Admin

Members

Forum Posts: 66

Member Since:
05/05/2007

Offline

Dear verorange,

Dear OlegK,

Please let the dispute go in professional skills and not on personal one.
I know that sometime this go out from control, but I hope that this is
a temporary.
We actually have this forum to help each other and not make confrontations.

I appreciate a handshake to each other and I'm the first which do this to both one (handshake)
I hope that you follow me.

Best Regards

TriRand Administartor

24/08/2010
23:36

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

OK I agree, that as I read till the end your post I forgot how you start the mail. So I forgot that you are beginner in jqGrid. Moreover it was 3:00 at night.

If your server really produce the JSON data like you wrote before you should change declaration of jsonReader to

jsonReader: { repeatitems: false }

and change declaration of ID column to

{ name: 'ID', key: true, width: 60, align: 'center', hidden: false }

(include key: true and replace center to 'center'). Usage center instead of 'center' is the main error in your last example. It follows to syntax error in your code and nothing were displayed.

If the JSON data are do inside of the {d:{…}} then jsonReader should be

jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" }

Moreover you should verify, that you loaded json2.js and include in your project from http://www.json.org/js.html to be able to use JSON.stringify. I hope after this changes you code will work.

After the example will work you should implement the data paging and data sorting on the server side. The prototype of you WebMethod should be like

public JqGridData GetProvinces (int page, int rows, string sidx, string sord)

where JqGridData represent the data (you have one class alteady which is OK). Based on the value of page and rows. The page is the requested page number (1 based) and the rows is the number of rows per page. If user click on the next page button or switched from 10 to 20 rows per page the jqGrid will send a new request to web service to fill grid with new data.

If you want that client part (jqGrid) makes data sorting and paging include loadonce: true in your grid definition.

I recomended you to use simple serializeGridData and ajaxGridOptions and jsonReader instead of the usage of datatype as function because it allow jqGrid work exactly like it is designed. We maks only small correction how the data will be encrypted if there will be send to the server and how will be decoded the servers respond.

If you do want follow the way with datatype as function look at http://stackoverflow.com/quest.....arching-an.

Regards
Oleg

25/08/2010
05:19

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

Hello,

> OK I agree, that as I read till the end your post I forgot how you start the mail.

> So I forgot that you are beginner in jqGrid. Moreover it was 3:00 at night.

Ok. No problem for me. Wink

> If your server really produce the JSON data like you wrote before you should

> change declaration of jsonReader to

> jsonReader: { repeatitems: false }

Ok. Done.

The data is exactly as posted in the first message. I have copied the data from

the Chrome window after having called directly the webservice.

> and change declaration of ID column to

> { name: 'ID', key: true, width: 60, align: 'center', hidden: false }

> (include key: true and replace center to 'center'). Usage center instead

> of 'center' is the main error in your last example. It follows to syntax error

> in your code and nothing were displayed.

Ok. Done.

> If the JSON data are do inside of the {d:{…}} then jsonReader should be

> jsonReader: { repeatitems: false, root: "d.rows", page: "d.page",

> total: "d.total", records: "d.records" }

No. The data has no {d:{…}}

> Moreover you should verify, that you loaded json2.js and include in your project

> from http://www.json.org/js.html to be able to use JSON.stringify. I hope after

> this changes you code will work.

I have followed your advice until this and here I have realized that I was not including

this script. I have done a test before including the script and after including it. The result

is exactly the same. The web service get called, the grid is visible on the page but with

no data!!! Cry

> I recomended you to use simple serializeGridData and ajaxGridOptions and jsonReader

> instead of the usage of datatype as function because it allow jqGrid work exactly like it

> is designed. We maks only small correction how the data will be encrypted if there will

> be send to the server and how will be decoded the servers respond.

I have no problem on using jqGrid this way. I started downloading a sample and that

sample was using datatype as function. Let's go on this way, it's ok.

Regards

verorange

Note: this is the ciient script adjusted with your advices

$(function() {

$("#contactsList").jqGrid({

url: '<%= ResolveClientUrl("~/ws/RubricaWS.asmx/GetProvinces") %>',

datatype: "json",

mtype: 'POST',

ajaxGridOptions: {

contentType: 'application/json; charset=utf-8'

serializeGridData: function(postData) {

return JSON.stringify(postData);

jsonReader: { repeatitems: false },

height: 230,

colNames: ['Id', 'Sigla', 'Nome', 'Regione'],

colModel: [

{ name: 'ID', key: true, width: 60, align: 'center', hidden: false },

{ name: 'Sigla', width: 80, sortable: false, hidden: false },

{ name: 'Name', width: 180, sortable: false, hidden: false },

{ name: 'Region', width: 180, sortable: false, hidden: false }

imgpath: '<%= ResolveClientUrl("~/media/css/redmond/images") %>',

rowNum: 25,

rowList: [25, 50, 100],

pager: '#gridpager',

viewrecords: true,

gridview: true,

rownumbers: true,

caption: "Lista province"

}).jqGrid('navGrid', '#gridpager', { edit: true, add: true, del: false, search: true });

});

</script>

25/08/2010
09:48

admin

Admin

Members

Forum Posts: 66

Member Since:
05/05/2007

Offline

Verorange, Oleg

Thanks.

Kind Regards

25/08/2010
13:46

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

I am sure, that your problem is on the server side. If I save the JSON data which you posted to a file verorange.txt, change mtype: "POST" to mtype: "GET" one can test the grid without any active server components. How you can see here http://www.ok-soft-gmbh.com/jq.....orange.htm the jqGrid works.

The url "/ws/RubricaWS.asmx/GetProvinces" look like you use ASMX web service on the server side. I don't know any method how you can remove {"d":{...}} from the JSON data returned from the service. If the data do have {"d":{...}} you should another version of the jsonReader (see my previous answer) and you'll receive the same results: http://www.ok-soft-gmbh.com/jq.....range1.htm

So verify one more time your server code or post the code of the web service here (which returns a test data without any access to the databese).

Regards
Oleg

25/08/2010
15:19

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

This is very strange. Surprised

I have tried to change the mtype and the url properties and everything works as expected.

I have also tried to use a different version of the jsonReader as your example suggest but it

does'nt work as well.

I think that you're right with the server side suspect. Let's see how it's made…

This is the RubricaWS.asmx source

<%@ WebService Language="C#" CodeBehind="RubricaWS.cs" Class="RubricaWS" %>

and this is the CodeBehind class (please note that it is not made for paging server side but

this is just a sample with the hope to adjust it later)

using System;

using System.Collections;

using System.Collections.Generic;

using System.Web;

using System.Web.Services;

using System.Web.Script.Services;

using Newtonsoft.Json;

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[ScriptService]

public class RubricaWS : System.Web.Services.WebService

{

[WebMethod]

[ScriptMethod]

public string GetProvinces() {

List<jqGridRecord> list = buildSampleData();

PagedList pl = new PagedList(list, list.Count, 1, 25);

return JsonConvert.SerializeObject(pl);

}

private List<jqGridRecord> buildSampleData() {

List<jqGridRecord> list = new List<jqGridRecord>();

for (int i = 0; i < 120; i++) {

jqGridRecord jq = new jqGridRecord() {

ID = i, Sigla = "Sigla" + i, Name = "Name" + i, Region = "Regione" + i

};

list.Add(jq);

}

return list;

}

class jqGridRecord

{

public int ID { get; set; }

public string Sigla { get; set; }

public string Name { get; set; }

public string Region { get; set; }

}

PagedList is an utility class that helps to format the data on the jqGrid format. This class was

present in the download sample where I started at the beginning.

using System;

using System.Collections;

using Newtonsoft.Json;

public class PagedList

{

IEnumerable _rows;

int _totalRecords;

int _pageIndex;

int _pageSize;

object _userData;

public PagedList(IEnumerable rows, int totalRecords, int pageIndex,

int pageSize, object userData) {

_rows = rows;

_totalRecords = totalRecords;

_pageIndex = pageIndex;

_pageSize = pageSize;

_userData = userData;

}

public PagedList(IEnumerable rows, int totalRecords, int pageIndex, int pageSize)

: this(rows, totalRecords, pageIndex, pageSize, null) {

}

public int total {

get { return (int)Math.Ceiling((decimal)_totalRecords / (decimal)_pageSize); }

}

public int page { get { return _pageIndex; } }

public int records { get { return _totalRecords; } }

public IEnumerable rows { get { return _rows; } }

public object userData { get { return _userData; } }

public override string ToString() {

return JsonConvert.SerializeObject(this);

}

Thanks again for the help you're giving!

verorange

25/08/2010
16:27

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

OK. Now I understand where you have the problem. You use Newtonsoft.Json to serialize the data, but your web service don't know this and try to serialize the data one more time. So you have probably twice serialized string. If the oririnal string was My string. JSON seirialized string will be "My string". If the original string was "MyString" then serialized version will have escaped quotas: "MyString". So after deserialization of a string you have allways the type string in Javascript instead of an object.

If you will just use standard Microsoft serialization you need only include

[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]

before the web method GetProvinces and return just an instance of the class JqGridData. Web service will serialize the data yourself, but include all data inside the property "d": {d:{..}}.

I uploaded a working test program which full simulate your first data under http://www.ok-soft-gmbh.com/jqGrid/WebServicesPostToJqGrid.zip.

If you do need to use a custon JSON serialization like Newtonsoft.Json I should better use WCF instead of ASMX. The code is exactly so simple like ASMX, but you have much more flefibility. If your WCF web method return Stream or Message type, than you can return any type of data: any custom serialized JSON data, JPEG and so on. You can also stream the data if needed.

See http://msdn.microsoft.com/en-us/library/ms789010.aspx, http://stackoverflow.com/questions/3078397/returning-raw-json-string-in-wcf/3079326#3079326 and http://stackoverflow.com/questions/3118504/how-to-set-json-net-as-the-default-serializer-for-wcf-rest-service/3131413#3131413 for more information.

Regards
Oleg

25/08/2010
21:03

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

Finally we got through!!!! Laugh

Now everything works fine and very very good!!!!

One more question Oleg: what if I have an entity with 10 fields but I want to show only a subset of them inside the jqGrid?

Do I have to code a wrapper class or can I configure jqGrid to show/hide the fields that I dont need?

Thanks again for the help you have given to me.

Regards

verorange

25/08/2010
21:36

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

In general the less data you send over the wire the better. So instead of array of strings like

{"ID":1,"Sigla":"AG","Name":"Agrigento","Region":"Sicilia"}

which are elements of rows array and every row represent an object jqGridRecord. It can be better

[1,"AG","Agrigento","Sicilia"]

as representation of List<string> or string[]. Then you can use more simple jsonReader (without repeatitems: false). It seems to me you can easy implement such data representation. A discussion about this and the coresponding example you can find here

http://stackoverflow.com/questions/3054463/jqgrid-3-7-does-not-show-rows-in-internet-explorer/3061669#3061669

Best regards
Oleg

25/08/2010
21:58

verorange

Member

Members

Forum Posts: 7

Member Since:
23/08/2010

Offline

Ok for this!

But the meaning of my question was different. Suppose that I dont want to show the field ID and the field Region in the grid.

Do I have to code a wrapper class that dont send those fiedls or I can modify the config to not show them?

25/08/2010
23:14

OlegK

Germany

Member

Members

Forum Posts: 1255

Member Since:
10/08/2009

Offline

OK I clear in other words.

Every row of data should has unique ID. Either you can has a hidden row or declare the name of the ordinal number of id field. Then the id will be saved separately. Id is the only field which you have to send from the server together with the data which you really need to display.
You reseive the best results if you NOT send any unneeded data from the server. I see no sense to send data which will be hold in the didden columns, but not used.
If the data which you send will hve no properties (like "ID","Sigla","Name","Region"), but be an universal data type List<string> then you don't need any wrapper classes. You PagedList class can has List<string> rows property instead of IEnumerable rows.

So you can convert data entity directly in the instance of the PagedList classes. Sometimes usage of anonymous data types can be helpful.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
61 Guest(s)

Currently Browsing this Page:
1 Guest(s)