[Solved] Slow Loading & Difference Between .Add and .Bound

[Steven Doran]

Hi there, I have a few confusions here that I believe might be related. The 3rd one is actually the end-result I am looking for but am unable to achieve, so it is the most important. Thank you for anything you can do!

1) I'm noticing all the examples displaying code like this...

columns.Bound(o => o.OrderID).Width(100);

But the working code I have acquired from a friend works like this...

columns.Add(c => c.EmailAddress);

And 'Bound' is not an available attribute for Grid.

2) Another similar issue is the 'databinding' code. Examples show...

.DataBinding(dataBinding => dataBinding.Ajax().Select("_CustomBinding", "Grid"))

But my working code looks like this with '.DataBinding' not an available attribute for Grid...

.ServerBinding(serverBinding => serverBinding.Action("CustomersAjaxBinding", "Grid"))
.Ajax(ajax => ajax.Action("_CustomersAjaxBinding", "Grid"))

3) All the code I have is fully functional and giving me everything I need(including paging, sorting, filtering, and even Ajax actions), but the problem is I am loading a List<> into the Grid, so even 5000 records takes 5-10 seconds to load. I understand that every action/page load, etc. causes the Grid to load all 5000 records every time. I really just need it to load the 'PageSize' each time and I can't for the life of me figure this one out and I haven't been able to find any non-confusing help for this specific issue. (I'm sure it's right under my nose, but my head is spinning after three full days wasted.) Please help!

FYI.......These references, among many others, just haven't been cutting it for me :(

http://demos.telerik.com/aspnet-mvc-beta/grid
http://www.telerik.com/community/forums/aspnet-mvc/grid/best-approach-for-large-amounts-of-data.aspx
http://demos.telerik.com/aspnet-mvc/grid

Thx!

[Steven Doran]

OK, I should have read through these forums instead of just Googling my problem...

#1 and #2 of my issues are answered here... http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-changes-and-backward-compatibility.html

I'm getting the newest version now.

So if you can still help me with a clear cut way to fix my #3 issue, that would be great!! Here is what the code I acquired is currently doing ...

public ActionResult CustomersAjaxBinding()

{

return View(GetFlatCustomers());

}

[GridAction]

public ActionResult _CustomersAjaxBinding()

{

return View(new GridModel<FlatCustomer>

{

Data = GetFlatCustomers()

});

}

public List<FlatCustomer> GetFlatCustomers()

{

List<FlatCustomer> flatCustomers = new List<FlatCustomer>();

foreach (var customer in db.Customers.Where(x => !(x.IsDeleted ?? false)).OrderByDescending(x => x.Id))//x.Address.LastName))

{

flatCustomers.Add(new FlatCustomer(customer));

}

return flatCustomers;

}

public class FlatCustomer

