How Do I Wrap The Content Of The Kendo Grid Header When We Change The Size Of The Grid

Here, we will learn well-nigh the most mutual issues faced in Kendo Grid and how to solve it in ASP.NET MVC.

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

1. All Data Contain in Singel Line

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

You Tin can Use AutoFitColumn() Office In DataBound

JS File KendoGrid Code: { dataBound : fitAllColumn }

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

two. Terminal 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) {            outcome += parseInt($(element).outerWidth() || 0, 10);        });         return result;    }     role adjustLastColumn() {        var filigree = $("#filigree").data("kendoGrid");        var contentDiv = grid.wrapper.children(".k-grid-content");        var masterHeaderTable = filigree.thead.parent();        var masterBodyTable = contentDiv.children("tabular array");        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 Lawmaking: { databound : FunctionName }

part AdjustColumnWidth() {             var grid = $("#grid").data("kendoGrid");             var columns = $("#grid").data("kendoGrid").columns;             var totalWidth = $('#grid').width();             var visibleColumnsWidth = 0;             var visibleColumnsCount = 0;              var visibleColumnsWidthAll = [lxx];             $.each(columns, function (index) {                 if (!this.hidden) {                     if (grid.tabular array[0].rows.length) {                         if (typeof filigree.table[0].rows[0].cells[index] != "undefined") {                             visibleColumnsWidth += grid.table[0].rows[0].cells[index].offsetWidth;                             visibleColumnsCount += 1;                             if (index > 0) {                                 visibleColumnsWidthAll.button(grid.table[0].rows[0].cells[index].offsetWidth);                             }                         }                     }                 }             });             if (visibleColumnsWidth < totalWidth) {                 var unequal = totalWidth - visibleColumnsWidth;                 var toAdd = unequal / (visibleColumnsCount - 1);                 var tableCol = 1;                 $.each(columns, function (i) {                     if (!this.hidden && i != 0) {                         $("#grid .thousand-grid-header-wrap").observe("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);                         $("#grid .k-grid-content").find("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);                         tableCol += one;                     }                 });             }         }

4. If You Face This Issues When Column Resize:

JS File KendoGrid Lawmaking: { columnResize: AdjustColumnWidth }

function AdjustColumnWidth() {             var filigree = $("#filigree").information("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 (filigree.tabular array[0].rows.length) {                         if (typeof grid.table[0].rows[0].cells[index] != "undefined") {                             visibleColumnsWidth += grid.table[0].rows[0].cells[alphabetize].offsetWidth;                             visibleColumnsCount += 1;                             if (index > 0) {                                 visibleColumnsWidthAll.push button(grid.table[0].rows[0].cells[alphabetize].offsetWidth);                             }                         }                     }                 }             });             if (visibleColumnsWidth < totalWidth) {                 var diff = totalWidth - visibleColumnsWidth;                 var toAdd = diff / (visibleColumnsCount - i);                 var tableCol = 1;                 $.each(columns, function (i) {                     if (!this.hidden && i != 0) {                         $("#grid .k-grid-header-wrap").discover("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);                         $("#grid .k-grid-content").discover("colgroup col").eq(tableCol).width(visibleColumnsWidthAll[tableCol] + toAdd);                         tableCol += i;                     }                 });             }         }

If you utilize the AdjustColumnWidth() Function and so Horizontal whorl Appear In Kendo Grid.