setcellvalue throws Uncaught TypeError Cannot read property displayfield of null

[kevinathorParticipant]

Good day Everyone, I have a grid with custom values (checkboxes) and after the user checks one box, I want the grid to count all checked boxes in a row, and write the total in the last column.

but it throws me the following error

jqxgrid.js:7 Uncaught TypeError: Cannot read property ‘displayfield’ of null

whenever it gets to the following line:

$("#grid_1e0fde94_6b04_413c_9ef3_9e51776134f3").jqxGrid('setcellvalue', index, 11, sumatoria);

but if I remove and I simply let it write it on console, it throws no error. but I notice that the count is not doing it correctly, it gives me the previous value, instead of the new one.

for example, if I have 0 checkboxes checked, it gives me a 0.
if I check one, it gives me a 0
if I check three, it gives me a 1
if I uncheck one, it gives me a 3
if I check a new one, it gives me 2
etc

 $(document).ready(function() {
     var source_1e0fde94_6b04_413c_9ef3_9e51776134f3 = {
         datatype: "json",
         datafields: [{
             "name": "defaultColumn",
             "type": ""
         }, {
             "name": "1",
             "type": "bool"
         }, {
             "name": "2",
             "type": "bool"
         }, {
             "name": "3",
             "type": "bool"
         }, {
             "name": "4",
             "type": "bool"
         }, {
             "name": "5",
             "type": "bool"
         }, {
             "name": "6",
             "type": "bool"
         }, {
             "name": "7",
             "type": "bool"
         }, {
             "name": "8",
             "type": "bool"
         }, {
             "name": "9",
             "type": "bool"
         }, {
             "name": "10",
             "type": "bool"
         }, {
             "name": "TOTAL",
             "type": "int"
         }],
         root: 'Rows',
         beforeSend: function(xhr, settings) {
             var fixedUrl = grid_get_fixed_data_1e0fde94_6b04_413c_9ef3_9e51776134f3();
             if (fixedUrl) settings.url += "&" + fixedUrl
         },
         id: 'id',
         url: 'GridView?widget-id=1e0fde94_6b04_413c_9ef3_9e51776134f3',
         type: 'POST'
     };
     var adapter_1e0fde94_6b04_413c_9ef3_9e51776134f3 = new $.jqx.dataAdapter(source_1e0fde94_6b04_413c_9ef3_9e51776134f3, {
         downloadComplete: function(data, status, xhr) {
             console.log(data)
         },
         loadComplete: function(data) {},
         loadError: function(xhr, status, error) {
             alert(error);
         }
     });
     var createGridEditor = function(row, cellValue, editor, cellText, width, height) {
         var element = $('<div tabIndex=0 style="position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -10px;"></div>');
         editor.append(element);
         element.jqxCheckBox({
             animationShowDelay: 0,
             animationHideDelay: 0,
             width: 18,
             height: 18
         });
     }
     var initGridEditor = function(row, cellValue, editor, cellText, width, height) {
         var checkBoxHTMLElement = editor.find('div:first');
         checkBoxHTMLElement.jqxCheckBox({
             checked: cellValue.toString() == "true"
         });
     }
     var gridEditorValue = function(row, cellValue, editor) {
         var checkBoxHTMLElement = editor.find('div:first');
         return checkBoxHTMLElement.val();
     }
     $("#grid_1e0fde94_6b04_413c_9ef3_9e51776134f3").jqxGrid({
         width: '100%',
         source: adapter_1e0fde94_6b04_413c_9ef3_9e51776134f3,
         autoheight: false,
         columnsresize: true,
         sortable: false,
         virtualmode: false,
         editable: true,
         editmode: 'click',
         selectionmode: 'singlecell',
         rendergridrows: function(obj) {
             return obj.data;
         },
         columns: [{
             "cellsalign": "left",
             "text": "Motivos Riesgos Obstetrico\\Tit. Columnas",
             "pinned": "true",
             "width": 180,
             "datafield": "defaultColumn",
             "editable": "true",
             "columntype": "string"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "1",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "1",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "2",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "2",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "3",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "3",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "4",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "4",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "5",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "5",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "6",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "6",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "7",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "7",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "8",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "8",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "9",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "9",
             "editable": "true",
             "columntype": "custom"
         }, {
             "createeditor": createGridEditor,
             "cellsalign": "left",
             "text": "10",
             "width": 180,
             "geteditorvalue": gridEditorValue,
             "initeditor": initGridEditor,
             "columngroup": "",
             "datafield": "10",
             "editable": "true",
             "columntype": "custom"
         }, {
             "cellsalign": "left",
             "text": "TOTAL",
             "width": 180,
             "datafield": "TOTAL",
             "editable": "true",
             "columntype": "int"
         }],
         columngroups: [{
             "aling": "default",
             "text": "default",
             "name": "default"
         }]
     });
     $("#grid_1e0fde94_6b04_413c_9ef3_9e51776134f3").bind('cellendedit', function(event) {
         if (event.args.columntype == 'checkbox' || event.args.columntype == 'custom') {
             var json = $("#grid_1e0fde94_6b04_413c_9ef3_9e51776134f3").jqxGrid('getrows');
             $.each(json, function(index, jsonob) {
                 var sumatoria = 0;
                 $.each(jsonob, function(index2, jsonit) {
                     if (index2 != "defaultColumn" && index2 != "uid") {
                         if (jsonit) {
                             var val = parseInt(index2);
                             sumatoria = sumatoria + val;
                         }
                     }
                 });
                 console.log(index + "---" + sumatoria)
                 $("#grid_1e0fde94_6b04_413c_9ef3_9e51776134f3").jqxGrid('setcellvalue', index, 11, sumatoria);
             });
         }
     });
 });

[kevinathorParticipant]

a quick fix for the count problem was adding the function inside a settimeout.

I still get the same error with the $("#grid_1e0fde94_6b04_413c_9ef3_9e51776134f3").jqxGrid('setcellvalue', index, 11, sumatoria);

[HristoParticipant]

Hello kevinathor,

The issue become from incorrect set dataField (there is no “11”) and the type need to be String.
You could find out more information in our API Documentation.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[TSKishoreParticipant]

Hello,

Facing same issue when the grid is loaded 2nd/3rd time.
All values passed are in proper format.

[Yavor DashevParticipant]

Hi TSKishore,

I have tested the setcellvalue method and everything works as expected.

That is why I would like to ask for a code example which reproduces your use case in order to be able to give you a proper solution.

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

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

[Author]

Posts