Using Jquery 12.1 and MVC 3 what's the best way to handle large datasets(100k+)?
We're using Linq to Entity framework and I'm selecting everything into a viewmodel
IQueryable<ViewModel> vm = from products in context.vw_Products select products;
and passing it into the view from our Index Action.
I have remote paging enabled so it doesn't load the entire dataset all at once and the pagingGetData action which returns the same dataset as before.
But this seems to be significantly slower than all the other grids, taking anywhere from 5 to 12 seconds just to finish rendering the grid.
Is there a way to set the grid model's total count and set how many pages it will be so I can utilize the int page and int pagesize I pass into the pagingGetData action? Or what is the best way to do this?
Of course :)You can take a look at the following samples:http://samples.infragistics.com/jquery/grid/paging http://samples.infragistics.com/jquery/grid/paging-api Notice the Code View section of the page just below the grid - in that section you can find the controller and view code that's used for the sample.Since both samples use remote paging, the controller action with the [GridDataSourceAction] attribute is the main point of interest here.Hope this helps.Cheers,Borislav
So is there an example of how to page properly with MVC?
Loading all the data to the model's datasource every time the page is changed doesn't seem like a good way to do it. With only 200k records so far, it's already taking 10-20 seconds to load a page that is displaying 50 records and it takes another 10-20 seconds to change each page.
I managed to change the total record count by setting it in javascript.
grid.live("iggridpagingpagerrendering", function (evt, ui) {
ui.dataSource._recCount = 1000;
});
But of course now when I page, I'm passing in the datasource for the next page but I think the iggrid is skipping the data from the datasource since the next page that renders is blank.
Is there a way around this?
Edit: nevermind, doing it this way would mess with the sorting and filtering.
I tried adding that to the grid but it doesn't change the total record count.
@(
Html.Infragistics().Grid<ViewModel>(Model).ID("grid")
.AutoGenerateColumns(false)
.AutoGenerateLayouts(false)
.Width("100%")
.Columns(column =>
{
column.For(x => x.DateActive).HeaderText("Date Active");
column.For(x => x.LastStatusChange).HeaderText("Last Status Change");
column.For(x => x.Status).HeaderText("Status");
column.For(x => x.Name).HeaderText("Name");
}).Features(features =>
features.Filtering().Mode(FilterMode.Advanced);
features.Paging().Type(OpType.Remote).PageSize(50)
.ShowPageSizeDropDown(true).PageSizeList(new List<int> { 10, 15, 20, 50 })
.PrevPageLabelText(Resources.DMS.GridButtonPrevious).NextPageLabelText(Resources.DMS.GridButtonNext).TotalRecordsCount(1000);
features.Sorting().Mode(SortingMode.Single);
features.Selection().MouseDragSelect(true).MultipleSelection(false);
features.GroupBy();
features.Resizing();
features.Hiding();
features.Tooltips().Visibility(TooltipsVisibility.Always);
}).Virtualization(false).DataSourceUrl(Url.Action("PagingGetData", "Products", new { area = "Products" }))
.DataBind().Render()
)
It would be great if it did work.
You can specify total records count:
<%= Html.Infragistics().Grid(Model).ID("grid1").PrimaryKey("ProductID").Height("400px").Columns(column =>
column.For(x => x.ProductID).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_ID").ToString());
column.For(x => x.Name).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_NAME").ToString());
column.For(x => x.ProductNumber).HeaderText(this.GetGlobalResourceObject("Grid", "PRODUCT_NUMBER").ToString());
column.For(x => x.StandardCost).HeaderText(this.GetGlobalResourceObject("Grid", "STANDARD_COST").ToString());
}).Features(features => {
features.Paging().PageSize(10).TotalRecordsCount(100);
}).Virtualization(false)
.GenerateCompactJSONResponse(false)
.DataSourceUrl(Url.Action("PagingGetData"))
.DataBind()
.Render()%>
More information about paging you can read here.
Regards,
Stanimir Todorov