jQWidgets Forums
jQuery UI Widgets › Forums › Grid › Grid not populating
Tagged: #jqwidgets-grid, api data, javascript grid, jquery grid, json data
This topic contains 5 replies, has 2 voices, and was last updated by AA5MC 5 years, 10 months ago.
Viewing 6 posts - 1 through 6 (of 6 total)
-
AuthorGrid not populating Posts
-
hello,
I have a grid not populating .
I have no idea on what I’m missing or what I have wrong, I have download the latest version from the site.
I have tried different version of jquery etc.the grid appears I have no errors showing up in the browser console window.
I have a json string returning from a web API call which looks like this:
[ { "Id":103646, "Created":"2019-06-19T21:35:17.41", "Status":"File Sent To Flex", "Type":"PS", "JobName":"BA1782RJ", "JobNumber":"J0887597", "Qty":"QTY", "Seq":"SEQ", "FormId":"6230", "TotalPages":12, "FileSize":"1050790", "FileSizeVar":"1 MB", "OrginalFileName":"D:\\INBOUND\\Mainframe\\jqpld\\CTDPRINT.S0102876_96274-00083358.TXT", "NewFileName":"J0887597_BA1782RJ_SEQ_6230_QTY_01782-01066944-001-24-221R_D_FLEX_20190619_100000000000103646.PS", "Submitter":"P01782", "Site":"NA", "FileDate":"2019-06-19T09:35:13", "UniqueId":"100000000000103646", "RetentionPath":"\\\\server\\D$\\RETENTION\\MainFrameParser\\20190619\\jqpld", "LogFile":"\\\\server\\D$\\logs\\OmanMainFrameParser\\20190619\\CTDPRINT.S0102876_96274-0008335820190619093517.log", "Message":"Good", "Workflow":"GMC", "MPFWorkflow":"MAINFRAME", "ForeColor":"#000000", "BackColor":"#ADFF2F", "Modified":"2019-06-19T21:35:52.55", "GMCCount":1 } ]I have my grid setup like this:
<script src="scripts/jquery-1.11.0.min.js"></script> <script src="scripts/jquery-ui-1.11.4.custom/jquery-ui.min.js"></script> <script src="jqwidgets/jqxcore.js"></script> <script type="text/javascript" src="jqwidgets/jqxdata.js"></script> <script type="text/javascript" src="jqwidgets/jqxdraw.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.grouping.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.selection.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.sort.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.aggregates.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.columnsresize.js"></script> <script type="text/javascript" src="jqwidgets/jqxgrid.filter.js"></script> <script type="text/javascript" src="jqwidgets/jqxchart.core.js"></script> <script type="text/javascript" src="jqwidgets/jqxslider.js"></script> <script type="text/javascript" src="jqwidgets/jqxgauge.js"></script> <script type="text/javascript" src="jqwidgets/jqxdatetimeinput.js"></script> <script type="text/javascript" src="jqwidgets/jqxcalendar.js"></script> <script type="text/javascript" src="jqwidgets/jqxtooltip.js"></script> <script type="text/javascript" src="jqwidgets/jqxdropdownlist.js"></script> <script type="text/javascript" src="jqwidgets/jqxlistbox.js"></script> <script type="text/javascript"> $(document).ready(function(){ var source = { datatype: "json", datafields: [ { name: "Id", type: "number"} , { name: "Created", type: "date"}, { name: "Status", type: "string"}, { name: "Type", type: "string"}, { name: "JobName", type: "string"}, { name: "JobNumber", type: "string" }, { name: "Qty", type: "string"}, { name: "Seq", type: "string" }, { name: "FormId", type: "string" }, { name: "TotalPages", type: "number" }, { name: "FileSize", type: "number"}, { name: "FileSizeVar", type: "string"}, { name: "OrginalFileName", type: "string" }, { name: "NewFileName",type: "string" }, { name: "Submitter", type: "string" }, { name: "Site", type: "string" }, { name: "FileDate", type: "date"}, { name: "UniqueId", type: "string" }, { name: "RetentionPath", type: "string"}, { name: "LogFile", type: "string"}, { name: "Message", type: "string"}, { name: "Workflow",type: "string" }, { name: "MPFWorkflow", type: "string"}, { name: "ForeColor", type: "string" }, { name: "BackColor", type: "string"}, { name: "Modified", type: "date" }, { name: "GMCCount", type: "number" } ], url: "http://myserver/OmanREST/api/OmanMonitor/GetAllTrackingJobs/8a6y18048313471489b4668345889u48" }; var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { console.log(data);}, loadError: function (xhr, status, error) {alert(status) } }); // Create jqxGrid $("#TrackingGrid").jqxGrid( { width: '98%', height: '600', source: dataAdapter, groupable: true, showstatusbar: true, statusbarheight: 50, columnsresize: true, sortable: true, altrows: true, filterable: true, columns: [ { text: "Id", width: 50, datafield: "Id", cellsalign: 'left', align: 'left'} , { text: "Created", width: 50, datafield: "Created", cellsalign: 'left', align: 'left', cellsformat: 'MM-dd-yyyy hh:mm:ss' }, { text: "Status", width: 50, datafield: "Status", cellsalign: 'left', align: 'left'}, { text: "Type", width: 50, datafield: "Type",cellsalign: 'left', align: 'left'}, { text: "JobName", width: 50, datafield: "JobName",cellsalign: 'left', align: 'left'}, { text: "JobNumber", width: 50, datafield: "JobNumber", cellsalign: 'left', align: 'left' }, { text: "Site",width: 50, datafield: "Site", cellsalign: 'left', align: 'left' }, { text: "Qty", width: 50, datafield: "Qty",cellsalign: 'left', align: 'left' }, { text: "Seq", width: 50, datafield: "Seq",cellsalign: 'left', align: 'left' }, { text: "TotalPages", width: 50, datafield: "TotalPages",cellsalign: 'left', align: 'left' }, { text: "FormId", width: 50, datafield: "FormId",cellsalign: 'left', align: 'left' }, { text: "UniqueId", width: 50, datafield: "UniqueId", cellsalign: 'left', align: 'left' }, { text: "Submitter", width: 50, datafield: "Submitter",cellsalign: 'left', align: 'left' }, { text: "RetentionPath", width: 50, datafield: "RetentionPath",cellsalign: 'left', align: 'left' }, { text: "Message", width: 50,datafield: "Message",cellsalign: 'left', align: 'left'}, { text: "LogFile", width: 50,datafield: "LogFile", cellsalign: 'left', align: 'left'}, { text: "FileSize",width: 50, datafield: "FileSize",cellsalign: 'left', align: 'left' }, { text: "FileSizeVar",width: 50, datafield: "FileSizeVar",cellsalign: 'left', align: 'left' }, { text: "OrginalFileName",width: 50, datafield: "OrginalFileName",cellsalign: 'left', align: 'left'}, { text: "NewFileName", width: 50,datafield: "NewFileName",cellsalign: 'left', align: 'left' }, { text: "FileDate", width: 50,datafield: "FileDate",cellsalign: 'left', align: 'left',cellsformat: 'MM-dd-yyyy hh:mm:ss' }, { text: "Workflow",width: 50, datafield: "Workflow",cellsalign: 'left', align: 'left' }, { text: "Modified",width: 50, datafield: "Modified",cellsalign: 'left', align: 'left', cellsformat: 'MM-dd-yyyy hh:mm:ss' }, { text: "MPFWorkflow",width: 50, datafield: "MPFWorkflow",cellsalign: 'left', align: 'left' }, { text: "ForeColor",width: 50, datafield: "ForeColor",cellsalign: 'left', align: 'left' }, { text: "BackColor", width: 50,datafield: "BackColor",cellsalign: 'left', align: 'left' }, { text: "GMCCount",width: 50, datafield: "GMCCount", cellsalign: 'left', align: 'left' }, ] });Best Regards
Mike ColonnaHello Mike,
Could you please tell me what is the result of the console.log in the loadComplete function? Do you get the correct data from the API?
I’ve tested the grid with using your data as localdata and it’s working. You could review the example.Best Regards,
TodorjQWidgets Team
https://www.jqwidgets.comHello Todor,
yes, I get the data as above the data source is loading correctly.
I have my web API only returning one record to keep it simple.[ { "Id":103646, "Created":"2019-06-19T21:35:17.41", "Status":"File Sent To Flex", "Type":"PS", "JobName":"BA1782RJ", "JobNumber":"J0887597", "Qty":"QTY", "Seq":"SEQ", "FormId":"6230", "TotalPages":12, "FileSize":"1050790", "FileSizeVar":"1 MB", "OrginalFileName":"D:\\INBOUND\\Mainframe\\jqpld\\CTDPRINT.S0102876_96274-00083358.TXT", "NewFileName":"J0887597_BA1782RJ_SEQ_6230_QTY_01782-01066944-001-24-221R_D_FLEX_20190619_100000000000103646.PS", "Submitter":"P01782", "Site":"NA", "FileDate":"2019-06-19T09:35:13", "UniqueId":"100000000000103646", "RetentionPath":"\\\\server\\D$\\RETENTION\\MainFrameParser\\20190619\\jqpld", "LogFile":"\\\\server\\D$\\logs\\OmanMainFrameParser\\20190619\\CTDPRINT.S0102876_96274-0008335820190619093517.log", "Message":"Good", "Workflow":"GMC", "MPFWorkflow":"MAINFRAME", "ForeColor":"#000000", "BackColor":"#ADFF2F", "Modified":"2019-06-19T21:35:52.55", "GMCCount":1 } ]Hello Todor,
here is the actual console print out:jqxdata.js:7 XHR finished loading: GET "http://myserver/OmanREST/api/OmanMonitor/GetAllTrackingJobs/8a6y18048313471489b4668345889u48?filterscount=0&groupscount=0&pagenum=0&pagesize=10&recordstartindex=0&recordendindex=26&_=1561031085523". send @ jqxdata.js:7 ajax @ jqxdata.js:7 dataBind @ jqxdata.js:7 databind @ jqxgrid.js:7 databind @ jqxgrid.js:7 createInstance @ jqxgrid.js:7 a.jqx.applyWidget @ jqxcore.js:7 (anonymous) @ jqxcore.js:7 each @ jquery-1.11.0.min.js:2 each @ jquery-1.11.0.min.js:2 a.fn.(anonymous function) @ jqxcore.js:7 (anonymous) @ index.html:106 j @ jquery-1.11.0.min.js:2 fireWith @ jquery-1.11.0.min.js:2 ready @ jquery-1.11.0.min.js:2 J @ jquery-1.11.0.min.js:2 index.html:102 [{"Id":103933,"Created":"2019-06-20T06:40:54.427","Status":"File Sent To Flex","Type":"PS","JobName":"BA5888RQ","JobNumber":"J0910968","Qty":"QTY","Seq":"SEQ","FormId":"6210","TotalPages":778,"FileSize":"13689956","FileSizeVar":"13 MB","OrginalFileName":"D:\\INBOUND\\Mainframe\\jqpld\\CTDPRINT.S0102876_96561-00083615.TXT","NewFileName":"J0910968_BA5888RQ_SEQ_6210_QTY_05888-00511216-019-24-220R_D_FLEX_20190620_100000000000103933.PS","Submitter":"P05888","Site":"PROD","FileDate":"2019-06-20T06:40:48","UniqueId":"100000000000103933","RetentionPath":"\\\\L4DWIPAP2210A\\D$\\RETENTION\\MainFrameParser\\20190620\\jqpld","LogFile":"\\\\L4DWIPAP2210A\\D$\\logs\\OmanMainFrameParser\\20190620\\CTDPRINT.S0102876_96561-0008361520190620064054.log","Message":"Good","Workflow":"GMC","MPFWorkflow":"MAINFRAME","ForeColor":"#000000","BackColor":"#ADFF2F","Modified":"2019-06-20T06:41:46.307","GMCCount":1}]I ran a debugger to see if the dataadapter is being populated but it looks like the record array is empty?
not sure if that correct or not?
Hello Todor,
issue been resolved, after some trouble shooting today I found out that my json was actually being returned with backslashes.
I went back to by WEB API made the correction and all is working now, thank you for your time. -
AuthorPosts
Viewing 6 posts - 1 through 6 (of 6 total)
You must be logged in to reply to this topic.