Change the Width after Using AutoFitColumn Method over All Grid Columns


Product Progress Kendo UI Grid


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
Not finding the help you need? Improve this article