Change the Width after Using AutoFitColumn Method over All Grid Columns

Environment

Product

Progress® Kendo UI® Grid for jQuery

Description

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

Solution

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">
                <colgroup>
                  <col><col><col><col>                  
                <thead>
                   <tr>                     
                     <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>                    
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <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>                    
                  </tr>
                  <tr>
                    <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>                    
              </tbody>
            </table>
            <script>
                $(document).ready(function() {
                    $("#grid").kendoGrid({                        
                        sortable: true,
                      scrollable:true,
                      resizable:true,
                      filterable: true
                    });
                  var grid = $("#grid").data("kendoGrid");                  
                  for (var i = 0; i < grid.columns.length; i++) {
                      grid.autoFitColumn(i);
                  }
                  var currentWrapperWidth = grid.element.parent().width();
                  var currentTableWidth = grid.element.width();
                  if(currentWrapperWidth > currentTableWidth)
                  grid.element.closest(".k-grid").width(currentTableWidth + 17);
                });
            </script>
        </div>