jQuery UI Widgets Forums Grid setcellvalue throws Uncaught TypeError Cannot read property displayfield of null

This topic contains 4 replies, has 4 voices, and was last updated by  Yavor Dashev 1 year, 2 months ago.

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author

  • kevinathor
    Participant

    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);
                 });
             }
         });
     });

    kevinathor
    Participant

    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);


    Hristo
    Participant

    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


    TSKishore
    Participant

    Hello,

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


    Yavor Dashev
    Participant

    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

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.