Kendo Grid Showing error “Uncaught TypeError: Cannot read property 'template' of undefined ”

Question

Uncaught TypeError: Cannot read property 'template' of undefined

I am using a kendo grid .

I want to Disable a Column when I edit.(Not when I add a new record).Did write code when edit

function onEdit(e) {
    var indexCell = 1;
    var grid = $('#consumablesGrid').data('kendoGrid');


    if (e.model.id) { // when Editing the id is defined
        if (indexCell != 'undefined' && grid.columns[indexCell].title == "Consumable") {
            grid.closeCell();    
        }
    }
}

But it shows "Uncaught TypeError: Cannot read property 'template' of undefined " when executing grid.closeCell() .

For better understanding I am Including My full grid Condition.

function ConsumableManager() {
    $("#consumablesGrid").kendoGrid({
        dataSource: {

            transport: {
                read: {
                    url: "GetConsumablesGrid",
                    type: "POST",
                    contentType: "application/json",
                    dataType: "json"
                },

                update: {
                    url: "UpdateConsumables",
                    contentType: "application/json",
                    type: "POST",
                    dataType: "json",
                    complete: function (data) {
                        var result = jQuery.parseJSON(data.responseText);

                        if (result.State == true) {
                            toastr.success(result.Description);
                            $("#consumablesGrid").data("kendoGrid").dataSource.read();
                        }
                        else {
                            toastr.error(result.Description);
                            $("#consumablesGrid").data("kendoGrid").dataSource.read();
                        }
                    }

                },
                destroy: {
                    url: "DestroyConsumables",
                    contentType: "application/json",
                    type: "POST",
                    dataType: "json",
                    complete: function (data) {
                        var result = jQuery.parseJSON(data.responseText);

                        if (result.State == true) {
                            toastr.success(result.Description);
                            $("#consumablesGrid").data("kendoGrid").dataSource.read();
                        }
                        else {
                            toastr.error(result.Description);
                        }
                    }
                },
                create: {
                    url: "CreateConsumables",
                    contentType: "application/json",
                    type: "POST",
                    dataType: "json",
                    complete: function (data) {
                        var result = jQuery.parseJSON(data.responseText);

                        if (result.State == true) {
                            toastr.success(result.Description);
                            $("#consumablesGrid").data("kendoGrid").dataSource.read();
                        }
                        else {
                            toastr.error(result.Description);
                        }
                    }
                },
                parameterMap: function (data, operation) {
                    if (operation != "read") {
                        return kendo.stringify(data.models);
                    }

                }
            },

            serverPaging: false,
            pageSize: 10,
            batch: true,

            schema: {
                model: {
                    id: "ConsumablesID",
                    fields: {
                        ConsumablesID: { editable: false },
                        Consumable: { editable: true },
                        UnitCost: { editable: true },
                        Currency: { editable: true },
                        ContractID: { editable: false }
                    }
                },
                errors: "Errors"
            },

            error: function (e) {
                alert(e.errors + "grid");
            }
        },
        editable:
            {
                mode: "inline",
                createAt: "bottom"
            },
        pageable: {
            refresh: true,
            pageSizes: true
        },
        toolbar: ["create"],
        sortable: true,
        autoBind: false,

        edit: function (e) {
            alert("Edit");
            onEdit(e);
        },
        update: function (e) {

        },
        columns:
        [

            { field: "ConsumablesID", width: 50, hidden: true, title: "ID" },
            { field: "Consumable", width: 200, title: "Consumable", editor: ConsumablesDropDownEditor },
            { field: "UnitCost", width: 100, title: "Unit Cost" },
            { field: "Currency", width: 200, title: "Currency", editor: CurrencyUnitDropDownEditor },
             { field: "ContractID", width: 85, hidden: true, title: "ContractID" },

            { command: ["edit", "destroy"], title: "Action", width: "175px" }
        ]
    });


    $("#consumablesGrid").data("kendoGrid").dataSource.read();
}

Anyone have Idea Why this happened.How can I do that Please response.

1.I've a grid

2.I want to editable (False) when edit (Not in add)

Answer 1

You probably have too new a jquery version: http://docs.telerik.com/kendo-ui/getting-started/javascript-dependencies#jquery-version

Answer 2

Current Kendo UI supports jquery 1.9.1. If you use later versions of jquery with kendo you may face issue with closeCell().

To fix(work around) this issue you can use

$('#consumablesGrid').getKendoGrid().trigger('cancel')

instead of grid.closeCell()

Answer 3

It's depend of jquery versions . To avoid this problem you can use this script

function onEdit(e) {
    if (!e.model.isNew() && (e.model != 'undefined') && (e.model != null)) {
        e.container.find("input[name=GroupName]").hide(); // To hide only the value of the column when updating the row
      //  e.container.find("#GroupName").parent().hide().prev().hide(); //to hide completely the column (value + structure + title name)
    }    
}