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
-
Hi, ALL,
This is continuation from this post.
I decided to try and use JSON for my data.
I successfully converted my data to the JSON format using django serialization. And now here’s the problem.Looking at the bindingtojson.html demo file I see following code:
$(document).ready(function () { var url = "../sampledata/beverages.txt"; // prepare the data var source = { datatype: "json", datafields: [ { name: 'name', type: 'string' }, { name: 'type', type: 'string' }, { name: 'calories', type: 'int' }, { name: 'totalfat', type: 'string' }, { name: 'protein', type: 'string' } ], id: 'id', url: url };In my case I have the following code:
<script type="text/javascript"> var data = "{{usb_data}}"; $(document).ready(function(){ var source = { datatype: "json", datafields: [ { name: 'device_name', type: 'string' }, { name: 'vid_pid', type: 'string' }, { name: 'install', type: 'string' }, { name: 'disk_device', type: 'string' }, { name: 'volume_device', type: 'string' }, { name: 'usb_type', type: 'string' }, { name: 'vid', type: 'string' }, { name: 'pid', type: 'string' }, { name: 'hub', type: 'number' } ] };My code is missing couple parameters. What should they be? I am not getting data from the file, but passing it from the Django/Python script as variable.
My data comes in as follows:
[{"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}}In particular I’m interested in “url” and “id” parameters.
Thank you for the help.
Hi oneeyeman,
This help topic: http://www.jqwidgets.com/jquery-widgets-documentation/documentation/jqxgrid/jquery-grid-datasources.htm shows how to bind jqxGrid to various data sources. I suggest you to look at it before proceeding with jqxGrid.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com/Hi, Peter,
I read thru the link and this is what I came up with:<!DOCTYPE html> <html> <head> <title>Test</title> {% load staticfiles %} <link rel="stylesheet" href="{% static "jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" %}" type="text/css" /> <script type="text/javascript" src="{% static "jquery-1.10.2.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxcore.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxdata.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js" %}"></script> <script type="text/javascript"> $(document).ready(function(){ var source = { localdata: data, datatype: "json", datafields: [ { name: '"device_name"', type: 'string' }, { name: '"vid_pid"', type: 'date' }, { name: '"install"', type: 'date' }, { name: '"disk_device"', type: 'date' }, { name: '"volume_device"', type: 'date' }, { name: '"usb_type"', type: 'string' }, { name: '"vid"', type: 'string' }, { name: '"pid"', type: 'string' }, { name: '"hub"', type: 'number' } ], id: '"pk"', root: '"fields"' }; 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' } ] caption: "Test" }); });but the page is still empty.
What am I missing?
Thank you.
Hi oneeyeman,
In the provided code there is:
localdata: dataHowever, the data is not initialized anywhere and seems to be undefined.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter,
data is initialized.
Just look at my first post in the thread…Thank you.
Hi oneeyeman,
Well, it is not in the code which you pasted in your previous post which represents a full web page. I do not know where it is initialized, but if you use undefined data, then you will end up with JavaScript error. I suggest you to check our samples and help documentation before proceeding with your implementation.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comPeter,
OK, here is the complete html code for the page:<!DOCTYPE html> <html> <head> <title>Test</title> {% load staticfiles %} <link rel="stylesheet" href="{% static "jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" %}" type="text/css" /> <script type="text/javascript" src="{% static "jquery-1.10.2.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxcore.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxdata.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js" %}"></script> <script type="text/javascript" src="{% static "jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js" %}"></script> <script type="text/javascript"> var data = "{{usb_data}}"; $(document).ready(function(){ var source = { localdata: data, datatype: "json", datafields: [ { name: '"device_name"', type: 'string' }, { name: '"vid_pid"', type: 'date' }, { name: '"install"', type: 'date' }, { name: '"disk_device"', type: 'date' }, { name: '"volume_device"', type: 'date' }, { name: '"usb_type"', type: 'string' }, { name: '"vid"', type: 'string' }, { name: '"pid"', type: 'string' }, { name: '"hub"', type: 'number' } ], id: '"pk"', root: '"fields"' }; 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' } ] caption: "Test" }); }); </script> </head> <body> <div id='jqxWidget'> <div id="grid"></div> </div> </body> </html>The data variable is initialized in the very first line of the script:
var data = “{{usb_data}}”;
And here is the code which I see when I go to the “View->Source” menu in IE:
<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" href="/static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/static/jquery-1.10.2.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript"> 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}}, {"pk": 2, "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": "575834314537325538343836&1", "install": null, "volume_name": "", "volume_guid": "", "user_datetime": null} }]"; $(document).ready(function(){ var source = { localdata: data, datatype: "json", datafields: [ { name: '"device_name"', type: 'string' }, { name: '"vid_pid"', type: 'date' }, { name: '"install"', type: 'date' }, { name: '"disk_device"', type: 'date' }, { name: '"volume_device"', type: 'date' }, { name: '"usb_type"', type: 'string' }, { name: '"vid"', type: 'string' }, { name: '"pid"', type: 'string' }, { name: '"hub"', type: 'number' } ], id: '"pk"', root: '"fields"' }; 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' } ] caption: "Test" }); }); </script> </head> <body> <div id='jqxWidget'> <div id="grid"></div> </div> </body> </html>Do you see a problem with the code or do you want more code?
If you do, please tell me what it is and I will post it.Thank you.
Peter,
I removed that line but still getting “Error on page”, the page is still empty and server terminal shows following:[15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base .css HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jquery-1.10.2.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js HTTP/1.1" 304 0 [15/Jan/2014 02:32:19] "GET /static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js HTTP/1.1" 304 0What is this “304” error?
I restarted my server and receive those errors….
Maybe that’s why I’m getting “Error on page”?Thank you.
[EDIT]
I didn’t touch anything on the server or the client side. Just remove the offending line.
But sometimes I did get that same error even before.
[/EDIT]Hi oneeyeman,
I don’t have idea what is 304 error. Check whether the references path is correct or whether that is the correct way to add references in Django.
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi, Peter,
I cleaned my IE cache, restarted the server and tried to go to the page again.
I now get the 200 responce on the server log, but the page is still empty.What else can I try?
Is my script OK?Thank you.
Hi, Peter,
I got rid of the ugly"""text.
So now my page code looks like this:<!DOCTYPE html> <html> <head> <title>Test</title> <link rel="stylesheet" href="/static/jqwidgets-ver3.1.0/jqwidgets/styles/jqx.base.css" type="text/css" /> <script type="text/javascript" src="/static/jquery-1.10.2.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxscrollbar.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.pager.js"></script> <script type="text/javascript" src="/static/jqwidgets-ver3.1.0/jqwidgets/jqxgrid.grouping.js"></script> <script type="text/javascript"> 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}}, {"pk": 2, "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": "575834314537325538343836&1", "install": null, "volume_name": "", "volume_guid": "", "user_datetime": null}}, # A lot more records ]"; $(document).ready(function(){ var source = { localdata: data, datatype: "json", datafields: [ { name: 'device_name', type: 'string' }, { name: 'vid_pid', type: 'date' }, { name: 'install', type: 'date' }, { name: 'disk_device', type: 'date' }, { name: 'volume_device', type: 'date' }, { name: 'usb_type', type: 'string' }, { name: 'vid', type: 'string' }, { name: 'pid', type: 'string' }, { name: 'hub', type: 'number' } ], id: 'pk', root: 'fields' }; 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>It is much easier to read and comprehend.
Do you see any problems with the code?Thank you.
Hi oneyeeman,
Below is a working sample based on your data:
<!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.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="../../jqwidgets/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}}, {"pk": 2, "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": "575834314537325538343836&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>Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.comHi,
Can I use a service url inplace of “#grid” of the following code to load my data from service.
var dataAdapter = new $.jqx.dataAdapter(source)
//initialize jqxGrid
$(“#grid”).jqxGrid(calling of a service to get data from backend is possible?
Thanks & Regards
KritiHi Kriti,
Yes, it’s possible. Please, look at the Data Sources help topic of jqxGrid and also the ASP .NET Integration help topics here: http://www.jqwidgets.com/jquery-widgets-documentation/
Best Regards,
Peter StoevjQWidgets Team
http://www.jqwidgets.com -
AuthorPosts
You must be logged in to reply to this topic.