jQuery UI Widgets Forums Grid jqxGrid with Json Key Value Pair binding

This topic contains 3 replies, has 3 voices, and was last updated by  Akshatha Raju 10 years, 9 months ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author

  • nairb

    I am trying to bind the jqxGrid with key value pair json string as follow,

    {“products”:[[{“Key”:”PNum”,”Value”:”1001″},{“Key”:”Description”,”Value”:” Product1″}],[{“Key”:”PNum”,”Value”:”1002″},{“Key”:”Description”,”Value”:” Product2″}]]}

    The grid binding must be as shown below

    PNum Description
    ——- ————–
    1001    Product1
    1002    Product2

    Please note, the columns PNum, Description are auto generated from the database,
    hence there can be more key value pairs in a row.  for example

    {“products”:[[{“Key”:”PNum”,”Value”:”1001″},{“Key”:”Description”,”Value”:” Product1″},{“Key”:”Stock”,”Value”:”10″}],[{“Key”:”PNum”,”Value”:”1002″},{“Key”:”Description”,”Value”:” Product2″},{“Key”:”Stock”,”Value”:”20″}]]}

    The output should be

    PNum Description  Stock
    ——- ————–  ——-
    1001    Product1       10
    1002    Product2      20

    I can however use the following Json format to achieve,
    {“Products”:[{“PNum”:”1001″,”Description”:”Product1″, “Stock”: “10”}, {“PNum”:”1002″,”Description”:”Product2″, “Stock”: “20”}]}

    but I am forced to use the Json String mentioned earlier.

    If anybody has a solution for this, please help. Thanks in advance.

    Peter Stoev

    Hi nairb,

    If you can achieve the second JSON string, the solution is:

    <!DOCTYPE html>
    <html lang="en">
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxmenu.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.selection.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxgrid.columnsresize.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdropdownlist.js"></script>
    <script type="text/javascript">
    $(document).ready(function () {
    var data = '{"Products":[{"PNum":"1001","Description":"Product1", "Stock": "10"}, {"PNum":"1002","Description":"Product2", "Stock": "20"}]}';
    var source =
    localdata: data,
    datatype: "json",
    root: 'Products'
    var dataAdapter = new $.jqx.dataAdapter(source);
    source: dataAdapter,
    columns: [
    { text: 'First Name', dataField: 'PNum', width: 100 },
    { text: 'Last Name', dataField: 'Description', width: 100 },
    { text: 'Product', dataField: 'Stock'}
    <body class='default'>
    <div id='jqxWidget'>
    <div id="jqxgrid"></div>

    However, for the earlier string, there’s no such built-in parsing and you will need to implement custom parsing to the second string type.

    Best Regards,
    Peter Stoev

    jQWidgets Team


    Hi Peter Stoev,

    Thanks for the clarification.

    I managed to parse it with JavaScript, as follows

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

    for (var j=0;j<data[0].length;j++)
    row[data[i][j].Key] = data[i][j].Value;
    sourceData[i] = row;

    var source =
    localdata: sourceData,
    datatype: "array",
    datafields: [
    { name: 'PNum' },
    { name: 'Description' },
    { name: 'Stock }

    Akshatha Raju


    I am using Nested jqxgrids, and I am referring to your sample code “server_side_grid__with_nested_grids” in phpdemos folder, and trying to implement it  in my spring MVC java code.

    I am able to link into the controller from both the URLs, and on debug I could see the data is being retrieved from the controller, but I am not able to display the data in neither of the grids other than the column names in both the grids,

    And I guess my problem must be in the following lines from “index file” of your sample code, if that is the function used for displaying the data in the grid,

    beforeprocessing: function (data) {
    source.totalrecords = data[0].TotalRows;

    data[] and TotalRows are defined in “data file” of your code,

    but my query is how are they linked/defined in the “index file”??

    please explain, as this may be the reason I am unable to display data in both the grids

    Thanks & Regards,

    Akshatha Raju

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.