[SOLVED] Why my grid is not populating with given JSON data

Why my grid is not populating with given JSON data

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>

Solution

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