Features

Paging

Paging

Features

Settings

Description

This sample shows how to implement paged views with the MultiRow control.
All the work is done by the CollectionView class, which is used as a data source for the grid.
To enable paging, set the PageSize property of MultiRow or CollectionViewService.
To switch pages, use the Pager control and set Pager.Owner property to the id of MultiRow or CollectionViewService.

In this example, paging happens on 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 @Html.ActionLink("Disable Server Reading", "DisableServerRead") sample for client-side paging.

Note: The paging UI is implemented outside the grid. This gives you complete control over the appearance and functionality of the paging mechanism.
To customize the Pager control by Javascript, refer the client CollectionView class.

using System.Collections.Generic;
using System.Web.Mvc;
using MultiRowExplorer.Models;

namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private readonly ControlOptions _pagingOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"Page Size", new OptionItem {Values = new List<string> {"10", "25", "50", "100"}, CurrentValue = "10"}},
            }
        };

        public ActionResult Paging(FormCollection data)
        {
            _pagingOptions.LoadPostData(data);
            ViewBag.DemoOptions = _pagingOptions;
            return View(Orders.GetOrders());
        }
    }
}
@model IEnumerable<Orders.Order>
@{
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}

@section Styles{
    <style>
        .customMultiRow {
            margin-top: 5px;
        }
    </style>
}

@(Html.C1().CollectionViewService<Orders.Order>().Bind(Model).Id("collectionViewService")
.PageSize(Convert.ToInt32(optionsModel.Options["PageSize"].CurrentValue)))

@(Html.C1().Pager().Owner("collectionViewService"))

@(Html.C1().MultiRow<Orders.Order>().Id("pagingMultiRow").CssClass("multirow customMultiRow")
    .ItemsSourceId("collectionViewService").IsReadOnly(true)
    .LayoutDefinition(LayoutDefinitionsBuilders.ThreeLines)
)

@(Html.C1().Pager().Owner("pagingMultiRow"))

@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}

@section Description{
<p>@Html.Raw(Resources.MultiRowExplorer.Paging_Text0)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Paging_Text1)</p>

<p>@Html.Raw(Resources.MultiRowExplorer.Paging_Text2)</p>

}