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.
CSSbody, html {
padding: 0;
margin: 0;
}
2. Add a Vertical Scroll Bar
Set the VerticalScrollBarMode property to Visible to show the vertical scrollbar.
Razor@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.
Razor@Html.DevExpress().GridView(settings => {
settings.Name = "grid";
settings.ClientSideEvents.Init = "OnInit";
settings.ClientSideEvents.EndCallback = "OnEndCallback";
// ...
}).Bind(Model).GetHtml()
JavaScriptfunction 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);
}
Files to Review
- HomeController.cs (HomeController.vb)
- Model.cs (Model.vb)
- Index.cshtml (Index.vbhtml)
- TypedListDataBindingPartial.cshtml (GridViewPartialView.vbhtml)
- _Layout.cshtml (_rootLayout.vbhtml)
Documentation
More Examples
Example Code
CS/Controllers/HomeController.cs
C#using System;
using System.Web.Mvc;
using CS.Models;
namespace CS.Controllers {
public class HomeController : Controller {
public ActionResult Index() {
if(Session["TypedListModel"] == null)
Session["TypedListModel"] = InMemoryModel.GetTypedListModel();
return View(Session["TypedListModel"]);
}
public ActionResult TypedListDataBindingPartial() {
return PartialView(Session["TypedListModel"]);
}
}
}
VB/Controllers/HomeController.vb
Visual BasicPublic Class HomeController
Inherits System.Web.Mvc.Controller
Public Function Index() As ActionResult
If Session("TypedListModel") Is Nothing Then
Session("TypedListModel") = InMemoryModel.GetTypedListModel()
End If
Return View(Session("TypedListModel"))
End Function
Public Function GridViewPartialView() As ActionResult
Return PartialView(Session("TypedListModel"))
End Function
End Class
CS/Models/Model.cs
C#using System;
using System.Data;
using System.Collections.Generic;
namespace CS.Models {
public class InMemoryModel {
const int DataItemsCount = 100;
public int ID { get; set; }
public string Text { get; set; }
public int Quantity { get; set; }
public decimal Price { get; set; }
public static List<InMemoryModel> GetTypedListModel() {
List<InMemoryModel> typedList = new List<InMemoryModel>();
Random randomizer = new Random();
for (int index = 0; index < DataItemsCount; index++) {
typedList.Add(new InMemoryModel() {
ID = index,
Text = "Text" + index.ToString(),
Quantity = randomizer.Next(1, 50),
Price = (decimal)Math.Round((randomizer.NextDouble() * 100), 2)
});
}
return typedList;
}
}
}
VB/Models/Model.vb
Visual BasicImports System
Imports System.Data
Imports System.Collections.Generic
Public Class InMemoryModel
Private Const DataItemsCount As Integer = 100
Private privateID As Integer
Public Property ID() As Integer
Get
Return privateID
End Get
Set(ByVal value As Integer)
privateID = value
End Set
End Property
Private privateText As String
Public Property Text() As String
Get
Return privateText
End Get
Set(ByVal value As String)
privateText = value
End Set
End Property
Private privateQuantity As Integer
Public Property Quantity() As Integer
Get
Return privateQuantity
End Get
Set(ByVal value As Integer)
privateQuantity = value
End Set
End Property
Private privatePrice As Decimal
Public Property Price() As Decimal
Get
Return privatePrice
End Get
Set(ByVal value As Decimal)
privatePrice = value
End Set
End Property
Public Shared Function GetTypedListModel() As List(Of InMemoryModel)
Dim typedList As List(Of InMemoryModel) = New List(Of InMemoryModel)()
Dim randomizer As New Random()
For index As Integer = 0 To DataItemsCount - 1
typedList.Add(New InMemoryModel() With {.ID = index, .Text = "Text" & index.ToString(), .Quantity = randomizer.Next(1, 50), .Price = CDec(Math.Round((randomizer.NextDouble() * 100), 2))})
Next index
Return typedList
End Function
End Class
CS/Views/Home/Index.cshtml
Razor@model System.Collections.IEnumerable
<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)
VB/Views/Home/Index.vbhtml
Code@ModelType System.Collections.IEnumerable
<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;
GridView.SetHeight(height);
}
</script>
@Html.Partial("GridViewPartialView", Model)
CS/Views/Home/TypedListDataBindingPartial.cshtml
Razor@Html.DevExpress().GridView(settings => {
settings.Name = "grid";
settings.CallbackRouteValues = new { Controller = "Home", Action = "TypedListDataBindingPartial" };
settings.KeyFieldName = "ID";
settings.Columns.Add("ID");
settings.Columns.Add("Text");
settings.Columns.Add("Quantity");
settings.Columns.Add("Price");
settings.ClientSideEvents.Init = "OnInit";
settings.ClientSideEvents.EndCallback = "OnEndCallback";
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100);
settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible;
settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords;
/*Unbound Columns*/
settings.Columns.Add(unboundColumn => {
unboundColumn.FieldName = "UniqueFieldName";
unboundColumn.UnboundType = DevExpress.Data.UnboundColumnType.Decimal;
});
/**/
/*Unbound Column Calculating*/
settings.CustomUnboundColumnData = (sender, e) => {
if(e.Column.FieldName == "UniqueFieldName") {
int quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"));
decimal price = (decimal)e.GetListSourceFieldValue("Price");
e.Value = quantity * price;
}
};
/**/
}).Bind(Model).GetHtml()
VB/Views/Home/GridViewPartialView.vbhtml
Code@* DXCOMMENT: Configure GridView *@
@Html.DevExpress().GridView(Sub(settings)
settings.Name = "GridView"
settings.CallbackRouteValues = New With {Key .Controller = "Home", Key .Action = "GridViewPartialView"}
settings.KeyFieldName = "ID"
settings.Columns.Add("ID")
settings.Columns.Add("Text")
settings.Columns.Add("Quantity")
settings.Columns.Add("Price")
settings.ClientSideEvents.Init = "OnInit"
settings.ClientSideEvents.EndCallback = "OnEndCallback"
settings.Width = System.Web.UI.WebControls.Unit.Percentage(100)
settings.Settings.VerticalScrollBarMode = ScrollBarMode.Visible
settings.SettingsPager.Mode = GridViewPagerMode.ShowAllRecords
'Unbound Columns
settings.Columns.Add(
Sub(unboundColumn)
unboundColumn.FieldName = "UniqueFieldName"
unboundColumn.UnboundType = DevExpress.Data.UnboundColumnType.Decimal
End Sub)
'Unbound Column Calculating
settings.CustomUnboundColumnData =
Sub(sender, e)
If (e.Column.FieldName = "UniqueFieldName") Then
Dim quantity = Convert.ToInt32(e.GetListSourceFieldValue("Quantity"))
Dim price = CType(e.GetListSourceFieldValue("Price"), Decimal)
e.Value = quantity * price
End If
End Sub
End Sub).Bind(Model).GetHtml()