How to use the GridView extension in a Full Screen mode (100% browser Width and Height)

This example is based on recommendations from the E3940: How to use the ASPxPageControl control in a Full Screen mode (100% browser Width and Height) Code Central example.

It illustrates how to use this technique in an ASP.NET MVC application and resize a DevExpress ASP.NET MVC extension (for example, GridView) to occupy the entire browser window (a Full Screen mode):

/Views/Shared/_Layout.cshtml:

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

Main View:

[JScript]
<script type="text/javascript">
    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);}</script>

@Html.Partial("TypedListDataBindingPartial", Model)

PartialView:

[C#]
@Html.DevExpress().GridView(settings=>{settings.Name="grid";settings.ClientSideEvents.Init="OnInit";settings.ClientSideEvents.EndCallback="OnEndCallback";...settings.Width=System.Web.UI.WebControls.Unit.Percentage(100);settings.Settings.ShowVerticalScrollBar=true;settings.SettingsPager.Mode=GridViewPagerMode.ShowAllRecords;}).Bind(Model).GetHtml()

See Also:
E1081: How to use the ASPxGridView control (with the enabled vertical scrollbar) in a Full Screen mode (100% browser Width and Height)
E3940: How to use the ASPxPageControl control in a Full Screen mode (100% browser Width and Height)