Grid View for ASP.NET Web Forms - How to display the Grid View in the full screen mode (100% width and height)
This example demonstrates how to set the size of the Grid View control to the size of the browser window.
Follow the steps below to display the ASPxGridView control in the full screen mode.
Set the body
element's paddings and margins to zero.
body, html {
padding: 0;
margin: 0;
}
Set the VerticalScrollBarMode property to Visible
to show the vertical scrollbar.
<dx:ASPxGridView runat="server" ID="gridView" ClientInstanceName="grid" Width="100%" DataSourceID="ds" KeyFieldName="OrderID">
<SettingsPager PageSize="50" />
<Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="0" />
</dx:ASPxGridView>
Handle the Init and EndCallback events and call the SetHeight method to adjust the Grid View's height during initialization and after each callback.
function OnInit(s, e) {
AdjustSize();
}
function OnEndCallback(s, e) {
AdjustSize();
}
function AdjustSize() {
var height = Math.max(0, document.documentElement.clientHeight);
grid.SetHeight(height);
}
<dx:ASPxGridView runat="server" ID="gridView" ClientInstanceName="grid" Width="100%" DataSourceID="ds" KeyFieldName="OrderID">
<!-- ... --->
<ClientSideEvents Init="OnInit" EndCallback="OnEndCallback" />
</dx:ASPxGridView>
Place the ASPxGridView in a hidden container and show the container after initialization is completed.
function OnInit(s, e) {
// ...
document.getElementById("gridContainer").style.visibility = "";
}
<div id="gridContainer" style="visibility: hidden">
<dx:ASPxGridView runat="server" ID="gridView" ClientInstanceName="grid" Width="100%" DataSourceID="ds" KeyFieldName="OrderID">
<!-- ... --->
</dx:ASPxGridView>
</div>
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)