jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Help needed to display data in jqxGrid
Tagged: asp.net datagrid control
This topic contains 6 replies, has 2 voices, and was last updated by Chuck.Noland.Jr 12 years, 4 months ago.
-
Author
-
Hi guys
Over the last month I’ve been learning jquery/jqwidgets using the sample code available on the site. I’ve managed to get various examples up and running but I am now having difficulty with the following attempt. I am using ASP.NET C# and I do not wish to create a WebService.
The aim: A read-only grid with paging and single-column sorting enabled. The data will be retreived from code behind and returned as JSON (tested and working in other basic examples). In this example, I am simply returning three rows. I have found I can use a WebMethod in code-behind that will also allow additional parameters to be set (which I may use for filtering the dataset at a later point).
Everything appears to work – both webmethods fire, the additional parameters are passed and results appear to return – but no data appears on the page. The resulting page shows a blank grid with two columns and three rows. Any ideas? Is it something to do with virtual mode and the data is not being rendered to the grid?
using System;
using System.Linq;
using System.Web.Script.Serialization;
using System.Web.Script.Services;
using System.Web.Services;
using Mita.DAL;namespace VinEx_JQWidgets.Examples
{
public partial class jqxGrid_ServerSide_FilteringPaging_Working : System.Web.UI.Page
{
[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static string GetData(int pagenum, int pagesize, int testint, string teststring)
{
string result = "[{\"Surname\":\"Schumacher\",\"FirstNames\":\"Michael\"},{\"Surname\":\"Barrichello\",\"FirstNames\":\"Rubens\"},{\"Surname\":\"Alesi\",\"FirstNames\":\"Jean\"}]";
return result;
}[WebMethod]
[ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)]
public static int GetTotalRowsCount()
{
return 3;
}
}
}
—–
$(document).ready(function () {
source = {
datatype: "json",
datafields: [
{ name: 'Surname' },
{ name: 'FirstNames' }
],
async: false,
formatdata: function (data) {
return { pagenum: data.pagenum, pagesize: data.pagesize, testint: 123, teststring: "'Hello World!'" }
},
url: 'jqxGrid_ServerSide_FilteringPaging_Working.aspx/GetData'
};
$.ajax({
url: 'jqxGrid_ServerSide_FilteringPaging_Working.aspx/GetTotalRowsCount',
contentType: 'application/json; charset=utf-8',
async: false,
success: function (data) {
alert(source.totalrecords);
}
});
var dataAdapter = new $.jqx.dataAdapter(source,
{ contentType: 'application/json; charset=utf-8' }
);
$("#jqxgrid").jqxGrid({
source: dataAdapter,
theme: 'energyblue',
pageable: true,
autoheight: true,
virtualmode: true,
rendergridrows: function () {
return dataAdapter.records;
},
columns: [
{ text: 'Surname', dataField: 'Surname', width: 250 },
{ text: 'FirstNames', dataField: 'FirstNames', width: 250 }
]
});
});Hi Chuck.Noland.Jr,
From the provided code, we cannot tell whether there is something wrong in your implementation. I suggest you to take a look at the updated ASP .NET help topics and how the server filtering is implemented there.
Best regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThank you for the suggestion Peter.
In reference to:
http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-paging.htmI downloaded the example project files and successfully managed to run the code, calling the method and returning XML to the grid. It populates and runs perfectly.
But, like my previous post, as soon as I have it return JSON to the grid, the grid does not display results. What do I need to change on your example page above (both markup and code behind) to have it successfully run using JSON?
This is what I’ve tried (sorry if the formatting comes out bad):
MARKUP
source = { datatype: "json", // changed from "xml" datafields: [ { name: 'CompanyName' }, { name: 'ContactName' }, { name: 'ContactTitle' }, { name: 'City' }, { name: 'Country' }, { name: 'Address' } ], formatdata: function (data) { return { pagenum: data.pagenum, pagesize: data.pagesize } }, record: 'Table', // removed this line url: 'Default.aspx/GetCustomers' };
CODEBEHIND (now using a datatable instead of dataset)
[WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public static string GetCustomers(int pagenum, int pagesize) { string query = "SELECT * FROM ( " + " SELECT *, ROW_NUMBER() OVER (ORDER BY CustomerID) as row FROM Customers " + " ) a WHERE row > " + pagenum * pagesize + " and row <= " + (pagenum + 1) * pagesize; SqlCommand cmd = new SqlCommand(query); // Populate the DataSet. DataTable records = GetData(cmd); if (records != null) { // convert object to json string string result = GetJSONString(records); return result; } else { // return empty string return String.Empty; } }
JSON STRING RETURNED
[{“CustomerID”:”ALFKI”,”CompanyName”:”Alfreds Futterkiste”,”ContactName”:”Maria Anders”,”ContactTitle”:”Sales Representative”,”Address”:”Obere Str. 57″,”City”:”Berlin”,”Region”:””,”PostalCode”:”12209″,”Country”:”Germany”,”Phone”:”030-0074321″,”Fax”:”030-0076545″,”row”:”1″},{“CustomerID”:”ANATR”,”CompanyName”:”Ana Trujillo Emparedados y helados”,”ContactName”:”Ana Trujillo”,”ContactTitle”:”Owner”,”Address”:”Avda. de la Constitución 2222″,”City”:”México D.F.”,”Region”:””,”PostalCode”:”05021″,”Country”:”Mexico”,”Phone”:”(5) 555-4729″,”Fax”:”(5) 555-3745″,”row”:”2″}…]Hi Chuck.Noland.Jr,
In the provided JSON, the ‘record’ is not ‘Table’ so I suppose you should not set the ‘record’ field to ‘Table’.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter – sorry I have already removed that line (I put a comment next to that line in the code above).
Theres no difference with or without the record specified, so the issue lies elsewhere. Any further ideas?
Cheers
Hi Chuck.Noland.Jr,
With JSON data source, please take a look at this sample: asp.net-grid-paging-sorting-filtering.htm. The sample implements server paging, sorting and filtering.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comThanks Peter, I just happened to resolve the issue before I saw your reply. I remembered spotting JavaScriptSerializer.DeserializeObject() in a few of your JSON examples. It appears I was returning JSON as a string – it looks like I have better luck returning it as an object. I can now see the data appearing on the grid.
So where I had:
return new JavaScriptSerializer().Serialize(records.Select(x => new { x.LastName, x.FirstName }));I should have had:
string json = new JavaScriptSerializer().Serialize(records.Select(x => new { x.LastName, x.FirstName }));
return new JavaScriptSerializer().DeserializeObject(json);Thank you for your time and suggestions.
Cheers
ChuckExample method below for others (does not have to be a webservice, method can sit in code behind):
public partial class jqxGrid_ServerSide_FilteringPaging_Working : System.Web.UI.Page { [WebMethod] [ScriptMethod(UseHttpGet = true, ResponseFormat = ResponseFormat.Json)] public static object GetData(int pagenum, int pagesize, int testint, string teststring) { string result = "[{\"Surname\":\"Schumacher\",\"FirstNames\":\"Michael\"},{\"Surname\":\"Barrichello\",\"FirstNames\":\"Rubens\"},{\"Surname\":\"Alesi\",\"FirstNames\":\"Jean\"}]"; return new JavaScriptSerializer().DeserializeObject(result); } }
-
AuthorPosts
You must be logged in to reply to this topic.