Most Common Kendo Grid Issues In ASP.NET C#

Here, we will learn about the most common issues faced in Kendo Grid and how to solve it in ASP.NET MVC.

You can also check my previous article on Kendo Grid Server side Pagination with sorting and filtering using ASP.NET MVC5 from here.

1. All Data Contain in Singel Line

If Column Data is too larger and Your text wrap up in the next Column. If you want to set the width of the Column to contain Data(All Data Contain in Singel Line).

You Can Use AutoFitColumn() Function In DataBound

JS File KendoGrid Code: { dataBound : fitAllColumn }

function fitAllColumn() {
    var grid = $("#grid").data("kendoGrid");
    for (var i = 0; i < grid.columns.length-1; i++) {
           grid.autoFitColumn(i);
    }
}

2. Last Column Resize Issue

Solution: This Function Remove Trailing Space When Resizing Grid Columns

JS File KendoGrid Code: { columnResize: adjustLastColumn }

function getMasterColumnsWidth(tbl) {
       var result = 0;
       tbl.children("colgroup").find("col").not(":last").each(function (idx, element) {
           result += parseInt($(element).outerWidth() || 0, 10);
       });

       return result;
   }

   function adjustLastColumn() {
       var grid = $("#grid").data("kendoGrid");
       var contentDiv = grid.wrapper.children(".k-grid-content");
       var masterHeaderTable = grid.thead.parent();
       var masterBodyTable = contentDiv.children("table");
       var gridDivWidth = contentDiv.width() - kendo.support.scrollbar();

       masterHeaderTable.width("");
       masterBodyTable.width("");

       var headerWidth = getMasterColumnsWidth(masterHeaderTable),
           lastHeaderColElement = grid.thead.parent().find("col").last(),
           lastDataColElement = grid.tbody.parent().children("colgroup").find("col").last(),
           delta = parseInt(gridDivWidth, 10) - parseInt(headerWidth, 10);

       if (delta > 0) {
           delta = Math.abs(delta);
           lastHeaderColElement.width(delta);
           lastDataColElement.width(delta);
       } else {
           lastHeaderColElement.width(0);
           lastDataColElement.width(0);
       }

       contentDiv.scrollLeft(contentDiv.scrollLeft() - 1);
       contentDiv.scrollLeft(contentDiv.scrollLeft() + 1);
   }

3. Adjust All Column Width And Horizontal scroll Appear In Kendo Grid

JS File KendoGrid Code: { databound : FunctionName }

function AdjustColumnWidth() {
            var grid = $("#grid").data("kendoGrid");
            var columns = $("#grid").data("kendoGrid").columns;
            var totalWidth = $('#grid').width();
            var visibleColumnsWidth = 0;
            var visibleColumnsCount = 0;

            var visibleColumnsWidthAll = [70];
            $.each(columns, function (index) {
                if (!this.hidden) {
                    if (grid.table[0].rows.length) {
                        if (typeof grid.table[0].rows[0].cells[index] != "undefined") {
                            visibleColumnsWidth += grid.table[0].rows[0].cells[index].offsetWidth;
                            visibleColumnsCount += 1;
                            if (index > 0) {
                                visibleColumnsWidthAll.push(grid.table[0].rows[0].cells[index].offsetWidth);
                            }
                        }
                    }
                }
            });
            if (visibleColumnsWidth < totalWidth) {
                var diff = totalWidth - visibleColumnsWidth;
                var toAdd = diff / (visibleColumnsCount - 1);
                var tableCol = 1;
                $.each(columns, function (i) {
                    if (!this.hidden && i != 0) {
                        $("#grid .k-grid-header-wrap").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);
                        $("#grid .k-grid-content").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);
                        tableCol += 1;
                    }
                });
            }
        }

4. If You Face This Issues When Column Resize:

JS File KendoGrid Code: { columnResize: AdjustColumnWidth }

function AdjustColumnWidth() {
            var grid = $("#grid").data("kendoGrid");
            var columns = $("#grid").data("kendoGrid").columns;
            var totalWidth = $('#grid').width();
            var visibleColumnsWidth = 0;
            var visibleColumnsCount = 0;

            var visibleColumnsWidthAll = [70];
            $.each(columns, function (index) {
                if (!this.hidden) {
                    if (grid.table[0].rows.length) {
                        if (typeof grid.table[0].rows[0].cells[index] != "undefined") {
                            visibleColumnsWidth += grid.table[0].rows[0].cells[index].offsetWidth;
                            visibleColumnsCount += 1;
                            if (index > 0) {
                                visibleColumnsWidthAll.push(grid.table[0].rows[0].cells[index].offsetWidth);
                            }
                        }
                    }
                }
            });
            if (visibleColumnsWidth < totalWidth) {
                var diff = totalWidth - visibleColumnsWidth;
                var toAdd = diff / (visibleColumnsCount - 1);
                var tableCol = 1;
                $.each(columns, function (i) {
                    if (!this.hidden && i != 0) {
                        $("#grid .k-grid-header-wrap").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);
                        $("#grid .k-grid-content").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);
                        tableCol += 1;
                    }
                });
            }
        }

If you use the AdjustColumnWidth() Function then Horizontal scroll Appear In Kendo Grid.

Let me know if you have faced and other issues in Kendo Grid.