jQWidgets Forums

Tagged: binding to json, datagrid, jquery grid, jquery gridview, jqxgrid

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

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

Author

Issue with decoding the grid content of json type Posts

September 5, 2012 at 2:19 pm Issue with decoding the grid content of json type #7456

Ranchs

Member

Hi,

Please suggest me on the way how to decode the data passed to the grid.

As the existing that comes from the server to the client as json is of the below format:

[
{“state”:”PREL”,
“id”:”3999″,
“Reference to other Requirements”:””,
“revision”:”PA2″,
“Composer”:”soap”,
“Applies to System”:”OMPR”,
“modified”:”2012-9-5+15%3A54%3A50+MEST”,”originated”:”2012-9-5+15%3A54%3A48+MEST”,
“owner”:”DRIPS10+X”,”Req Source”:””},

{“state”:”PREL”,
“id”:”4000″,
“Reference to other Requirements”:””,
“revision”:”PA1″,
“Composer”:”rux”,
“Applies to System”:”OSWP”,
“modified”:”2012-9-5+15%3A54%3A50+MEST”,”originated”:”2012-9-5+15%3A54%3A48+MEST”,
“owner”:”DRIPS11+X”,”Req Source”:””}
]

and the same is displayed in the grid as row data.The problem as you see is few fields are shown with ‘+’ and ‘%’ symbols which are the encoded data from the server.

As it reachs the client side with the eval() function used and then given the data to grid as OR with decodeURIComponent(eval()) doesn’t solve the problem.

Below is the data passed to the grid:

var detReqsGridData = data ; // here data is of json , as shown above.
var detReqSource =
{
localdata: detReqsGridData,
datatype: “json”
};

var reqDataAdapter = new $.jqx.dataAdapter(detReqSource);

and the Data rendered in the grid is with the special characters .

Kindly help me on how to fix this problem of decoding.

Regards
Ranchs

September 5, 2012 at 7:26 pm Issue with decoding the grid content of json type #7467

Peter Stoev

Keymaster

Hi Ranchs,

I think you missed to add the datafields array to the source object. I suggest you to take a look at our bindingtojson.htm sample.