{

public string Guid { get; set; }

public string Actions { get; set; }

public string EmailAddress { get; set; }

public string Name { get; set; }

public string TotalOrders { get; set; }

public string TotalSpent { get; set; }

public long PIN { get; set; }

public decimal PendingCRP { get; set; }

public decimal ConfirmedCRP { get; set; }

public DateTime DateEntered { get; set; }

public string Active { get; set; }

public string LastLogin { get; set; }

public string LastModified { get; set; }

public string Select { get; set; }

public string Id { get; set; }

public string Sort { get; set; }

public string Void { get; set; }

public FlatCustomer(Customer customer)

{

this.Guid = customer.Guid.ToString();

this.Actions = "<a href=\"/Manager/Customers/Edit?guid=" + customer.Guid.ToString() + "\" style=\"position:relative;top:4px;\"><img src=\"/Content/Images/edit-icon.png\" border=\"0\" alt=\"Edit\"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href=\"\" class=\"deleteproduct\" style=\"position:relative;top:4px;\" alt=\"Delete\"><img src=\"/Content/Images/delete-icon.png\" border=\"0\"></a><input type=\"hidden\" value=\"" + customer.Guid.ToString() + "\" class=\"guid\" />";

this.TotalOrders = customer.Orders.Count().ToString();

this.TotalSpent = customer.Orders.Sum(o => o.GrandTotal).Value.ToString("C");

this.PendingCRP = customer.PendingCRP.Value;

this.ConfirmedCRP = customer.ConfirmedCRP.Value;

this.DateEntered = customer.DateEntered.Value;

this.EmailAddress = customer.EmailAddress;

this.Void = "";

this.LastLogin = "<span class=\"tt\">" + String.Format("{0:M/d/yyyy}", customer.LastLogin) + "<span class=\"tooltip\"><span class=\"top\"></span><span class=\"middle\">" + String.Format("{0:h:mm tt}", customer.LastLogin) + "</span><span class=\"bottom\"></span></span></span>";

this.LastModified = "<span class=\"tt\">" + String.Format("{0:M/d/yyyy}", customer.DateModified) + "<span class=\"tooltip\"><span class=\"top\"></span><span class=\"middle\">" + String.Format("{0:h:mm tt}", customer.DateModified) + "</span><span class=\"bottom\"></span></span></span>";

//this.LastLogin = "<a href=\"#\" class=\"manager-viewtime-expand\">" + String.Format("{0:M/d/yyyy}", customer.LastLogin) + "</a><div class=\"manager-viewtime\" style=\"display: none;\">" + String.Format("{0:h:mm tt}", customer.LastLogin) + "</div>";

this.Name = customer.Address.FirstName + " " + customer.Address.LastName;

this.Active = "<a href=\"\" class=\"toggleactive\" alt=\"Active\"><img src=\"/Content/Images/" + Convert.ToString(customer.IsActive.Value).ToLower() + ".jpg\" border=\"0\" /></a><input type=\"hidden\" value=\"" + customer.Guid.ToString() + "\" class=\"guid\" />";

//this.Active = "<form action=\"/Manager/Customers\" method=\"post\"><input type=\"image\" src='../../../../Content/Images/" + Convert.ToString(customer.IsActive.Value).ToLower() + ".jpg' name=\"IsActive\" id=\"IsActive\" /><input id=\"CustomerGuid\" name=\"CustomerGuid\" type=\"hidden\" value=\"" + customer.Guid + "\" /></form> ";

this.PIN = customer.PIN.Value; }

And the View.....

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Manager.Master" Inherits="System.Web.Mvc.ViewPage<IEnumerable<FlatCustomer>>" %>

    <%= Html.Telerik().Grid<FlatCustomer>(Model)
            .Name("CustomersGrid").Columns(columns =>
            {
                columns.Add(c => c.Actions);
                columns.Add(c => c.EmailAddress);
                columns.Add(c => c.Name);
                columns.Add(c => c.TotalOrders);
                columns.Add(c => c.TotalSpent);
                columns.Add(c => c.LastLogin);
                columns.Add(c => c.Active);
                columns.Add(c => c.LastModified);
            })
            .HtmlAttributes(new { tableid = "Customers", @class = "dragged filtered" })
            .ServerBinding(serverBinding => serverBinding.Action("CustomersAjaxBinding", "Grid"))
            .Ajax(ajax => ajax.Action("_CustomersAjaxBinding", "Grid"))
            .Sortable()
            .Pageable(paging => paging.PageSize(20))
            .Filterable()
            .ClientEvents(events => events.OnRowDataBound("gridActions"))
    %>

Thank you again.

[Steven Doran]

This solution looks perfect. I just can't wrap my head around how to do it! :(

==============
If you bind the grid to your direct Linq IQueryable<> you have been building, then all of the above will take place at the database layer.  If you have done anything like called .ToList(), .Count() or any of that on your Linq expression, then the above will take place in the view.  The latter would be quite a bit slower than letting the grid handle when to execute the query. This also applies to using the grid filters.

The best bet would be to build your linq query, and pass it to the view, and bind to grid as IQueryable<>, then the grid can add its parameters on, and execute the linq expression, and the full expression will be executed in the DB layer.
==============

[Atanas Korchev]

Hi Steven Doran,

The grid will request PageSize number of records only when there is underlying linq provider behind your IQueryable (Linq To Sql, Entity Framework, Open Access etc). If you are using linq 2 objects (or call ToList())  all data will be loaded into memory and paging will not occur in the database.

Regards,
Atanas Korchev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Steven Doran]

Atanas, thank you for your reply. I do understand that, thank you.

I am basically just having a problem building my advanced Linq query in the controller and passing it into the view so the Grid could access it. Then it is supposed to work accordingly.

Thx!