Hi I am using this jQWidgets grid component to load JSON data. But for some reason it's just rendering blank rows with no data in it. Please let me know what's wrong with this code.
http://jsfiddle.net/dRbAE/439/
var data = [{icases__client_id:"15",icases__id:"106167",clients__name:"Apix UK Ltd",icases__case_reference_i_d:"APIX120501",icases__name:"LALO, Hemay",icases__state:"closed",icases__go_date:"2017-01-23T09:43:12"}];
var source =
{
localdata: data,
datafields: [
{name: 'client_id', type: 'int'},
{name: 'case_id', type: 'int'},
{name: 'client_name', type: 'string'},
{name: 'case_ref', type: 'string'},
{name: 'case_name', type: 'string'},
{name: 'case_state', type: 'string'},
{name: 'case_go_date', type: 'date'}
],
id: 'case_id',
datatype: "json"
};
var dataAdapter = new $.jqx.dataAdapter(source);
var cellStyle = function (row, columnfield, value) {
return '';
}
$("#search_case_grid").jqxGrid(
{
width: 1000,
height: 820,
source: dataAdapter,
columnsresize: true,
sortable: true,
editable: false,
altrows: true,
autoheight: false,
rowsheight: 20,
selectionmode: 'single row',
editmode: 'selectedcell',
columns: [
{hidden: true, datafield: 'icases__id', width: 0},
{text: 'Client', datafield: 'clients__name', align: 'center', width: 250, cellclassname: cellStyle},
{text: 'Case Ref.', datafield: 'icases__case_reference_i_d', align: 'center', width: 100, cellclassname: cellStyle},
{text: 'Case', datafield: 'icases__name', align: 'center', width: 150, cellclassname: cellStyle},
{text: 'State', datafield: 'icases__state', align: 'center', width: 100, cellclassname: cellStyle},
{text: 'Go Date', datafield: 'icases__go_date', align: 'center', columntype: 'datetimeinput', formatString: "dd-MM-yyyy", cellsformat: "dd-MMMM-yyyy", width: 100, cellclassname: cellStyle}
]
});
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css" rel="stylesheet"/>
<link href="https://jqwidgets.com/public/jqwidgets/styles/jqx.base.css" rel="stylesheet"/>
<script src="https://jqwidgets.com/public/jqwidgets/jqx-all.js"></script>
<div id='search_case_grid'>
</div>
You are using the wrong name for the data attributes:
the attributes in your data object must match the one in source.datafileds:
var data = [{icases__client_id:"15",icases__id:"106167",clients__name:"Apix UK Ltd",icases__case_reference_i_d:"APIX120501",icases__name:"LALO, Hemay",icases__state:"closed",icases__go_date:"2017-01-23T09:43:12"}];
var source =
{
localdata: data,
datafields: [
{name: 'icases__client_id', type: 'int'},
{name: 'icases__id', type: 'int'},
{name: 'clients__name', type: 'string'},
{name: 'icases__case_reference_i_d', type: 'string'},
{name: 'icases__name', type: 'string'},
{name: 'icases__state', type: 'string'},
{name: 'icases__go_date', type: 'date'}
],
...
try this