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

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Group Headers
Row Header
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Custom Column Headers
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
Ordered
Shipped
City
State
Zip
Express
0
John Richards
Flash Delivery
$535.00
1139 Adams St.
332-1843
10/3/2020
10/5/2020
Rome
RN
36193-356
1
Chris Bannon
Logitrax
$4,187.00
8866 Johnson St.
933-6728
11/28/2019
11/30/2019
Paris
RT
65622-960
2
Brad Wong
Logitrax
$3,777.00
4019 Wong St.
772-2983
11/20/2021
11/24/2021
Sidney
SC
38794-700
3
Paul White
Speedy Express
$1,395.00
2645 Brown St.
494-5004
5/30/2020
5/31/2020
Florence
SC
34085-682
4
Chris Peters
Logitrax
$3,951.00
5757 Richards St.
859-3425
2/7/2023
2/10/2023
Rome
SP
63271-793
5
Tom Wong
Speedy Express
$4,637.00
9299 Smith St.
370-2405
9/14/2024
9/15/2024
Paris
RN
61905-639
6
Brad Adams
Flash Delivery
$1,819.00
3391 Bannon St.
956-4420
12/20/2021
12/24/2021
Hamburg
RT
32005-465
7
Tom Bannon
Flash Delivery
$4,493.00
3780 Richards St.
545-6745
11/14/2019
11/18/2019
Cairo
SP
94488-627
8
Chris Brown
Logitrax
$3,830.00
7914 Peters St.
234-4072
9/23/2023
9/25/2023
Cairo
CS
33849-628
9
Tom Johnson
Speedy Express
$2,775.00
6827 Peters St.
550-6749
4/6/2024
4/8/2024
Rome
CS
72047-912

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