Set Grid height in percentages
Environment
Product | Telerik WebForms Grid for ASP.NET AJAX |
Description
The artcile consists of 5 different scenarios, each delving into a possible solution to setting the Grid's height in percententage.
Solutution
Grid in Splitter
In order to set an element’s height in percentage unit (in this case the Grid) it is required all ascendant elements to have an explicit height in percent until an element with height in pixels is met.
In this case, only the RadPane needs to have an explicit height. If you want the whole Splitter to occupy 100% of the page, then set the Splitter’s height in percentage and follow the basic rule explained above.
<telerik:RadSplitter ID="RadSplitter1" runat="server" Height="100%" Orientation="Horizontal" Width="100%">
<telerik:RadPane ID="contentPane" Height="80%" runat="server" Scrolling="none">
<telerik:RadSplitter ID="RadSplitter2" runat="server" Orientation="Vertical">
<telerik:RadPane ID="topPane" Scrolling="None" runat="server">
<telerik:RadTreeView runat="server" RenderMode="Lightweight" ID="RadTreeView1">
<Nodes>
<telerik:RadTreeNode Text="Root 1" Expanded="true">
<Nodes>
<telerik:RadTreeNode Text="Child 1.1"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 1.2"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 1.3"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 1.4"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Root 2" Expanded="true">
<Nodes>
<telerik:RadTreeNode Text="Child 2.1"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 2.2"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 2.3"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 2.4"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
<telerik:RadTreeNode Text="Root 3" Expanded="true">
<Nodes>
<telerik:RadTreeNode Text="Child 3.1"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 3.2"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 3.3"></telerik:RadTreeNode>
<telerik:RadTreeNode Text="Child 3.4"></telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeNode>
</Nodes>
</telerik:RadTreeView>
</telerik:RadPane>
<telerik:RadSplitBar ID="RadSplitbar2" runat="server" CollapseMode="Forward" />
<telerik:RadPane ID="bottomPane" Scrolling="None" Height="100%" runat="server">
<telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" OnNeedDataSource="RadGrid1_NeedDataSource" AllowSorting="true">
<MasterTableView Width="100%" TableLayout="Fixed" AutoGenerateColumns="false">
<Columns>
<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"
FilterControlAltText="Filter OrderID column" HeaderText="OrderID"
ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">
</telerik:GridBoundColumn>
<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"
FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"
SortExpression="OrderDate" UniqueName="OrderDate">
</telerik:GridDateTimeColumn>
<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"
FilterControlAltText="Filter Freight column" HeaderText="Freight"
SortExpression="Freight" UniqueName="Freight">
</telerik:GridNumericColumn>
<telerik:GridBoundColumn DataField="ShipName"
FilterControlAltText="Filter ShipName column" HeaderText="ShipName"
SortExpression="ShipName" UniqueName="ShipName">
</telerik:GridBoundColumn>
<telerik:GridBoundColumn DataField="ShipCountry"
FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"
SortExpression="ShipCountry" UniqueName="ShipCountry">
</telerik:GridBoundColumn>
</Columns>
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadPane>
</telerik:RadSplitter>
</telerik:RadPane>
</telerik:RadSplitter>
Additionally, make sure you have included this CSS rule in the page styles:
<style>
html,
body,
form {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
Grid in TabStrip
The case is very similar to that with the Splitter, this time however the PageView that holds the Grid needs to have an explicit height too.
<telerik:RadTabStrip runat="server" ID="RadTabStrip" MultiPageID="RadMultiPage1" SelectedIndex="0">
<Tabs>
<telerik:RadTab Text="tab1" Selected="true"></telerik:RadTab>
<telerik:RadTab Text="tab3"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage runat="server" ID="RadMultiPage1">
<telerik:RadPageView runat="server" Height="700px" ID="RadPageView1" Selected="true" CssClass="PageView1">
Switch to the next tab and see how the grid is expanded and takes all the available space in the page view >>>
</telerik:RadPageView>
<telerik:RadPageView runat="server" Height="700px" ID="RadPageView2" CssClass="PageView2">
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="50" Height="100%"
AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView TableLayout="Fixed" Width="100%">
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadPageView>
</telerik:RadMultiPage>
<style>
html,
body,
form {
height: 100%;
margin: 0px;
padding: 0px;
}
</style>
Grid in RadAjaxPanel:
When the Grid is wrapped in a RadAjaxPanel, there are two wrapper div elemenets that are rendered around it. So, in order to set Grid’s height in percentage these two divs should also have heights in percentage.
To do that set the Height property of RadAjaxPanel, like shown in the demo and include the following CSS rules in the page styles:
<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" Height="100%">
<telerik:RadGrid ID="RadGrid1" Height="100%" runat="server"
AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Width="100%" TableLayout="Fixed">
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>
</telerik:RadAjaxPanel>
<style>
html,
body,
form {
height: 100%;
margin: 0px;
padding: 0px;
}
div.RadGrid {
border: 0 none;
}
</style>
Grid and RadAjaxManager
The situation is analogical for RadAjaxManager. This time however the UpdatePanelHeight property needs to be set in the ajax settings.
<telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
<AjaxSettings>
<telerik:AjaxSetting AjaxControlID="RadGrid1">
<UpdatedControls>
<telerik:AjaxUpdatedControl ControlID="RadGrid1" UpdatePanelHeight="100%" />
</UpdatedControls>
</telerik:AjaxSetting>
</AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadGrid ID="RadGrid1" Height="100%" runat="server" AllowPaging="true" PageSize="50"
AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView TableLayout="Fixed" Width="100%">
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>
<style>
html,
body,
form {
height: 100%;
margin: 0px;
padding: 0px;
}
div.RadGrid {
border: 0 none;
}
</style>
Grid on a page with header and footer.
It is very common scenario to have a header and footer on the page and you require the Grid to occupy the space between them. Also the Grid should resize correctly when the browser window is vertically expanded or shrank.
To achieve this, the only thing that needs to be done is to subtract the header and footer heights (including padding, margin and border) from window’s height and pass the result as grid height. The grid client object should be repainted on window resize event so it can recalculate its metrics properly when resized vertically.
<div class="header">This is a header</div>
<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="true" PageSize="50"
AllowSorting="true" OnNeedDataSource="RadGrid1_NeedDataSource">
<MasterTableView Width="100%" TableLayout="Fixed">
</MasterTableView>
<ClientSettings>
<Scrolling AllowScroll="true" UseStaticHeaders="true" />
</ClientSettings>
</telerik:RadGrid>
<div class="footer">This is a footer</div>
<script>
var $ = $telerik.$; // Make jQuery available through $ alias
function pageLoad() {
setGridHeight(); // Set grid's height on page load
}
$(window).resize(function(){
setGridHeight(); // Maintain grid's height on window resize
});
function setGridHeight() {
var headerHeight = $('.header').outerHeight(), // Header height including margin, padding and borders
footerHeight = $('.footer').outerHeight(), // Footer height including margin, padding and borders
windowHeight = $(window).height(), // Window height
gridObj = $find('<%= RadGrid1.ClientID%>'), // Grid's client object
gridHeight = windowHeight - (headerHeight + footerHeight + 2); // Calculate grid's height
$('#' + gridObj.get_id()).height(gridHeight); // Set grid's height to the calculated
gridObj.repaint(); // It is required to repaint the grid so it can recalculate its metrics after window resize
}
</script>
<style>
html,
body,
form {
height: 100%;
margin: 0px;
padding: 0px;
}
div.RadGrid {
border: 0 none;
}
</style>
All the databinding used for the Grids:
protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
(sender as RadGrid).DataSource = OrdersTable();
}
private DataTable OrdersTable()
{
DataTable dt = new DataTable();
dt.Columns.Add(new DataColumn("OrderID", typeof(int)));
dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));
dt.Columns.Add(new DataColumn("Freight", typeof(double)));
dt.Columns.Add(new DataColumn("ShipName", typeof(string)));
dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));
dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };
for (int i = 0; i < 100; i++)
{
int index = i + 1;
DataRow row = dt.NewRow();
row["OrderID"] = index;
row["OrderDate"] = DateTime.Now.Date.AddDays(index);
row["Freight"] = index * 0.01;
row["ShipName"] = "Name " + index;
row["ShipCountry"] = "Country " + index;
dt.Rows.Add(row);
}
return dt;
}