Features

Filtering

Filtering

This sample shows how to use filtering in the MultiRow control.

Features

Id
ShippedDate
Customer.Name
Customer.Email
Customer.Phone
Shipper.Name
0
Mark Richards
Logitrax
$2,556.00
7217 White St.
145-7981
3/15/2018
3/19/2018
Florence
RT
89636-267
1
Paul Adams
Logitrax
$4,009.00
9187 Bannon St.
646-4190
7/2/2023
7/3/2023
York
SC
88372-958
2
Tom Johnson
Speedy Express
$2,569.00
5443 Peters St.
543-5782
12/24/2022
12/28/2022
Cairo
RS
11014-965
3
Aaron Peters
Logitrax
$4,981.00
6120 Smith St.
681-5115
1/6/2018
1/8/2018
Hamburg
RN
57269-791
4
Frank Wong
Speedy Express
$2,173.00
3817 Smith St.
219-2889
3/6/2019
3/7/2019
York
RT
59428-818
5
Tom Peters
Flash Delivery
$1,589.00
1299 Richards St.
490-8899
1/13/2018
1/17/2018
Florence
SP
28480-250
6
Frank Wong
Speedy Express
$2,720.00
9411 Richards St.
454-4371
1/31/2024
2/1/2024
Rome
CS
83610-329
7
Chris Smith
Speedy Express
$1,446.00
7246 Brown St.
352-3318
8/7/2021
8/8/2021
Cairo
SC
83898-238
8
Tony Johnson
Speedy Express
$1,897.00
6298 Johnson St.
183-4194
11/4/2023
11/8/2023
Paris
RS
54973-412
9
John Peters
Flash Delivery
$1,894.00
508 Peters St.
394-9777
6/13/2019
6/15/2019
York
CS
67349-430
10
Bill Johnson
Logitrax
$3,276.00
4465 Brown St.
468-5536
6/23/2022
6/24/2022
Cairo
SC
75003-792
11
Bill Johnson
Logitrax
$1,196.00
4839 Wong St.
850-6121
10/22/2019
10/24/2019
York
CS
16491-308
12
Joe White
Logitrax
$2,732.00
3759 Smith St.
973-5251
6/19/2023
6/22/2023
Sidney
CS
28136-721
13
Aaron Peters
Flash Delivery
$1,602.00
6120 Smith St.
681-5115
5/12/2024
5/14/2024
Hamburg
RN
57269-791
14
John Peters
Logitrax
$709.00
508 Peters St.
394-9777
3/7/2018
3/8/2018
York
CS
67349-430
15
Mark Brown
Flash Delivery
$2,554.00
9847 Adams St.
561-8308
5/8/2025
5/12/2025
Hamburg
SC
18128-751
16
Joe White
Speedy Express
$2,742.00
3759 Smith St.
973-5251
3/19/2020
3/22/2020
Sidney
CS
28136-721
17
Sue White
Flash Delivery
$2,004.00
7478 Johnson St.
313-6226
5/24/2024
5/27/2024
Florence
SC
59936-254
18
Tony Johnson
Speedy Express
$2,212.00
6298 Johnson St.
183-4194
2/7/2025
2/11/2025
Paris
RS
54973-412
19
Tony Bannon
Speedy Express
$3,835.00
9753 Peters St.
805-3159
7/26/2021
7/27/2021
York
CS
73053-655
20
Aaron Adams
Logitrax
$1,639.00
2152 Richards St.
848-5316
9/15/2022
9/19/2022
Cairo
SC
18797-910
21
Bill Smith
Logitrax
$4,381.00
344 Smith St.
781-2540
3/23/2023
3/27/2023
Rome
SC
13534-199
22
Sue Smith
Speedy Express
$854.00
4284 Johnson St.
522-1473
5/22/2018
5/26/2018
Florence
RS
23344-819
23
Tony Smith
Logitrax
$4,637.00
8724 Brown St.
340-9627
6/6/2020
6/7/2020
Hamburg
RS
19387-936
24
Aaron Bannon
Flash Delivery
$4,891.00
9583 Brown St.
376-4841
6/1/2020
6/2/2020
Florence
RS
53215-333

Settings

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
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
using C1.Web.Mvc;
using MultiRowExplorer.Models;
using System;
using System.Collections.Generic;
using System.Web.Mvc;
using System.Linq;
 
namespace MultiRowExplorer.Controllers
{
    public partial class MultiRowController : Controller
    {
        private static OptionItem CreateOptionItem()
        {
            return new OptionItem { Values = new List<string> { "None", "Condition", "Value", "Both" }, CurrentValue = "Both" };
        }
 
        private readonly ControlOptions _filterOptions = new ControlOptions
        {
            Options = new OptionDictionary
            {
                {"CustomerState", CreateOptionItem()},
                {"CustomerCity", CreateOptionItem()},
                {"ShipperName", CreateOptionItem()},
                {"ShipperExpress", CreateOptionItem()},
                {"Amount", CreateOptionItem()}
            }
        };
 
        public ActionResult Filter(FormCollection data)
        {
            _filterOptions.LoadPostData(data);
            ViewBag.DemoOptions = _filterOptions;
            ViewBag.FilterTypes = GetFilterTypes(_filterOptions);
            return View(Orders.GetOrders());
        }
 
        private Dictionary<string, FilterType> GetFilterTypes(ControlOptions controlOptions)
        {
            var filterTypes = new Dictionary<string, FilterType>();
            foreach (var item in controlOptions.Options)
            {
                filterTypes.Add(item.Key, (FilterType)Enum.Parse(typeof(FilterType), item.Value.CurrentValue));
            }
            return filterTypes;
        }
    }
}
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;
    Dictionary<string, FilterType> filterTypes = ViewBag.FilterTypes;
    ViewBag.DemoSettings = true;
    ViewBag.DemoDescription = false;
}
 
@section Styles{
<style>
    label {
        display: inline-block;
        font-weight: normal;
        padding: 3px;
    }
</style>
}
 
@(Html.C1().MultiRow<Orders.Order>()
    .Id("filteringMultiRow")
    .Bind(Model)
    .PageSize(25)
    .IsReadOnly(true)
    .LayoutDefinition(LayoutDefinitionsBuilders.ThreeLines)
    .SelectionMode(SelectionMode.Row)
    .AllowSorting(true)
    .Filterable(f => f.DefaultFilterType(FilterType.Both)
        .ColumnFilters(cfsb =>
        {
            foreach (var item in filterTypes)
            {
                cfsb.Add(cfb => cfb.Column(item.Key).FilterType(item.Value));
            }
        })
    )
    .CssClass("multirow")
)
 
@(Html.C1().Pager().Owner("filteringMultiRow"))
 
@section Settings{
    @Html.Partial("_OptionsMenu", optionsModel)
}
 
@section Summary{
    This sample shows how to use filtering in the MultiRow control.
}