Grid with inline editing: Uncaught TypeError: Cannot read properties of undefined (reading 'data')

[syian]

I have implemented a grid with inline editing, which has a dropdown in one of its columns. The problem is, everytime I am trying to save a change I made, I get the following TypeError and I think it is the dropdown which causes this:

kendo.all.js:6412 Uncaught TypeError: Cannot read properties of undefined (reading 'data')
    at init.setup (VM13051 kendo.all.min.js:formatted:4953)
    at init.update (VM13051 kendo.all.min.js:formatted:4946)
    at Object.<anonymous> (VM13051 kendo.all.min.js:formatted:5531)
    at Function.Deferred (VM12816 AJS097.P:528)
    at init._promise (VM13051 kendo.all.min.js:formatted:5526)
    at init._send (VM13051 kendo.all.min.js:formatted:5557)
    at init.sync (VM13051 kendo.all.min.js:formatted:5341)
    at init.saveRow (VM13051 kendo.all.min.js:formatted:48900)
    at init._editUpdateClick (VM13051 kendo.all.min.js:formatted:48689)
    at HTMLAnchorElement.proxy (VM12816 AJS097.P:65)

Here is the implementation of the grid (I tried to keep it as simple as I could, by removing anything that might be unnecessary for this problem):

jq(document).ready(function() {
    var copyBool = false
        grid_counter = 0; 
    
    jq("#inline_grid").kendoGrid({
        autoBind: true,
        dataSource: {
            transport: {
                read: {
                    url: "GetJsonData_Grid.p",
                    dataType: "json",
                    data:{ 
                        "function": "testfunction",
                        "element": "grid",
                        "param1": "testparam1",
                        "param2": "",
                        "param3": "",
                        "rowid": $("rowid").value
                    }                                           
                }
            },
            schema: {
                data:  "data",
                total: "recordsCount",
                model: {
                    id: "field1", 
                    fields: { 
                        field1:  { 
                                    type: "string", 
                                    validation: { 
                                        required: true,
                                        maxlength: "3", 
                                        field1validation: function(input) {
                                            var grid_length = jq("#inline_grid").data("kendoGrid").dataSource.data().length + 1; 

                                            if(input.is("[name='field1']") && input.val() == "0") {
                                                input.attr("data-field1validation-msg","the number must be greater than 0");
                                                returnfalse;
                                            } elseif(input.is("[name='field1']") && input.val() == "") {
                                                input.attr("data-field1validation-msg","the number must not be empty");
                                                returnfalse;
                                            } elseif(input.is("[name='field1']") && (input.val() < "0" || input.val() > "99999999")) {
                                                input.attr("data-field1validation-msg","the input is invalid");  
                                                input.val(grid_length);
                                                returnfalse;                                                           
                                            }
                                            
                                            returntrue;
                                        } 
                                    }
                                },
                        field2: { type: "string", validation: { required: false }},
                        field3: { type: "string", validation: { required: false }},
                        field4: { type: "string", validation: { required: false }},
                        field5: { type: "string", validation: { required: false }},
                        field6: { type: "string", validation: { required: false }}
                    }                                            
                }  
            },
            pageSize: 15
        },
        toolbar:    [
            { name: "create", text: "Add", iconClass: "" },  
        ],   
        dataBound: function(e) {
            if(grid_counter == 0) {
                this.select("tr:eq(0)");  
                grid_counter++;    
            }
        },
        selectable: true,
        change: function(e) {
            var selectedRows = this.select(),
                dataItem = this.dataItem(selectedRows[0]);
            ...                                                 
        },                                                       
        sortable: false,
        scrollable: {
            virtual: true
        },
        persistSelection: true,
        columns: [
            { field: "field1",  title: "nr",           width: "30px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor },   
            { field: "field2",  title: "active",       width: "20px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: cbEditor   },   
            { field: "field3",  title: "art",          width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: ddlEditor  },    
            { field: "field4",  title: "description",  width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor },    
            { field: "field5",  title: "comment",      width: "100px",attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: textEditor },    
            { field: "field6",  title: "processed",    width: "60px", attributes: {style: "text-align:left;"}, headerAttributes: {style: "text-align:left;"}, editor: cbEditor   },    
            { command: [
                { name: "edit", 
                    text: { edit: " ", update: "Save", cancel: " "}
                },  
                { name: "copy", 
                    text: " ",
                    iconClass: "k-icon k-i-copy",
                    click: function(e) {
                      e.preventDefault();
                    
                      var data = this.dataItem(jq(e.target).closest("tr"));
                        
                      field1 = data.field1;
                      field2 = data.field2;
                      field3 = data.field3;
                      field4 = data.field4;
                      field5 = data.field5;
                      field6 = data.field6;
                    
                      copyBool = true;
                      
                      jq("#inline_grid").data("kendoGrid").addRow();
                    }
                },
                { name: "destroy", 
                    text: " ",
                    iconClass: "k-icon k-i-delete"
                },                                                                      
            ], title: "&nbsp;", width: "60px", attributes: {style: "text-align:right;"} }
        ],
        noRecords: true,
        pageable: {
            previousNext: false,   
            numeric: false,
            alwaysVisible: true,
            pageSizes: [5,10,15] 
        },
        editable: {
            mode: "inline",  
            createAt: "bottom"
        },
        edit: function(e) {
            var model = e.model,
                container = e.container,
                nummer = parseInt(jq("#inline_grid").data("kendoGrid")._data[jq("#inline_grid").data("kendoGrid")._data.length - 2].field1) + 1;

            jq("#inline_grid tbody").find("tr.k-state-selected").removeClass("k-state-selected k-state-selecting");  

            /* field1 */if(e.model.isNew() && !e.model.dirty) {
                e.container
                    .find("input[name=field1]")
                    .val(nummer)
                    .change();
            }                 

            if(copyBool) {
                e.model.set("field2", field2);
                e.model.set("field3", field3);
                e.model.set("field4", field4);
                e.model.set("field5", field5);
                e.model.set("field6", field6);
                
                copyBool = false;
            }   
            ...                            
        },
        save: function(e) {
            $("model").value = "test";
            $("nr").value = e.model.field1;
            $("active").value = e.model.field2;
            $("art").value  = e.model.field3;
            $("description").value = e.model.field4;
            $("comment").value = e.model.field5;
            $("processed").value = e.model.field6;

            ...
        },
        remove: function(e) {
            $("model").value = "test"; 
            $("nr").value = e.model.field1; 
            
            ...
        }
    });
    
    var inline_grid = jq("#inline_grid").data("kendoGrid");  

    function textEditor(container,options) {
        jq('<input data-value-update="input" type="text" class="k-textbox k-valid" id="' + options.field + '" name="' + options.field + '" maxlength="30" autocomplete="off" data-bind="value:' + options.field + '"/>')
            .appendTo(container);
    }
    
    function cbEditor(container,options) {
        jq('<input type="checkbox" class="k-checkbox" id="' + options.field + '" name="' + options.field + '" value="yes"/>')
            .appendTo(container);
    }
    
    function ddlEditor(container,options) {
        jq('<input id="ddl_' + options.field + '" data-text-field="field1" data-value-field="field1" data-bind="value:' + options.field + '"/>')
            .appendTo(container)
            .kendoDropDownList({
                dataTextField: "field1",
                dataValueField: "field1",
                autoBind: false,
                dataSource: {
                    transport: {
                        read: {
                            url: "GetJsonData_Grid.p",
                            data: {
                                "function": "testfunction",
                                "element": "ddl",
                                "param1": "testparam1"
                            }
                        },
                        dataType: "json"
                    },
                    schema:{
                        data: "data",
                        total: "recordsCount"
                    },
                    sort: {
                        field: "field1", dir: "asc"
                    }
                },
                optionLabel: "-- select --",  
                optionLabelTemplate:"<span style='color:gray;'>-- select --</span>",  
                filter: "startswith",
                filtering: function(e) {
                    var filterValue = e.filter != undefined ? e.filter.value : "";
                    e.preventDefault();
                    filtering("#ddl_" + options.field,filterValue,2);
                },
                headerTemplate: "<div> \
                                    <table> \
                                        <tr> \
                                            <td style='font-weight:bold;width:100px;'>Code</td> \
                                            <td style='font-weight:bold;width:200px;'>Description</td> \
                                        </tr> \
                                    </table> \
                                <div>",
                template:       "<div> \
                                    <table> \
                                        <tr> \
                                            <td style='width:100px;' nowrap>#= field1 #</td> \
                                            <td style='width:200px;' nowrap>#= field2 #</td> \
                                        </tr> \
                                    </table> \
                                <div>",
                autoWidth: true,
                change: function(e) {
                    ddl_value = this.value();
                    
                    // Tooltip 
                    e.sender.select(function (dataItem) {
                        if(dataItem.field1 == ddl_value) {
                            jq("[data-container-for=" + options.field + "] .k-widget.k-dropdown").prop("title", dataItem.field2);                                                
                            return (dataItem.field1 == ddl_value);
                        }
                    });                                         
                }
            });
    }; 
}); // jq(document).ready(function() {
       
            

Any idea what might be causing the typeError?

 

Thanks in advance,

Syian

[Georgi Denchev]

Hello, Syian,

Thank you for the provided details.

Unfortunately, without being able to run the code, I can provide only guesses as to what the cause of the issue may be.

The thing that stands out in the code snippet is the following line:

"rowid": $("rowid").value

I'm assuming you missed the selector symbol?

"rowid": $("#rowid").value

// or if it's a class

"rowid": $(".rowid").value

Going further down, this seems to also be the case in the "save" and "remove" events. You cannot pass plain strings in such way, JQuery() accepts a selector string or DOM elements:

https://api.jquery.com/jquery/ 

What is the value of the DropDownList when you attempt to make a selection?

change: function(e) {
      console.log(this.value());
}

Try commenting out the lines which have the above structure and see if the error goes away. Additionally if you could provide a small runnable dojo with sample data, I should be able to debug it and then return back to you with a possible fix.

Best Regards,
Georgi Denchev
Progress Telerik