Create and Use Auto Layout in the Grid
Environment
Product | Progress® Kendo UI® Grid for jQuery |
Preferred Language | JavaScript |
Description
How can I create an auto layout for the Kendo UI Data Grid?
Solution
The auto layout requires you to disable the scrolling functionality of the Grid.
<style>
html
{
font: 12px sans-serif;
}
.k-grid
{
width: 500px;
}
#grid3
{
display: inline-block;
width: auto;
}
#grid3 table
{
width: auto;
}
</style>
<p><strong>N.B: Auto layout requires disabled Grid scrolling.</strong></p>
<h3>No column widths, auto layout</h3>
<div id="grid1"></div>
<h3>One narrow column with other wide columns, auto layout</h3>
<div id="grid2"></div>
<h3>Minimal Grid with auto layout.</h3>
<div id="grid3"></div>
<script>
var gridConfig = {
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
},
schema: {
model: {
fields: {
OrderID: { type: "number" },
Freight: { type: "number" },
OrderDate: { type: "date" }
}
}
},
pageSize: 5,
serverPaging: true,
serverFiltering: true,
serverSorting: true
},
scrollable: false,
sortable: true,
pageable: {numeric:false, info:false}
};
$("#grid1").kendoGrid($.extend(gridConfig, {
columns: [{
field: "OrderID"
}, {
field: "Freight"
}, {
field: "OrderDate",
format: "{0:MM/dd/yyyy}"
}]
}));
$("#grid2").kendoGrid($.extend(gridConfig, {
columns: [{
field: "OrderID"
}, {
field: "Freight",
width: 75
}, {
field: "OrderDate",
format: "{0:MM/dd/yyyy}"
}]
}));
$("#grid3").kendoGrid($.extend(gridConfig, {
columns: [{
field: "OrderID"
}, {
field: "Freight"
}, {
field: "OrderDate",
format: "{0:MM/dd/yyyy}"
}]
}));
</script>