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
Mark Adams
Flash Delivery
$3,740.00
6776 White St.
574-8221
10/10/2024
10/11/2024
Florence
RT
86457-335
1
Brad Richards
Logitrax
$783.00
8167 Wong St.
964-1895
1/31/2021
2/3/2021
Sidney
RT
93798-254
2
Tony Johnson
Logitrax
$3,990.00
8405 Wong St.
867-9705
11/21/2023
11/25/2023
York
CS
57508-865
3
Joe White
Speedy Express
$2,624.00
5377 Wong St.
353-7220
10/20/2020
10/22/2020
Paris
SP
87759-800
4
Tony Johnson
Flash Delivery
$4,014.00
8405 Wong St.
867-9705
5/31/2025
6/3/2025
York
CS
57508-865
5
Mark White
Logitrax
$4,771.00
8202 Johnson St.
648-7740
8/17/2021
8/19/2021
Cairo
RS
61986-159
6
Chris Richards
Flash Delivery
$2,135.00
1981 Bannon St.
449-8340
7/4/2017
7/5/2017
York
SC
65760-662
7
Paul Brown
Speedy Express
$2,183.00
3184 Smith St.
805-3676
2/28/2023
3/2/2023
Paris
SC
96792-747
8
Mark White
Logitrax
$4,378.00
8202 Johnson St.
648-7740
8/31/2017
9/3/2017
Cairo
RS
61986-159
9
Joe Wong
Flash Delivery
$4,275.00
6705 Wong St.
812-1215
12/25/2019
12/28/2019
Hamburg
RN
32671-336

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>
  
}