Auto Fit Column In Kendo Grid

Gowtham K
7y
7.7k
0
1
25
Blog

GridColumn.rar

Introduction

Today, I came across one scenario, where I'm using Kendo Grid with the data bound in it and my requirement was to resize the column based on the content length in the column field, which can be done with ease, using the data bound event with autoFitColumn function in the grid.

Please refer to the link given below to get the basic idea about Kendo Grid and its events

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

Prerequisites

Basic knowledge in Kendo UI framework
jQuery

Kendo Grid with Auto fit column

I have created one sample grid to demo, how to resize the column width based on the content length in Kendo Grid with the help of autoFitColumn function.

Create one new HTML page. In my case, I named it as kendoColumn.html. Write the code given below in it

Kendo Grid without auto fit column

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid" ></div>
<script>
$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: true,
columns: [
{ field: "Name" },
{ field: "Category" }
],
dataSource: [
{ Name: "Tea", Category: "Beverages" },
{ Name: "Coffee", Category: "Beverages" },
{ Name: "Ham", Category: "Food" },
{ Name: "Bread & Jam", Category: "Food" }
]
});
}
</script>
</body>
</html>

Result

Figure 1

Kendo Grid with auto fit column

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Kendo UI Snippet</title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />
<script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid" ></div>
<script>
$("#grid").kendoGrid({
selectable: "multiple cell",
allowCopy: true,
dataBound: onDataBound,
columns: [
{ field: "Name" },
{ field: "Category" }
],
dataSource: [
{ Name: "Tea", Category: "Beverages" },
{ Name: "Coffee", Category: "Beverages" },
{ Name: "Ham", Category: "Food" },
{ Name: "Bread & Jam", Category: "Food" }
]
});
function onDataBound()
{
var grid = $("#grid").data("kendoGrid");
for (var i = 0; i < grid.columns.length; i++) {
grid.autoFitColumn(i);
}
}
</script>
</body>
</html>

From the code given above, you can observe that the logic to resize the column width field is based on the content, which is written in data bound event with the help of autoFitColumn function in Kendo Grid