Data not showing in grid

[tcorrigan5Participant]

I have a jqxGrid set up as follows:

      $(document).ready(function () {
         var qry = '@Url.Action("GetDamages", "Home")';
         $.getJSON(qry, function (damages) {
            var pdsource = {
               datatype: 'json',
               datafields: [
                  { name: 'type', type: 'string' },
                  { name: 'amount', type: 'number' },
                  { name: 'descr', type: 'string' }
               ],
               localData: damages,
               updateRow: function (rowId, rowData, commit) {
                  $.post('@Url.Action("SaveDamages", "Home")', { key: rowId+1, type: rowData.type, amount: rowData.amount, descr: rowData.descr })
                     .done(function (data) {
                        commit(true);
                     }).fail(function () {
                        commit(false);
                        alert("Update failed");
                     });
               },
            };

            $("#priordamage").jqxGrid({
               width: '100%',
               height: 200,
               editable: true,
               columnsResize: false,
               selectionMode: 'singlerow',
               editmode: 'selectedcell',
               columns: [{ text: 'Type', datafield: 'type', columntype: 'textbox' },
                         { text: 'Amount', datafield: 'amount', columntype: 'numberinput', cellsFormat: 'f2' },
                         { text: 'Description', datafield: 'descr', columntype: 'textbox' }
                        ]
            });

            var da = new $.jqx.dataAdapter(pdsource, {
               loadComplete(data) { console.log(data); },
               loadError(shr, status, error) { console.log(error); }
            });
            $('#priordamage').jqxGrid({ source: da, editable: true });

            $("#addDamage").click(function () {
               var key = $("#priordamage").jqxGrid('getdatainformation').rowscount;
               $("#priordamage").jqxGrid('addRow', null, { key: key + 1, type: '', amount: 0.00, descr: '' });
            });

            $("#debug").click(function () {
               var rows = $("#priordamage").jqxGrid('getRows');
               for (i = 0; i < rows.length; ++i)
                  console.log(rows[i]);
            });
         });
      });

When the page is loaded the data retrieved from the server is correct and the data adapter is loaded with all the correct data (as confirmed by the console log message in the loadComplete event handler). However, only the data for the first column of the grid shows up, the other columns do not contain data (confirmed when the Debug button is clicked.) Please advise as to a solution.

[ChristopherParticipant]

Hi tcorrigan5,

Please provide us with a sample of your data so we can test your code with it.

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[tcorrigan5Participant]

Here’s the output from the console.log(data) statement:

[{“key”:1,”type”:”Engine”,”date”:”2016-09-01T00:00:00″,”cost”:234.0},{“key”:2,”type”:”Interior”,”date”:”2016-07-01T00:00:00″,”cost”:12.0},{“key”:3,”type”:”Wheels”,”date”:”2011-08-19T00:00:00″,”cost”:200.0},{“key”:4,”type”:”Bumpers”,”date”:”2006-01-12T00:00:00″,”cost”:300.0}]

[ChristopherParticipant]

Hi tcorrigan5,

By looking at the data that you’re trying to load in the jqxGrid i notice that you have the following datafields: “key,type,date,cost”. Meanwhile in your source you’re using the datafields: “type, amout, descr”. This means that only the data for the “type” column will be loaded because there is no “amout” or “descr” fields in the data. If you want to get all of the information of the request, you need to set the datafields on your source properly:

 datafields: [
                    { name: 'key', type: 'number' },
                    { name: 'type', type: 'string' },
                    { name: 'date', type: 'date' },
                    { name: 'cost', type: 'float' }
                ],

Best Regards,
Christopher

jQWidgets Team
http://www.jqwidgets.com

[tcorrigan5Participant]

You’re right! Sorry about that. Thank you for your help.

[Author]

Posts