jQWidgets Forums

jQuery UI Widgets Forums Grid Help needed to display data in jqxGrid

This topic contains 6 replies, has 2 voices, and was last updated by  Chuck.Noland.Jr 12 years, 4 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • Help needed to display data in jqxGrid #13196

    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 }
    ]
    });
    });

    Help needed to display data in jqxGrid #13205

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Help needed to display data in jqxGrid #13605

    Thank you for the suggestion Peter.

    In reference to:
    http://www.jqwidgets.com/jquery-widgets-documentation/documentation/asp.net-integration/asp.net-grid-paging.htm

    I 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″}…]

    Help needed to display data in jqxGrid #13611

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Help needed to display data in jqxGrid #13649

    Thanks 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

    Help needed to display data in jqxGrid #13662

    Peter Stoev
    Keymaster

    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 Stoev

    jQWidgets Team
    http://www.jqwidgets.com

    Help needed to display data in jqxGrid #13672

    Thanks 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
    Chuck

    Example 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);
    }
    }
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.