<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This example shows how to create a Grid from JSON data.</title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.8.0.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 url = "../sampledata/beverages.txt";
            // prepare the data
            var source =
            {
                datatype: "json",
                datafields: [
                    { name: 'name' },
                    { name: 'type' },
                    { name: 'calories', type: 'int' },
                    { name: 'totalfat' },
                    { name: 'protein' },
                ],
                id: 'id',
                url: url
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                columns: [
                  { text: 'Name', datafield: 'name', width: 250 },
                  { text: 'Beverage Type', datafield: 'type', width: 250 },
                  { text: 'Calories', datafield: 'calories', width: 180 },
                  { text: 'Total Fat', datafield: 'totalfat', width: 120 },
                  { text: 'Protein', datafield: 'protein', minwidth: 120 }
              ]
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
        <div id="jqxgrid"></div>
    </div>
</body>
</html>

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 6, 2012 at 5:25 am Issue with decoding the grid content of json type #7474

Ranchs

Member

Hi Peter,

Thanks for you reply.

But as you see the problem is i have the piece of code what you have mentioned as below:

// Here data of type json is assigned
var data= eval(‘(‘ + ” + ‘)’); // With this code grid has the special characters.

Here as above i used the combination with eval and decodeURIComponet(eval()) with the json string , it gives me a blank page and the jquery 1.7.2min.js file gives up an error at line 2 , Which i could’nt figure out.

$(“#jqxgridDet”).jqxGrid(
{
width: ‘99%’,
source: reqDataAdapter,
editable: true,
pageable: true,
editmode: ‘dblclick’,
autoheight: true,
columnsresize: true,
altrows:true,
filterable: true,
sortable: true,
selectionmode: ‘singlecell’,
columns: [
{ text: ‘name’, datafield: ‘name’, columntype: ‘textbox’, width: 100, pinned: true, editable: false }
]
});

// Here columns are assigned to the grid as they are dynamic in count.
$(“#jqxgridDet”).jqxGrid({ columns: reqGridColumns });

Untill here everything work fine with the special characters.

Please let me know if there is a way out on decoding the column values while assigning to the grid , or as a whole on the json string.

Thanks and Regards
Ranchs

September 6, 2012 at 6:02 am Issue with decoding the grid content of json type #7476

Peter Stoev

Keymaster

Hi Ranchs,

My opinion is that you have two options:

1. Modify your server side code so that it returns correct JSON. If you use PHP, make sure that you echo your data using the json_encode function.
2. The second option is to parse the returned data on the client side before assigning it to the jqxGrid widget.

Here’s a working sample with your data source:


<!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.8.0.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 = getTheme();
            var data = [
                { "state": "PREL",
                    "id": "3999",
                    "Reference to other Requirements": "",
                    "revision": "PA2",
                    "Composer": "soap",
                    "Applies to System": "OMPR",
                    "modified": "2012-9-5+15%3A54%3A50+MEST", 
                    "originated": "2012-9-5+15%3A54%3A48+MEST",
                    "owner": "DRIPS10+X", "Req Source": ""
                },
                { "state": "PREL",
                    "id": "4000",
                    "Reference to other Requirements": "",
                    "revision": "PA1",
                    "Composer": "rux",
                    "Applies to System": "OSWP",
                    "modified": "2012-9-5+15%3A54%3A50+MEST", 
                    "originated": "2012-9-5+15%3A54%3A48+MEST",
                    "owner": "DRIPS11+X", "Req Source": ""
                }
                ];
            var source =
            {
                localdata: data,
                datafields: [
                    {name: "state"},
                    {name: "id"},
                    {name: "Reference to other Requirements"},
                    {name: "revision"},
                    {name: "Composer"},
                    {name: "Applies to System"},
                    { name: "modified" },
                    { name: "originated"},
                    {name: "owner"}
                ],
                datatype: "json"
            };
            var dataAdapter = new $.jqx.dataAdapter(source);
            $("#jqxgrid").jqxGrid(
            {
                width: 670,
                source: dataAdapter,
                theme: theme,
                columnsresize: true,
                selectionMode: 'singlecell',
                columns: [
                  { text: 'state', datafield: 'state', width: 100 },
                  { text: 'id', datafield: 'id', width: 100 },
                  { text: 'Reference to other Requirements', datafield: 'Reference to other Requirements', width: 180, cellsalign: 'right' },
                  { text: 'Composer', datafield: 'Composer', width: 90, cellsalign: 'right', cellsformat: 'c2' },
                  { text: 'Applies to System', datafield: 'Applies to System', cellsalign: 'right', minwidth: 100, cellsformat: 'c2' },
                  { text: 'modified', datafield: 'modified', width: 180 },
                  { text: 'originated', datafield: 'originated', width: 180 },
                  { text: 'owner', datafield: 'owner', width: 180 }
                  ]               
            });
        });
    </script>
</head>
<body class='default'>
    <div id='jqxWidget'>
        <div id="jqxgrid">
        </div>
    </div>
</body>
</html>

The sample displays the JSON received from the server.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

September 6, 2012 at 9:53 am Issue with decoding the grid content of json type #7480

Ranchs

Member

Hi Peter,

Infact i have tried the json data to be parsed by 2 steps, as below:

Step:1
var reqJsonObj = eval(‘(‘ + ” + ‘)’);
var parseData = $.jQuery.parseJSON(reqJsonObj );

Step2:
var parseData = $.jQuery.parseJSON(”);

With either of these steps followed i get the returned data as null as i am using java and javascript only.

Kindly help me out if i am doing something wrong.

Thanks very much.
Ranchs

Author

Posts

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

You must be logged in to reply to this topic.