Edit this page

Change the Width after Using AutoFitColumn Method over All Grid Columns

Environment

Product Progress Kendo UI Grid

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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy