devexpress-examples / mvc-gridview-full-screen-mode Goto Github PK

View Code? Open in Web Editor NEW

Adjust the size of the Grid View extension to the size of the browser window.

License: Other

C# 26.06% HTML 17.78% ASP.NET 1.22% Visual Basic .NET 54.94%

mvc-gridview-full-screen-mode's Introduction

Grid View for ASP.NET MVC - How to display the Grid View in full screen mode (100% width and height)

This example demonstrates how to adjust the size of the Grid View extension to the size of the browser window.

Overview

Follow the steps below to display the GridViewExtension in full screen mode.

1. Remove Margins

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

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

2. Add a Vertical Scroll Bar

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

@Html.DevExpress().GridView(settings => {
    settings.Name = "grid";
    settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
    // ...
    settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
}).Bind(Model).GetHtml()

3. Set the Control's Height

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

@Html.DevExpress().GridView(settings => {
    settings.Name = "grid";
    settings.ClientSideEvents.Init = "OnInit";
    settings.ClientSideEvents.EndCallback = "OnEndCallback";
    // ...
}).Bind(Model).GetHtml()

function OnInit(s, e) {
    AdjustSize();
    ASPxClientUtils.AttachEventToElement(window, "resize", function (evt) {
        AdjustSize();
    });
}
function OnEndCallback(s, e) {
    AdjustSize();
}
function AdjustSize() {
    var height = document.documentElement.clientHeight;
    grid.SetHeight(height);
}