FlexGrid
Paging
Features
Settings
Description
This sample shows how to implement paged views with the FlexGrid. All the work is done by the CollectionView class used as a data source for the grid. To enable paging, set the PageSize property of FlexGrid or CollectionViewService. To switch pages, use the Pager Control and set Pager.Owner property to the id of FlexGrid or CollectionViewService.
In this example, the paging happens server-side. This is because CollectionView here acts like a service and synchronizes with server data. The CollectionView internally does an ajax call to fetch next set of data. Refer Disable Server Reading sample for client-side paging.
Note: That the paging UI is implemented outside of the grid. This gives you complete control over the appearance and functionality of the paging mechanism. To customize the Pager by Javascript, please refer the client CollectionView class.
using System.Collections.Generic;
using System.Web.Mvc;
using MvcExplorer.Models;
namespace MvcExplorer.Controllers
{
public partial class FlexGridController : Controller
{
private readonly ControlOptions _gridPagingModel = new ControlOptions
{
Options = new OptionDictionary
{
{"Page Size", new OptionItem {Values = new List<string> {"10", "25", "50", "100"}, CurrentValue = "25"}},
}
};
public ActionResult Paging(FormCollection data)
{
_gridPagingModel.LoadPostData(data);
ViewBag.DemoOptions = _gridPagingModel;
return View(Sale.GetData(500));
}
}
}
@model IEnumerable<Sale>
@{
ControlOptions optionsModel = ViewBag.DemoOptions;
ViewBag.DemoSettings = true;
}
@section Styles{
<style>
.customGrid {
margin-top:5px;
}
</style>
}
@(Html.C1().CollectionViewService<Sale>().Bind(Model).Id("collectionViewService")
.PageSize(Convert.ToInt32(optionsModel.Options["PageSize"].CurrentValue)))
@(Html.C1().Pager().Owner("collectionViewService"))
@(Html.C1().FlexGrid<Sale>().Id("pagingGrid").Height(300).CssClass("customGrid")
.ItemsSourceId("collectionViewService").IsReadOnly(true)
)
@(Html.C1().Pager().Owner("pagingGrid"))
@section Settings{
@Html.Partial("_OptionsMenu", optionsModel)
}
@section Description{
<p>@Html.Raw(Resources.FlexGrid.Paging_Text0)</p>
<p>@Html.Raw(Resources.FlexGrid.Paging_Text1)</p>
<p>@Html.Raw(Resources.FlexGrid.Paging_Text2)</p>
}