Post
Ask Question

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
  1. Basic knowledge in Kendo UI framework  
  2. 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 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.   
  17.     <div id="grid" ></div>  
  18.     <script>  
  19. $("#grid").kendoGrid({  
  20.     selectable: "multiple cell",  
  21.     allowCopy: true,  
  22.     columns: [  
  23.         { field: "Name" },  
  24.         { field: "Category" }  
  25.     ],  
  26.     dataSource: [  
  27.         { Name: "Tea", Category: "Beverages" },  
  28.         { Name: "Coffee", Category: "Beverages" },  
  29.         { Name: "Ham", Category: "Food" },  
  30.         { Name: "Bread & Jam", Category: "Food" }  
  31.     ]  
  32. });  
  33.   
  34. }  
  35.     </script>  
  36. </body>  
  37. </html>  
Result


Figure 1
 
Kendo Grid with auto fit column 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8" />  
  5.     <title>Kendo UI Snippet</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.common.min.css" />  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.rtl.min.css" />  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.silver.min.css" />  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.3.1028/styles/kendo.mobile.all.min.css" />  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.12.4.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2016.3.1028/js/kendo.all.min.js"></script>  
  14. </head>  
  15. <body>  
  16.   
  17.     <div id="grid" ></div>  
  18.     <script>  
  19. $("#grid").kendoGrid({  
  20.     selectable: "multiple cell",  
  21.     allowCopy: true,  
  22.     dataBound: onDataBound,  
  23.     columns: [  
  24.         { field: "Name" },  
  25.         { field: "Category" }  
  26.     ],  
  27.     dataSource: [  
  28.         {  Name: "Tea", Category: "Beverages" },  
  29.         {  Name: "Coffee", Category: "Beverages" },  
  30.         {  Name: "Ham", Category: "Food" },  
  31.         {  Name: "Bread & Jam", Category: "Food" }  
  32.     ]  
  33. });  
  34. function onDataBound()  
  35. {  
  36.     var grid = $("#grid").data("kendoGrid");  
  37.     for (var i = 0; i < grid.columns.length; i++) {  
  38.         grid.autoFitColumn(i);  
  39.     }  
  40.   
  41. }  
  42.     </script>  
  43. </body>  
  44. </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.
Next Recommended Reading Get Column Name Of The Selected Cell In Kendo Grid Using jQuery