Grid renders no data

[SidParticipant]

I have the following code for my grid (version 4.2.1), but no data appears in the grid. I’ve been looking at it for a day now, and I need some of your eyes.

The headers show up and a few empty rows show up too (but not all rows show up).

var projects_source = {
    url: '<my_url>',
    datatype: 'json',
    datafields: [
      {name: 'number', type: 'string'},
      {name: 'title', type: 'string'},
      {name: 'project_manager', type: 'string'},
      {name: 'date_closed', type: 'date', format: 'yyy-MM-dd'},
      {name: 'on_schedule', type: 'int'},
      {name: 'on_budget', type: 'int'},
      {name: 'audited', type: 'int'},
      {name: 'signed_contract', type: 'int'},
      {name: 'scope_of_work', type: 'int'},
      {name: 'signed_pio', type: 'int'},
      {name: 'signed_scope_changes', type: 'int'},
      {name: 'deliverables', type: 'int'},
      {name: 'safety_plans', type: 'int'},
      {name: 'tailgate', type: 'int'},
      {name: 'company', type: 'string'},
      {name: 'division', type: 'string'},
      {name: 'office', type: 'string'},
      {name: 'group', type: 'string'}
    ],
    id: 'id',
    cache: false,
    async: true,
    root: 'Rows'
  };
  var projects_dataAdapter = new $.jqx.dataAdapter(projects_source, {
    downloadComplete: function(data, status, xhr) { console.log("Download Complete: "+data.Rows.length+" rows"); },
    loadComplete: function(data) { console.log("Load Complete"); },
    loadError: function(xhr,status,error) { console,log("Load Error: "+error); }
  });
  $("#report_projects_grid").jqxGrid(
  {
        theme: "metro",
        width: '100%',
        autoheight: true,
        columnsresize:true,
        pageable: false,
        sortable: false,
        filterable: false,
        altrows: false,
        editable: false,
        source: projects_dataAdapter,
        columns: [
                {text: 'Audited', datafield: 'audited', width: 70 },
              {text: 'Number', datafield: 'number', width: 100 },
                {text: 'Title', datafield: 'title', width: 200 },
                {text: 'Project Manager', datafield: 'project_manager', width: 200 },
                {text: 'On Budget', datafield: 'on_budget', width: 100 },
                {text: 'On Schedule', datafield: 'on_schedule', width: 100 }
        ]
  });

When the page loads, in the console I get
“Download Complete: 27 rows” and
“Load Complete”

The returned data from <my url> is as follows
{TotalRows: 27, Rows: [{
“id”:”48FFC813-0F0C-4EA8-8270-01A783CE9B24″,
“number”:”346-7609.010″,
“title”:”Some weird project”,
“project_manager”:”Joe Smith”,
“date_closed”:”2015-12-04″,
“on_schedule”:1,
“on_budget”:1,
“audited”:1,
“signed_contract”:1,
“scope_of_work”:0,
“signed_pio”:0,
“signed_scope_changes”:0,
“deliverables”:0,
“safety_plans”:0,
“hazard_assess”:0,
“swpp”:0,
“tailgate”:0,
“company”:”Acme Metals”,
“division”:”Hardware”,
“office”:”New York”,
“group”:”Front Counter”},
… <26 more rows> ]

[ChristopherParticipant]

Hi Sid,

When you’re using the “root” property to map the data from the JSON file, you have to make sure there iaren’t any reserved words in the JSON file. In your case, the problem is that in your JSON file you have a record called “group” that messes up the mapping. So to make the jqxGrid load the data, you have to set a specific map property to that record only. Here’s how you do it:

 var source =
            {
                localdata: data,
                datatype: "json",
                datafields: [
                    { name: 'number', type: 'string' },
                      { name: 'title', type: 'string' },
                      { name: 'project_manager', type: 'string' },
                      { name: 'date_closed', type: 'date', format: 'yyy-MM-dd' },
                      { name: 'on_schedule', type: 'int' },
                      { name: 'on_budget', type: 'int' },
                      { name: 'audited', type: 'int'  },
                      { name: 'signed_contract', type: 'int' },
                      { name: 'scope_of_work', type: 'int' },
                      { name: 'signed_pio', type: 'int' },
                      { name: 'signed_scope_changes', type: 'int' },
                      { name: 'deliverables', type: 'int' },
                      { name: 'safety_plans', type: 'int' },
                      { name: 'tailgate', type: 'int' },
                      { name: 'company', type: 'string' },
                      { name: 'division', type: 'string' },
                      { name: 'office', type: 'string' },
                      { name: 'mygroup', type: 'string', map:'group' }
                ],
                id: 'id',
                cache: false,
                async: true,
                root: 'Rows'
            };

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[SidParticipant]

That fixed it. Thank you for the heads up Christopher.

[Author]

Posts