Post
Ask Question

Enable Column Re Size Functionality in Kendo Grid

Enabling the column re size in Kendo gird is simply and easy to implement by using the resizable property.
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="utf-8">  
  5.     <title>Untitled</title>  
  6.   
  7.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.common.min.css">  
  8.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.rtl.min.css">  
  9.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.default.min.css">  
  10.     <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.3.930/styles/kendo.mobile.all.min.css">  
  11.   
  12.     <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>  
  13.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/angular.min.js"></script>  
  14.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/jszip.min.js"></script>  
  15.     <script src="http://kendo.cdn.telerik.com/2015.3.930/js/kendo.all.min.js"></script>  
  16. </head>  
  17. <body>  
  18.     <div id="grid"></div>  
  19.     <script>  
  20.         $(document).ready(function () {  
  21.   
  22.           
  23. $("#grid").kendoGrid({  
  24.     selectable: "multiple cell",  
  25.     allowCopy: true,  
  26.     resizable:true,  
  27.      pageable: {  
  28.                     refresh: true,  
  29.                     pageSizes: true,  
  30.                       
  31.                 },  
  32.     filterable:true,  
  33.     columns: [  
  34.         { field: "productName" },  
  35.         { field: "category" }  
  36.     ],  
  37.     dataSource: [  
  38.         { productName: "Tea", category: "Beverages" },  
  39.         { productName: "Coffee", category: "Beverages" },  
  40.         { productName: "Ham", category: "Food" },  
  41.         { productName: "Bread", category: "Food" },  
  42.         { productName: "Chocolate", category: "Food" },  
  43.         { productName: "Cake", category: "Food" }  
  44.     ]  
  45. });  
  46.   
  47.         })  
  48.          </script>  
  49. </body>  
  50. </html>