jQWidgets Forums
Forum Replies Created
Viewing 10 posts - 1 through 10 (of 10 total)
-
Author
-
January 22, 2014 at 10:23 pm in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #48236
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.
January 21, 2014 at 9:09 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #48150OK, I changed double quotes to single quotes.
No luck. I still see the horizontal grey line on top and nothing else.Thank you.
January 21, 2014 at 7:41 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #48145Peter,
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>January 18, 2014 at 9:39 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #48048Hi, 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.
January 17, 2014 at 12:18 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #47975Hi, 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.
January 15, 2014 at 10:41 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #47891Peter,
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]January 15, 2014 at 9:36 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #47888Peter,
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.
January 14, 2014 at 6:12 pm in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #47859Peter,
data is initialized.
Just look at my first post in the thread…Thank you.
January 14, 2014 at 4:50 am in reply to: Binding JSON data to jqxGrid Binding JSON data to jqxGrid #47816Hi, 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.
January 10, 2014 at 2:36 am in reply to: Blank page when using jqxGrid + django Blank page when using jqxGrid + django #47652Hi, Peter,
I added what is missing on the index.html.
Now going to the “View->Source” I see following:<!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 = "[<USB: other>, <USB: other>, <USB: other>, <USB: other>, <USB: other>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, <USB: disk>, '...(remaining elements truncated)...']"; $(document).ready(function(){ var source = { localdata: data, datatype: "array", 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' } ] }; 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>and the page is still blank.
What I think is happening is that I need to bind the “data” array to the columns data.Any idea?
Thank you. -
AuthorPosts
Viewing 10 posts - 1 through 10 (of 10 total)