BuyLog In
Example E1081
Visible to All Users

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.

Full screen grid

Overview

Follow the steps below to display the ASPxGridView control in the full screen mode.

1. Remove Margins

Set the body element's paddings and margins to zero.

CSS
body, html  {  
    padding: 0;  
    margin: 0;  
}

2. Add a Vertical Scroll Bar

Set the VerticalScrollBarMode property to Visible to show the vertical scrollbar.

ASPx
<dx:ASPxGridView runat="server" ID="gridView" ClientInstanceName="grid" Width="100%" DataSourceID="ds" KeyFieldName="OrderID">  
    <SettingsPager PageSize="50" />  
    <Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="0" />  
</dx:ASPxGridView>

3. Set the Control's Height

Handle the Init and EndCallback events and call the SetHeight method to adjust the Grid View's height during initialization and after each callback.

ASPx
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>

4. Hide the Resizing from Users

Place the ASPxGridView in a hidden container and show the container after initialization is completed.

ASPx
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>

Files to Look At

Documentation

More Examples

Example Code

Default.aspx 
ASPx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<%@ Register Assembly="DevExpress.Web.v21.2, Version=21.2.13.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
    Namespace="DevExpress.Web" TagPrefix="dx" %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body, html {
            padding: 0;
            margin: 0;
        }
    </style>
    <script type="text/javascript">
        function OnInit(s, e) {
            AdjustSize();
            document.getElementById("gridContainer").style.visibility = "";
        }
        function OnEndCallback(s, e) {
            AdjustSize();
        }
        function OnControlsInitialized(s, e) {
            ASPxClientUtils.AttachEventToElement(window, "resize", function (evt) {
                AdjustSize();
            });
        }
        function AdjustSize() {
            var height = Math.max(0, document.documentElement.clientHeight);
            grid.SetHeight(height);
        }
    </script>
</head>
<body style="overflow: hidden">
    <form id="form1" runat="server">
        <div id="gridContainer" style="visibility: hidden">
            <dx:ASPxGridView runat="server" ID="gridView" ClientInstanceName="grid" AutoGenerateColumns="true"
                Width="100%" DataSourceID="ds" KeyFieldName="OrderID" OnHtmlRowCreated="gridView_HtmlRowCreated">
                <SettingsPager PageSize="50" />
                <Settings VerticalScrollBarMode="Visible" VerticalScrollableHeight="0" />
                <ClientSideEvents Init="OnInit" EndCallback="OnEndCallback" />
            </dx:ASPxGridView>
        </div>
        <asp:AccessDataSource ID="ds" runat="server" DataFile="~/App_Data/nwind.mdb" SelectCommand="SELECT TOP 200 * FROM [Orders]"></asp:AccessDataSource>
        <dx:ASPxGlobalEvents ID="ge" runat="server">
            <ClientSideEvents ControlsInitialized="OnControlsInitialized" />
        </dx:ASPxGlobalEvents>

    </form>
</body>
</html>
Default.aspx.cs(vb) 
C#
using System;
using System.Threading;

public partial class _Default : System.Web.UI.Page {
    protected void Page_Load(object sender, EventArgs e) {
    }

    protected void gridView_HtmlRowCreated(object sender, DevExpress.Web.ASPxGridViewTableRowEventArgs e) {
       // Thread.Sleep(100);
    }
}

Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.