Kendo Grid Showing error “Uncaught TypeError: Cannot read property ‘template’ of undefined “

kendo-gridkendo-ui

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)

Best Answer

Related Topic