Resize to Match the Visible Column Widths When Hiding or Showing Grid Columns
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Preferred Language | JavaScript |
Description
How can I resize the Grid to match the visible column widths when hiding or showing columns while the sum of the column widths is less than the initial width of the Grid?
Solution
To achieve the desired scenario, use either of the following approaches:
Enforcing Minimum Width
To enforce a min-width style to the table element, use CSS:
<style>
#grid table {
min-width:100%;
}
</style>
<style>
#grid table {
min-width:100%;
}
</style>
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
sortable: true,
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country",
width: 320
}, {
field: "ShipName",
title: "Ship Name",
width: 320
}, {
field: "ShipAddress",
filterable: false,
width: 320
}
]
}).data('kendoGrid');
});
</script>
</div>
Looping through the Columns
This approach prevents the appearance of white space in the component when the sum of the widths of the visible columns is less than the initial width of the Grid.
- Store the initial width of the Grid in a variable.
- To call the method that performs the necessary calculations, use the
dataBound,columnShow, andcolumnHideevents.
To access and loop through the columns, the setGridWidth() method:
- Uses the
columnsfield of the Grid. - Calculates the sum of the visible column widths.
- Adds the width of the vertical scrollbar when necessary.
<div id="example">
<div id="grid"></div>
<script>
$(document).ready(function() {
var initialGridWidth;
function setGridWidth(e){
var cols = e.sender.columns;
var currentColWidth = cols.reduce(function(prev, cur){
if(!cur.hidden){
return prev += cur.width;
} else {
return prev;
}
}, 0);
if(currentColWidth > initialGridWidth){
e.sender.wrapper.width(initialGridWidth);
} else {
e.sender.wrapper.width(currentColWidth + kendo.support.scrollbar());
}
}
var grid = $("#grid").kendoGrid({
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
ShipCountry: { type: "string" },
ShipName: { type: "string" },
ShipAddress: { type: "string" }
}
}
},
pageSize: 30,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
height: 550,
sortable: true,
dataBound: function(e){
setGridWidth(e);
},
columnShow: function(e){
setGridWidth(e);
},
columnHide: function(e){
setGridWidth(e);
},
filterable: true,
columnMenu: true,
pageable: true,
columns: [ {
field: "OrderID",
title: "Order ID",
width: 120
}, {
field: "ShipCountry",
title: "Ship Country",
width: 320
}, {
field: "ShipName",
title: "Ship Name",
width: 320
}, {
field: "ShipAddress",
filterable: false,
width: 320
}
]
}).data('kendoGrid');
initialGridWidth = grid.wrapper.width();
});
</script>
</div>