Knowledgebase

I was getting the error: TypeError: Cannot read property ‘sortable’ of undefined.

This was caused by dynamically changing Kendo UI grid columns, without destroying the grid first.

After I destroyed the grid and recreated it, the error was resolved.

To destroy a Kendo UI grid and later recreate it, use:

// Destroy kendo UI grid.
        // Must destroy and empty grid before refreshing columns.
        $('#crudGrid').data().kendoGrid.destroy();
        $('#crudGrid').empty();

        // Create Kendo UI grid.
        $('#crudGrid').kendoGrid({
            dataSource: {
                data: products,
                schema: {
                    model: {
                        fields: {
                            ProductName: { type: "string" },
                            UnitPrice: { type: "number" },
                            UnitsInStock: { type: "number" },
                            Discontinued: { type: "boolean" }
                        }
                    }
                },
                pageSize: 20
            },
            height: 430,
            scrollable: true,
            sortable: true,
            filterable: true,
            pageable: {
                input: true,
                numeric: false
            },
            columns: [
                "ProductName",
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                { field: "Discontinued", width: "130px" }
            ]
        });