jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Binding JSON data to jqxGrid
Tagged: jquery grid binding to json
This topic contains 18 replies, has 3 voices, and was last updated by oneeyeman 11 years, 4 months ago.
-
Author
-
Peter,
First of all, thank you for the help.
Now, what I have here is Windows XP SP3 with IE8 and the following code running from the jqxGrid demo folder does not produce a grid. All I see is the horizontal grey line at the top of the browser.
Is this package compatible with this browser? Please confirm.Thank you.
The code:
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="../../scripts/jquery-1.10.2.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/jqxdatatable.js"></script> <script type="text/javascript" src="../../jqxgrid.columnsresize.js"></script> <script type="text/javascript"> $(document).ready(function(){ var data = "[{"pk": 1, "model": "displayusbdata.usb", "fields": {"vid": "#1058", "pid": "#0748", "evidence": 5, "vol_serial5": "-", "vol_serial4": "-", "vol_serial1": " ", "vol_serial3": "-", "vol_serial2": "-", "port": 3, "last_modify_regtime3": null, "vol_name5": "-", "disk_device": null, "revision": "#1019", "product": "ses_device", "vendor": "wd", "last_modify_regtime5": null, "hub": 4, "last_modify_regtimes1": null, "last_modify_regtimes2": null, "volume": "", "user": "", "vid_pid": null, "vol_name1": "", "vol_name2": "-", "vol_name3": "-", "vol_name4": "-", "usb_type": "other", "volume_device": null, "last_modify_regtime4": null, "device_name": "wd ses_device", "instance_id": "57583431453732444a323437&1", "install": null, "volume_name": "", "volume_guid": "", "user_datetime": null}}]"; var source = { localdata: data, datatype: "json", datafields: [ { name: 'device_name', map: 'fields>device_name', type: 'string' }, { name: 'vid_pid', map: 'fields>vid_pid', type: 'date' }, { name: 'install', map: 'fields>install', type: 'date' }, { name: 'disk_device', map: 'fields>disk_device', type: 'date' }, { name: 'volume_device', map: 'fields>volume_device', type: 'date' }, { name: 'usb_type', map: 'fields>usb_type', type: 'string' }, { name: 'vid', map: 'fields>vid', type: 'string' }, { name: 'pid', map: 'fields>pid', type: 'string' }, { name: 'hub', map: 'fields>hub', type: 'number' } ], id: 'pk' }; var dataAdapter = new $.jqx.dataAdapter(source); //initialize jqxGrid $("#grid").jqxGrid( { source: dataAdapter, showstatusbar: true, editable: false, columns: [ { text: 'Device Name', columntype: 'textbox', datafield: 'device_name', width: 100 }, { text: 'VID/PID', columntype: 'textbox', datafield: 'vid_pid', width: 50 }, { text: 'Install', columntype: 'textbox', datafield: 'install', width: 50 }, { text: 'Disk Device', columntype: 'textbox', datafield: 'disk_device', width: 50 }, { text: 'Volume Device', columntype: 'textbox', datafield: 'volume_device', width: 50 }, { text: 'Type', columntype: 'textbox', datafield: 'usb_type', width: 100 }, { text: 'VID', columntype: 'textbox', datafield: 'vid', width: 100 }, { text: 'PID', columntype: 'textbox', datafield: 'pid', width: 100 }, { text: 'Hub', datafield: 'hub', cellsalign: 'right', cellsformat: 'n2' } ] }); }); </script> </head> <body> <div id='jqxWidget'> <div id="grid"></div> </div> </body> </html>Hi oneeyeman,
Yes, it is compatible with the browser. Check your code for syntax errors.
The first I see is:
var data = “[{“pk”: 1, “model”: “displayusbdata.usb”, “fields”: {“vid”: “#1058”, “pid”: “#0748”, “evidence”: 5, “vol_serial5”: “-“, “vol_serial4”: “-“, “vol_serial1″: ” “, “vol_serial3”: “-“, “vol_serial2”: “-“, “port”: 3, “last_modify_regtime3”: null, “vol_name5”: “-“, “disk_device”: null, “revision”: “#1019”, “product”: “ses_device”, “vendor”: “wd”, “last_modify_regtime5”: null, “hub”: 4, “last_modify_regtimes1”: null, “last_modify_regtimes2”: null, “volume”: “”, “user”: “”, “vid_pid”: null, “vol_name1”: “”, “vol_name2”: “-“, “vol_name3”: “-“, “vol_name4”: “-“, “usb_type”: “other”, “volume_device”: null, “last_modify_regtime4”: null, “device_name”: “wd ses_device”, “instance_id”: “57583431453732444a323437&1”, “install”: null, “volume_name”: “”, “volume_guid”: “”, “user_datetime”: null}}]”;If you define the data as String, the correct way is: var data = '[{"pk": 1, "model": "displayusbdata.usb", "fields": {"vid": "#1058", "pid": "#0748", "evidence": 5, "vol_serial5": "-", "vol_serial4": "-", "vol_serial1": " ", "vol_serial3": "-", "vol_serial2": "-", "port": 3, "last_modify_regtime3": null, "vol_name5": "-", "disk_device": null, "revision": "#1019", "product": "ses_device", "vendor": "wd", "last_modify_regtime5": null, "hub": 4, "last_modify_regtimes1": null, "last_modify_regtimes2": null, "volume": "", "user": "", "vid_pid": null, "vol_name1": "", "vol_name2": "-", "vol_name3": "-", "vol_name4": "-", "usb_type": "other", "volume_device": null, "last_modify_regtime4": null, "device_name": "wd ses_device", "instance_id": "57583431453732444a323437&1", "install": null, "volume_name": "", "volume_guid": "", "user_datetime": null}}]';Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comOK, I changed double quotes to single quotes.
No luck. I still see the horizontal grey line on top and nothing else.Thank you.
Hi, Peter,
I made it work. Thank you for the help.
I fixed some problems on the Django side and it was enough to send the data appropriately.Now everything works.
A huge thank you.
-
AuthorPosts
You must be logged in to reply to this topic.