Kendo Grid sort is not working after redefining the columns

Question

Kendo Grid sort is not working after redefining the columns. My Code is as follows:

$("#divTableContent").kendoGrid({
            pageable: {
                input: true, //To input the pagenum
                numeric: false
            },
            dataBound: onDataBoundGrid,
            resizable: false,
            filterable: {
                filter: true,
                extra: false,
                operators: {
                    string: {
                        eq: "Is equal to",
                        contains: "Contains",
                    }
                }
            },
            sortable: {
                mode: "single",
                allowUnsort: true
            },
            dataSource: {
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true,

And my databound function is

function onDataBoundGrid(e) {
            var gridColumns = [];
            var tableContentGrid = $("#divTableContent").data("kendoGrid");
            debugger;
            for (var i = 0; i < tableContentGrid.columns.length; i++) {
                if (tableContentGrid.columns[i].field.indexOf("_") >= 0) {
                    var column = $.grep(seperatedColumnHeaders, function (item) {
                        return item == tableContentGrid.columns[i].field.replace(/_/g, ' ');
                    });
                    if (column.length > 0) {
                        // Pushing the field and title
                        gridColumns.push({ 'field': tableContentGrid.columns[i].field, 'title': tableContentGrid.columns[i].field.replace(/_/g, ' ') });
                    }
                    var column1 = $.grep(seperatedColumnHeaders, function (item) {
                        return item == tableContentGrid.columns[i].field;
                    });
                    if (column1.length > 0) {
                        // Pushing the field and title
                        gridColumns.push({ 'field': tableContentGrid.columns[i].field, 'title': tableContentGrid.columns[i].field.replace(/__/g, ',')} );
                    }
                    if (column.length == 0 && column1.length == 0) {
                        gridColumns.push({ 'field': tableContentGridHeaders[i], 'title': tableContentGridHeaders[i] });
                    }
                } else { 
                    // Pushing the field and title
                    gridColumns.push({ 'field': tableContentGrid.columns[i].field, 'title': tableContentGrid.columns[i].field });
                }
            }
            // Replacing the old grid columns with new grid columns
            tableContentGrid._columns(gridColumns);
            // Removing the old grid titles
            tableContentGrid.thead.empty();
            // It will replace with new grid titles
            tableContentGrid._thead();
        }

We are creating the columns dynamically and for removing the spaces in header i wrote the databound function. if i removing the databound Sort is working. If databound is there sort is not working and every time it is going to Controller like Ascending order.

Answer 1

Kendo's grid as a _columns property but the underscore in front of it mean it's there for internal purpose only. It ain't supported by Kendo and it has to be used carefully to avoid creating problem elsewhere.

As far as I know, you can't change the columns of a grid after it gets loaded. Adding, changing and deleting column has to be done prior to the grid initialization. However, you can still change the title of your column directly in the DOM if you need to.

The dataSource and the way you provide the data, schema and columns to your grid isn't specified in your example... if you can manage to get all your columns specifications before initializing your grid, you'll be able to implement the logic of the onDataBoundGrid function earlier in the process.