New to Kendo UI for jQuery? Download free 30-day trial

Change the Width after Using AutoFitColumn Method over All Grid Columns


Product Progress® Kendo UI® Grid for jQuery


How can I change the width of the Grid after using the autoFitColumn method for all Grid columns?


When the Grid is rendered and you execute the autoFitColumn method over all of its columns: 1. Retrieve the calculated total width of the columns 1. If scrolling is enabled, include the scrollbar width. 1. Manually set that total to the wrapping element of the Grid.

<div id="example">
            <table id="grid">
                     <th data-field="col1">Size</th>
                     <th data-field="col2">TKN (N.m)</th>
                     <th data-field="col3">L (mm)</th>
                     <th data-field="col4">Ø A (mm)</th>                    
                    <td data-label="Size">KB2/1</td>
                    <td data-label="TKN (N.m)">0.1</td>
                    <td data-label="L (mm)">25</td>
                    <td data-label="Ø A (mm)">10</td>                    
                    <td data-label="RowProduct">2</td>
                    <td data-label="Size">KB2/5</td>
                    <td data-label="TKN (N.m)">0.5</td>
                    <td data-label="L (mm)">21</td>                    
                $(document).ready(function() {
                        sortable: true,
                      filterable: true
                  var grid = $("#grid").data("kendoGrid");                  
                  for (var i = 0; i < grid.columns.length; i++) {
                  var currentWrapperWidth = grid.element.parent().width();
                  var currentTableWidth = grid.element.width();
                  if(currentWrapperWidth > currentTableWidth)
                  grid.element.closest(".k-grid").width(currentTableWidth + 17);
In this article