Auto Fit Column In Kendo Grid

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

Result

Figure 2

By comparing Figure 1 and 2, you can observe the change in the column width of the grid, whereas in Figure 2, it is auto fit based on the content.

I hope you have enjoyed this blog. Your valuable feedback, questions, or comments about this blog are always welcome.

5 Comments

Join the conversation! Your thoughts help the community grow.

Ramaswamy S8y ago
Hi how to open a pop-up on clicking a button of another pop-up in DNN module?
Guest User9y ago
Hi! What is the minimum version for autoFit? Because I'm running 2014 and I cannot use it. Thanks!
- Gowtham K9y ago
  This feature is available from 2015 R1 SP1 release
Neha9y ago
Nice one....................................
- Gowtham K9y ago
  Thanks a lot for a valuable comment Neha:)