Posted by: the telerik blogs, on 11 Nov 2009 | View original | NEW Bookmarked: 0 time(s)

In this blog post I will demonstrate how to squeeze the most from Telerik Grid for ASP.NET MVC when using Ajax binding.

Lets start with a simple grid bound to the Northwind Orders table:

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UsingDto.Models.Order>>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID).Width(100);
            columns.Add(o => o.Customer.ContactName).Width(200);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .Ajax(ajax => ajax.Action("_AjaxBinding", "Home"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
%>
<%= Html.Telerik().ScriptRegistrar() %>
</asp:Content>

Controller:

public class HomeController : Controller
{
 public ActionResult Index()
    {
 return View(GetOrders());
    }

    [GridAction]
 public ActionResult _AjaxBinding()
    {
 return View(new GridModel
        {
            Data = GetOrders()
        });
    }

 private IEnumerable<Order> GetOrders()
    {
        NorthwindDataContext northwind = new NorthwindDataContext();

 return northwind.Orders;
    }
}

Lets try this setup and go to the second page of the grid. FireBug reports that 6418 bytes have been transferred:

This is because all the properties of the Order object are serialized in JSON. Since we have a column which is using the Customer property of the Order all properties of the Customer object are serialized as well. Lets improve the payload size using the following ViewModel object:

public class OrderViewModel
{
 public int OrderID
    {
        get;
        set;
    }

 public string ContactName
    {
        get;
        set;
    }

 public string ShipAddress
    {
        get;
        set;
    }

 public DateTime? OrderDate
    {
        get;
        set;
    }
}

It contains only the properties relevant in this particular grid configuration. By using it we will serialize only the important data thus improving the total size of the Ajax request. Here is

the updated configuration:

View:

<%@ Page Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<UsingDto.Models.OrderViewModel>>" %>

<asp:Content ID="indexTitle" ContentPlaceHolderID="TitleContent" runat="server">
    Home Page
</asp:Content>

<asp:Content ID="indexContent" ContentPlaceHolderID="MainContent" runat="server">
<%= Html.Telerik().Grid(Model)
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Add(o => o.OrderID).Width(100);
            columns.Add(o => o.ContactName).Width(200);
            columns.Add(o => o.ShipAddress);
            columns.Add(o => o.OrderDate).Format("{0:MM/dd/yyyy}").Width(120);
        })
        .Ajax(ajax => ajax.Action("_AjaxBinding", "Home"))
        .Pageable()
        .Sortable()
        .Scrollable()
        .Filterable()
%>
<%= Html.Telerik().ScriptRegistrar() %>
</asp:Content>

The type of the model and the ContactName column are changed.

Controller:

public class HomeController : Controller
{
public ActionResult Index()
{
return View(GetOrders());
}

[GridAction]
public ActionResult _AjaxBinding()
{
return View(new GridModel
{
Data = GetOrders()
});
}

private IEnumerable<OrderViewModel> GetOrders()
{
NorthwindDataContext northwind = new NorthwindDataContext();

return from o in northwind.Orders
select new OrderViewModel
{
OrderID = o.OrderID,
ContactName = o.Customer.ContactName,
ShipAddress = o.ShipAddress,
OrderDate = o.OrderDate
};
}
}   
gzip compression in IIS7 for the JSON content type:

GZIP compression introduces two times smaller payload and almost ten times than the initial implementation.

Find attached the sample project used in the blog post.

UsingDto.zip

I hope this helps!

Advertisement