jqxGrid with Json Key Value Pair binding - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: javascript grid, jquery grid, jquery table

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

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

Author

jqxGrid with Json Key Value Pair binding Posts
April 13, 2012 at 1:37 pm jqxGrid with Json Key Value Pair binding #3366

nairb
Member

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.

April 13, 2012 at 5:10 pm jqxGrid with Json Key Value Pair binding #3388
Peter Stoev
Keymaster
Hi nairb,

If you can achieve the second JSON string, the solution is:
```
<!DOCTYPE html>
<html lang="en">
<head>
    <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);
            $("#jqxgrid").jqxGrid(
            {
                source: dataAdapter,
                columns: [
                  { text: 'First Name', dataField: 'PNum', width: 100 },
                  { text: 'Last Name', dataField: 'Description', width: 100 },
                  { text: 'Product', dataField: 'Stock'}
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>
```
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
http://www.jqwidgets.com
April 14, 2012 at 6:00 am jqxGrid with Json Key Value Pair binding #3399

nairb
Member

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

July 19, 2013 at 8:33 am jqxGrid with Json Key Value Pair binding #25459

Akshatha Raju
Participant

Hi,

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
Author

Posts

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

You must be logged in to reply to this topic.