jQWidgets Forums

This topic contains 8 replies, has 2 voices, and was last updated by ravireddy 12 years, 9 months ago.

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

Author

How to read the json data hierarchically (deeper level) and bind the value to column in JqxGrid Posts

June 21, 2012 at 3:31 pm How to read the json data hierarchically (deeper level) and bind the value to column in JqxGrid #5201

ravireddy

Member

Hi,

Is there any simple example to read json data hierarchy and display in the grid.

For Json example: {“empName”: “test”, “age”: “67”, “department”:”{“id”:”1234″ , “name”:”Sales”}”, “author”:”ravi”}

How i can read the data like “department.name” and bind to the column in the Grid using jqxGrid. Can any give good example.

June 21, 2012 at 4:59 pm How to read the json data hierarchically (deeper level) and bind the value to column in JqxGrid #5211

Peter Stoev

Keymaster

Hi ravireddy,

Loading of nested values from json hierarchy is still not implemented.

As a workaround you can use this:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON string.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.7.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdata.js"></script> 
    <script type="text/javascript" src="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getTheme();
            var data = [{ "empName": "test", "age": "67", "department": "{'id':'1234', 'name':'Sales'}", "author": "ravi"}];
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'empName' },
                    { name: 'age' },
                    { name: 'id', map: 'department' },
                    { name: 'name', map: 'department' },
                    { name: 'author' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            var renderer = function (row, column, value) {
                var index = value.indexOf(column);
                var valueToDisplay = "";
                for (var p = index + column.length + 3; p < value.length; p++) {
                    var char = value.substring(p, p + 1);
                    if (char == "'") break;
                    valueToDisplay += char;
                }
                return '<span style="margin: 4px; float: left;">' + valueToDisplay + '</span>';
            }
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                    { text: 'Employee Name', datafield: 'empName', width: 250 },
                    { text: 'Age', datafield: 'age', width: 150 },
                    { text: 'Id', datafield: 'id', width: 180, cellsrenderer: renderer },
                    { text: 'Name', datafield: 'name', width: 120, cellsrenderer: renderer },
                    { text: 'Author', datafield: 'author', width: 120 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

June 21, 2012 at 8:54 pm How to read the json data hierarchically (deeper level) and bind the value to column in JqxGrid #5216

ravireddy

Member

HI Peter,

Thanks for the quick response, But i have a concern about work around solution.

I have requirement where i’m getting JSON response from service which have 15 level deep and i need to display data using JQx widgets.

If i do work around solution i will be end up N number of looping logic in JQuery script.

We like your components widgets but i have following questions

When you guys are planning to implement to load of nested values from json hierarchy ?
How quick this version of libraries going to be available ?

Because we need to make deceision which JQuery component libraries we need to use which lead for buying license.

Please let me know the answers for above posted questions.

Regards,
Ravi

June 22, 2012 at 12:15 pm How to read the json data hierarchically (deeper level) and bind the value to column in JqxGrid #5237

Peter Stoev

Keymaster

Hi Ravi,

We’ll implement JSON mapping in the next version which will be available in the second half of July. In the new version, you will be able to load the Grid from hierarchical JSON, by using such syntax:

<!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.2.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.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/jqxdata.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = '';
            var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}];
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'empName' },
                    { name: 'age' },
                    { name: 'id', map: 'department>id' },
                    { name: 'name', map: 'department>name' },
                    { name: 'author' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                    { text: 'Employee Name', datafield: 'empName', width: 250 },
                    { text: 'Age', datafield: 'age', width: 150 },
                    { text: 'Id', datafield: 'id', width: 180 },
                    { text: 'Name', datafield: 'name', width: 120 },
                    { text: 'Author', datafield: 'author', width: 120 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid"></div>
    </div>
</body>
</html>