Features

Paging

Paging

This sample shows how to implement paged views with the MultiRow control.

Features

Overview
Collapsible Column Headers
Styling Records, Groups, and Cells
Grouping
Filtering
Row and Column Freezing
Paging
Group Panel
Remote Data Binding
Custom Cells
Custom Editors
Editing
Batch Editing
Sorting
Virtual Scrolling
Disable Server Reading
Data Map
Excel Export
PDF Export
Unobtrusive Validation
Id
ShippedDate
Customer.Name
Customer.Email
Customer.Phone
Shipper.Name
0
Sue Smith
Speedy Express
$849.00
5510 White St.
105-3533
4/4/2019
4/7/2019
Florence
RT
54796-155
1
John Bannon
Logitrax
$1,163.00
1286 Wong St.
753-3780
5/11/2018
5/12/2018
Cairo
SC
15665-651
2
Aaron Smith
Logitrax
$935.00
2597 Brown St.
214-9274
11/23/2017
11/26/2017
Rome
CS
85952-432
3
Paul Bannon
Speedy Express
$2,617.00
9176 Johnson St.
184-7568
10/24/2023
10/28/2023
York
SC
94608-181
4
Brad Wong
Flash Delivery
$1,840.00
5722 Richards St.
497-6497
10/29/2020
11/1/2020
Florence
RN
83619-218
5
Paul Peters
Speedy Express
$2,079.00
7817 White St.
435-6549
6/14/2018
6/18/2018
Paris
RS
13198-653
6
Mark Johnson
Logitrax
$1,920.00
3624 Richards St.
232-4800
2/5/2018
2/9/2018
Rome
RT
96558-139
7
Joe Wong
Logitrax
$1,335.00
3674 Johnson St.
556-8213
6/30/2024
7/3/2024
Sidney
RN
87546-152
8
John Bannon
Speedy Express
$3,741.00
1286 Wong St.
753-3780
7/24/2021
7/25/2021
Cairo
SC
15665-651
9
John Bannon
Speedy Express
$2,642.00
7163 Wong St.
150-3760
2/15/2018
2/18/2018
Rome
RN
88128-230

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 Disable Server Reading 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.

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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
using C1.Web.Mvc.Fluent;
using C1.Web.Mvc.Grid;
using C1.Web.Mvc.MultiRow;
using C1.Web.Mvc.MultiRow.Fluent;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
 
namespace MultiRowExplorer.Models
{
    public class LayoutDefinitionsBuilders
    {
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> OneLine
        {
            get
            {
                return ld =>
                {
                    ld.Add().Colspan(15).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Phone").Name("Customerphone").Header("Customer Phone"))
                            .Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Phone").Name("ShipperPhone").Header("Shipper Phone"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> TwoLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").CssClass("id").Width("150"))
                            .Add(cell => cell.Binding("Date").Header("Ordered").Width("150"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").CssClass("amount"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer").Width("200"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City").ShowDropDown(true)
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"));
                    });
                    ld.Add().Header("Shipper").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Colspan(2))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").Width("200").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> ThreeLines
        {
            get
            {
                return ld =>
                {
                    ld.Add().Header("Order").Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Id").Header("ID").Colspan(2).CssClass("id"))
                            .Add(cell => cell.Binding("Amount").Header("Amount").Format("c").Colspan(2).CssClass("amount"))
                            .Add(cell => cell.Binding("Date").Header("Ordered"))
                            .Add(cell => cell.Binding("ShippedDate").Header("Shipped"));
                    });
                    ld.Add().Header("Customer").Colspan(3).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Customer.Name").Name("CustomerName").Header("Customer"))
                            .Add(cell => cell.Binding("Customer.Email").Name("CustomerEmail").Header("Customer Email").Colspan(2).CssClass("email"))
                            .Add(cell => cell.Binding("Customer.Address").Name("CustomerAddress").Header("Address").Colspan(2))
                            .Add(cell => cell.Binding("Customer.Phone").Name("CustomerPhone").Header("Phone"))
                            .Add(cell => cell.Binding("Customer.City").Name("CustomerCity").Header("City")
                                .DataMap(dm => { dm.DisplayMemberPath("Value").SelectedValuePath("Value").Bind(Orders.GetCities().ToValues()); }))
                            .Add(cell => cell.Binding("Customer.State").Name("CustomerState").Header("State"))
                            .Add(cell => cell.Binding("Customer.Zip").Name("CustomerZip").Header("Zip"));
                    });
                    ld.Add().Header("Shipper").Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Shipper.Name").Name("ShipperName").Header("Shipper").Width("*"))
                            .Add(cell => cell.Binding("Shipper.Email").Name("ShipperEmail").Header("Shipper Email").CssClass("email"))
                            .Add(cell => cell.Binding("Shipper.Express").Name("ShipperExpress").Header("Express"));
                    });
                };
            }
        }
 
        public static Action<ListItemFactory<CellGroup, CellGroupBuilder>> Sales
        {
            get
            {
                return ld =>
                {
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("ID").Header("ID"));
                        cells.Add(cell => cell.Binding("Active").Header("Active"));
                    });
                    ld.Add().Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Start").Header("Start"));
                        cells.Add(cell => cell.Binding("End").Header("End"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Country").Header("Country").Colspan(2));
                        cells.Add(cell => cell.Binding("Product").Header("Product"));
                        cells.Add(cell => cell.Binding("Color").Header("Color"));
                    });
                    ld.Add().Colspan(2).Cells(cells =>
                    {
                        cells.Add(cell => cell.Binding("Amount").Header("Amount"));
                        cells.Add(cell => cell.Binding("Amount2").Header("Amount2"));
                        cells.Add(cell => cell.Binding("Discount").Header("Discount").Colspan(2));
                    });
                };
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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());
        }
    }
}
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
@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>
        This sample shows how to implement paged views with the <b>MultiRow</b> control.
        All the work is done by the <b>CollectionView</b> class, which is used as a data source for the grid.
        To enable paging, set the <b>PageSize</b> property of <b>MultiRow</b> or <b>CollectionViewService</b>.
        To switch pages, use the <b>Pager</b> control and set <b>Pager</b>.<b>Owner</b> property to the id of <b>MultiRow</b> or <b>CollectionViewService</b>.
    </p>
    <p>
        In this example, paging happens on server-side. This is because <b>CollectionView</b> here acts like a service and synchronizes
        with server data. The <b>CollectionView</b> internally does an ajax call to fetch next set of data. Refer @Html.ActionLink("Disable Server Reading", "DisableServerRead") sample for client-side paging.
    </p>
    <p>
        <b>Note:</b> 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 <b>Pager</b> control by Javascript, refer the client <b>CollectionView</b> class.
    </p>
}