Looking to achieve a fixed height and width for a Kendo grid, regardless of data size. Scrolling should be enabled if data exceeds the fixed dimensions.
The issue arises when the page initially loads with data, as the Kendo grid does not adhere to the specified fixed height and width. However, resizing the window causes the grid to conform to these dimensions and provide a scroll option within.
How can I ensure that the Kendo Grid maintains a fixed height upon initial loading?
Kendo Version: v2014.1.318
Code:
$("#ViewUnitContainerTracking").kendoGrid({
sortable: true,
height:"280px",
columns: [
{
field: "UnitCode",
title: "Unit",
width: "15%"
},
{
field: "UnitName",
title: "Unit Name",
width: "35%"
},
{
field: "Status",
title: "St",
width: "5%",
template: $("#TemplateViewUnitTrackingStatus").text()
},
{
field: "StartDate",
title: "Start Date",
//template: $("#TemplateViewUnitTrackingStartDate").text(),
width: "15%",
//type: "date"
},
{
field: "EndDate",
title: "End Date",
//template: $("#TemplateViewUnitTrackingEndDate").text(),
width: "15%",
//type: "date"
},
{
field: "AssessPrgress",
title: "%OAP",
width: "10%"
},
{
field: "Status",
title: "Status",
hidden: true
}
],
editable: false,
resizable: false,
mobile: true,
dataSource: data.UnitList
});
HTML Page:
<div id="ViewUnitContainerTracking" style="padding-top:10px;">
</div>