I have two functions on a page. One is onRefresh(), and fitToScreen(). When I press fit to screen, it will remove all predefined column widths and shrink the entire table, making it fit the screen. I also have On Refresh function which will refresh the grid after column level filters or sorting.

Now the problem is if I call onRefresh and then FitToScreen, then an exception is thrown. Meaning the Kendo grid throws an exception after calling dataSource.query() function.

As per my research, the following is what I found on Telerik Site. https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/query

enter image description here

onRefresh() {
    if (this.jobKendoGrid) {
        var sort = [{ field: "createdOn", dir: "desc" }]
        this.jobKendoGrid.dataSource.query({
            filter: {},
            sort: sort,
            pageSize: this.jobKendoGrid.dataSource.pageSize(),
            page: 1
        });
    }
}


public fitToScreen() {
        for (var i = 0; i < this.grid.columns.length; i++) {
            if (this.grid.columns[i].title && this.grid.columns[i].title != "Edit" && this.grid.columns[i].title != " ") {
                delete this.grid.columns[i].width;
            }
        }

        let options = this.grid.getOptions();

        this.grid.setOptions(options);
        if (this.grid.options.autoBind === false) {
            this.grid.refresh();
        }
    }

The way to overcome this problem, I can do the following

let options = this.grid.getOptions();
this.grid.setOptions(options);

Insert these two lines into Fit to screen function after column removal iteration. But still, I think this is an ugly Idea and not a direct answer to the problem. Is there anything else we need to do in dataSource.Query() function, Is there something I am missing as a parameter in this?

0 Answers