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.

        // Create Kendo UI grid.
            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: [
                { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: "130px" },
                { field: "UnitsInStock", title: "Units In Stock", width: "130px" },
                { field: "Discontinued", width: "130px" }


  1. Thank you so much! I’ve spent hours trying to debug this stupid error. I even manually removed everything that had to do with the .removeData() and was still getting this error.

  2. Thanks this helped me lot but I loss toolbar template on using .empty(). I was already having grid I just wanted to setDatasource on change of dropdown field. Everything is working just I am loosing toolbar template. If there is any simple way to keep it retained please provide.



Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.