[jqxGrid JSON data binding] No data to display

[rmichelParticipant]

Hello,

I’m trying to bind JSON data received from PHP.

The data structure is the one used by the rest of the application:

{"response": {"errors": [], "notifications": [], "result": {"status": "ok", "incoterms": [{"id_incoterm":"1","code":"TES","name":"TEST Incoterm","designation_en":"TEST Incoterm"},{"id_incoterm":"2","code":"TET","name":"TEST Incoterm 2","designation_en":"TEST Incoterm 2"}]}}}

var source =
{
    datatype: "json",
    datafields: [
        {name: 'id_incoterm'},
        {name: 'code'},
        {name: 'name'},
        {name: 'designation_en'}
    ],
    id: 'id',
    url: site_url + '/Services/ReferenceFiles/Incoterms/GetData',
    root: 'response',
    record: 'incoterms'
};
var dataAdapter = new $.jqx.dataAdapter(source);
$("#incoterms-grid").jqxGrid({
    width: '100%',
    source: dataAdapter,
    columnsresize: true,
    columns: [
      {text: 'ID', dataField: 'id_incoterm'},
      {text: 'Code', dataField: 'code'},
      {text: 'Designation FR', dataField: 'name'},
      {text: 'Designation EN', dataField: 'designation_en'},
      {text: 'Action', width: 90}
    ]
});

The browser receives the data well, but there is something weird: when I put ‘incoterms’ or ‘result.incoterms’ as the record value I get “No data to display”, but when I put any other value, it shows me an empty line.
Which makes me think that my data is well found in the JSON, but I must have an error in the configuration of the jqxGrid or of my data.

Thanks for your help.

[Yavor DashevParticipant]

Hi rmichel,

Using similar scenario as yours I have created a code snippet on how I have set my jqxGrid:

            var source =
            {
                url: 'server.php',
                datatype: "json",
                cache: false,
                type: "POST",
                root: "data",
                datafields:
                [
                    'uniqueid : string',
                    'lastname: string'
                ]
            };

            var dataAdapter = new $.jqx.dataAdapter(source, { loadComplete: function () {
                var records = dataAdapter.records;
             } });
            dataAdapter.dataBind();
 

            // initialize jqxGrid
            $("#grid").jqxGrid(
            {
                width: getWidth('Grid'),
                source: dataAdapter,     
                showstatusbar: true,
                statusbarheight: 50,
                editable: true,
                selectionmode: 'singlecell',
                columns: [
                  { text: 'First Name', columntype: 'textbox', datafield: 'uniqueid', width: 170 },
                  { text: 'Last Name', datafield: 'lastname', columntype: 'textbox', width: 170 },
                ]
            });

Also make sure to set the header in your php file which sends the data to the grid like so:
header('Content-Type: application/json');

Let me know if this works for you!

Please, do not hesitate to contact us if you have any additional questions.

Best Regards,
Yavor Dashev
jQWidgets team
https://www.jqwidgets.com

[rmichelParticipant]

Thanks, I couldn’t find the documentation for dataAdapter, but with your answer I was able to find it and this code works:

var source =
{
    datatype: "json",
    datafields: [
        {name: 'id_incoterm'},
        {name: 'code'},
        {name: 'name'},
        {name: 'designation_en'}
    ],
    id: 'id',
    url: site_url + '/Services/ReferenceFiles/Incoterms/GetData',
    root: 'response'
};
var dataAdapter = new $.jqx.dataAdapter(source, {
    beforeLoadComplete: function(records, data){
        return data.response.result.incoterms;
    }
});
$("#incoterms-grid").jqxGrid({
    width: '100%',
    source: dataAdapter,
    columnsresize: true,
    columns: [
      {text: 'ID', dataField: 'id_incoterm'},
      {text: 'Code', dataField: 'code'},
      {text: 'Designation FR', dataField: 'name'},
      {text: 'Designation EN', dataField: 'designation_en'},
      {text: 'Action', width: 90}
    ]
});

[Author]

Posts