jQWidgets Forums

Tagged: grid, javascript grid, jquery grid

This topic contains 11 replies, has 6 voices, and was last updated by Peter Stoev 11 years, 2 months ago.

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

Author

Nested JSON display in JQGrid available in newer version Posts

July 18, 2012 at 2:56 pm Nested JSON display in JQGrid available in newer version #6115

Member

Peter,

I seen new version of JQx Widgets came out, As per earlier discussions regarding the nested json display in JQ Grid,

Is that feature is available in the newer version ?

Regards,
Ravi

July 19, 2012 at 12:00 pm Nested JSON display in JQGrid available in newer version #6141

Peter Stoev

Keymaster

Hi Ravi,

You need to specify the path to the nested fields in the ‘datafields’ array definition.

Example:

<!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>

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 24, 2012 at 12:41 pm Nested JSON display in JQGrid available in newer version #6287

bandana

Member

Hi Peter,

In the nested grid example with XML, you have used 2 xml files to populate nested grid.

How can we do the same with 2 JSON files “employees.json” and “orderdetails.json”?

Is this feature available yet?

Please let me know ASAP.

Regards,
Bandana

July 24, 2012 at 1:22 pm Nested JSON display in JQGrid available in newer version #6288

Peter Stoev

Keymaster

Hi Bandana,

The data source is not important. You can load the Grid and its nested Grids from any of the supported data types. We’ve already implemented an example with nested grids and json data type. You can find it in the phpdemos folder which comes with the product’s download package.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

August 29, 2012 at 12:01 pm Nested JSON display in JQGrid available in newer version #7250

Azimbawee

Member

Hi Peter,

I stuck with the same thing. Do you have an example which uses 2 json files to populate a nested grid?
I’ve looked at the phpdemos, but that is not what I was looking for.

Regards,
Azim

August 29, 2012 at 12:15 pm Nested JSON display in JQGrid available in newer version #7254

Peter Stoev

Keymaster

Hi Azim,

It isn’t possible to build a Grid from 2 files. If that’s your scenario, you will have to merge the 2 files in one JSON string or in 1 file and then load the Grid from it.

Best Wishes,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

July 25, 2013 at 4:47 pm Nested JSON display in JQGrid available in newer version #25740

Gecko

Participant

Peter, I am confused. You say that

It isn’t possible to build a Grid from 2 files. If that’s your scenario, you will have to merge the 2 files in one JSON string or in 1 file and then load the Grid from it.

but isn’t that exactly what your current nested demo does(employees.xml & orderdetails.xml)? (or is this post just older than that ability?)

I ask because I am attempting something similar. A nested grid where the outer grid is populated (json web service call) but the inner grid isn’t populated until the user clicks on the arrow to expand, at that time I make another json web service call (to get the details of that one outer grid row). I would greatly appreciate any assistance you be able to provide (I am a javascript novice).

July 25, 2013 at 8:53 pm Nested JSON display in JQGrid available in newer version #25754

Peter Stoev

Keymaster

Hi Gecko,

– Nested Grid is implemented with multiple Grid instances which you can bind to whatever Data Source you want. It is not necessary the data sources to be related.
– Example with Nested Grids with JSON is available in the download package in the phpdemos folder.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

July 25, 2013 at 10:22 pm Nested JSON display in JQGrid available in newer version #25761

Gecko

Participant

Hey Peter, thanks for the response.

I was unable to find anything about nested in the phpdemos directory of the download package (personal version 2.9.3), could you elaborate where this example of nested grids with JSON is located please.

I am also having difficulties (like the original poster of this thread), correctly mapping my datafields from a json return with an array.
I your example above but what if it had an array, like this:
var data = [{ “empName”: “test”, “age”: “67”, “department”: [{ “id”: “1234”, “name”: “Sales” }], “author”: “ravi”}];

the map seems to no longer work

var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'empName' },
                    { name: 'age' },
                    { name: 'id', map: 'department>id' },
                    { name: 'name', map: 'department>name' },
                    { name: 'author' }
                ],
                localdata: data
            };

Any ideas?
I thought maybe something where I do a jquery for each but haven’t yet been able to figure out how to assign it in the datafields bindings.

var json = [
 {"GROUP_ID":"143",
  "GROUP_TYPE":"2011 Season",
  "EVENTS":[
    {"EVENT_ID":"374","SHORT_DESC":"Wake Forest"},
    {"EVENT_ID":"376","SHORT_DESC":"Yale"},
    {"EVENT_ID":"377","SHORT_DESC":"Michigan State"}]
 }];
$.each(json, function(arrayID,group) {
    $.each(group.EVENTS, function(eventID,eventData) {
            document.write('  '+eventData.SHORT_DESC+'<br />');
     });
});

July 26, 2013 at 10:22 am Nested JSON display in JQGrid available in newer version #25780

Peter Stoev

Keymaster

Hi Gecko,

1. The folder’s name is phpdemos/server_side_grid__with_nested_grids
2. If “department”: { “id”: “1234”, “name”: “Sales” } is defined like that, below is a working demo:

Example #1:


<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = [{ "empName": "test", "age": "67", "department": { "id": "1234", "name": "Sales" }, "author": "ravi"}];
            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: 'empName', dataField: 'empName', width: 100 },
                  { text: 'age', dataField: 'age', width: 100 },
                  { text: 'id', dataField: 'id', width: 100 },
                  { text: 'name', dataField: 'name', width: 100 },
                  { text: 'author', dataField: 'author', width: 100 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

If it is defined as an Array as in your post, then you should change the map to department>0>id

Example #2:

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from Array data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.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="../../scripts/gettheme.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var theme = getDemoTheme();
            var data = [{ "empName": "test", "age": "67", "department": [{ "id": "1234", "name": "Sales" }], "author": "ravi"}];
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'empName' },
                    { name: 'age' },
                    { name: 'id', map: 'department>0>id' },
                    { name: 'name', map: 'department>0>name' },
                    { name: 'author' }
                ],
                localdata: data
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
       
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'empName', dataField: 'empName', width: 100 },
                  { text: 'age', dataField: 'age', width: 100 },
                  { text: 'id', dataField: 'id', width: 100 },
                  { text: 'name', dataField: 'name', width: 100 },
                  { text: 'author', dataField: 'author', width: 100 }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>