Features

Paging

Paging

This sample shows how to implement paged views with the MultiRow.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 MultiRow or CollectionViewService.To switch pages, use the Pager control and set Pager.Owner property to the id of MultiRow or CollectionViewService.

Features

Ordered
Shipped
City
State
Zip
Express
0
Bill Richards
Flash Delivery
$2,661.00
8732 Johnson St.
128-9964
4/24/2024
4/27/2024
Florence
CS
83390-710
1
Joe Johnson
Speedy Express
$279.00
8713 Richards St.
210-1951
6/26/2022
6/27/2022
Florence
SC
80510-618
2
Joe Richards
Logitrax
$3,376.00
7069 Bannon St.
524-9807
5/25/2025
5/26/2025
Hamburg
RT
50147-762
3
Paul Richards
Speedy Express
$1,003.00
3041 Richards St.
445-1814
7/15/2024
7/17/2024
Hamburg
RT
13103-254
4
Tony Smith
Speedy Express
$2,033.00
848 Richards St.
437-1512
11/20/2021
11/21/2021
Hamburg
SC
17253-775
5
Paul Adams
Logitrax
$4,484.00
5598 Brown St.
445-4898
6/29/2025
7/3/2025
Sidney
RT
28512-469
6
Joe Adams
Flash Delivery
$1,038.00
8330 Richards St.
576-4629
7/3/2022
7/6/2022
Florence
SP
56422-762
7
Tony Richards
Logitrax
$2,654.00
670 Peters St.
866-8727
1/17/2021
1/21/2021
Sidney
RN
42803-733
8
Brad Peters
Logitrax
$3,108.00
7693 Wong St.
558-6659
8/12/2019
8/16/2019
York
CS
98884-334
9
Aaron White
Speedy Express
$1,391.00
6513 Peters St.
404-6804
2/24/2019
2/28/2019
York
RN
25647-673

Settings

Description

This sample shows how to implement paged views with the MultiRow.
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 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, 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 @Html.ActionLink("Disable Server Reading", "DisableServerRead") 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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
using System.Collections.Generic;
using C1.Web.Mvc;
using C1.Web.Mvc.Serialization;
using Microsoft.AspNetCore.Mvc;
using MultiRowExplorer.Models;
using Microsoft.AspNetCore.Http;
  
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(IFormCollection data)
        {
            _pagingOptions.LoadPostData(data);
            ViewBag.DemoOptions = _pagingOptions;
            return View();
        }
  
  
        public ActionResult Paging_Bind([C1JsonRequest] CollectionViewRequest<Orders.Order> requestData)
        {
            return this.C1Json(CollectionViewHelper.Read(requestData, Orders.GetOrders()));
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
@model IEnumerable<Orders.Order>
@{
    var cities = Orders.GetCities().ToValues();
    ControlOptions optionsModel = ViewBag.DemoOptions;
    ViewBag.DemoSettings = true;
}
  
@section Styles{
    <style>
        .customMultiRow {
            margin-top: 5px;
        }
    </style>
}
  
<c1-items-source id="collectionViewService" read-action-url="@Url.Action("Paging_Bind")" page-size="@Convert.ToInt32(optionsModel.Options["pageSize"].CurrentValue)"></c1-items-source>
  
<c1-pager owner="collectionViewService"></c1-pager>
  
<c1-multi-row id="pagingMultiRow" class="multirow customMultiRow" is-read-only="true" items-source-id="collectionViewService">
    <c1-multi-row-cell-group header="Order" colspan="2">
        <c1-multi-row-cell binding="Id" header="ID" class="id" colspan="2" />
        <c1-multi-row-cell binding="Amount" header="Amount" format="c" class="amount" colspan="2" />
        <c1-multi-row-cell binding="Date" header="Ordered" />
        <c1-multi-row-cell binding="ShippedDate" header="Shipped" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Customer" colspan="3">
        <c1-multi-row-cell binding="Customer.Name" name="CustomerName" header="Customer" />
        <c1-multi-row-cell binding="Customer.Email" name="CustomerEmail" header="Customer Email" class="email" colspan="2" />
        <c1-multi-row-cell binding="Customer.Address" name="CustomerAddress" header="Address" colspan="2" />
        <c1-multi-row-cell binding="Customer.Phone" name="CustomerPhone" header="Customer Phone" />
        <c1-multi-row-cell binding="Customer.City" name="CustomerCity" header="City" datamap-editor="@C1.Web.Mvc.Grid.DataMapEditor.DropDownList">
            <c1-data-map display-member-path="Value" selected-value-path="Value">
                <c1-items-source source-collection="cities" />
            </c1-data-map>
        </c1-multi-row-cell>
        <c1-multi-row-cell binding="Customer.State" name="CustomerState" header="State" />
        <c1-multi-row-cell binding="Customer.Zip" name="CustomerZip" header="Zip" />
    </c1-multi-row-cell-group>
    <c1-multi-row-cell-group header="Shipper">
        <c1-multi-row-cell binding="Shipper.Name" name="ShipperName" header="Shipper" width="*" />
        <c1-multi-row-cell binding="Shipper.Email" name="ShipperEmail" header="Shipper Email" class="email" />
        <c1-multi-row-cell binding="Shipper.Express" name="ShipperExpress" header="Express" />
    </c1-multi-row-cell-group>
</c1-multi-row>
  
<c1-pager owner="pagingMultiRow"></c1-pager>
  
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
  
@section Description{
<p>@Html.Raw(MultiRowRes.Paging_Text0)</p>
  
<p>@Html.Raw(MultiRowRes.Paging_Text1)</p>
  
<p>@Html.Raw(MultiRowRes.Paging_Text2)</p>
  
}