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>