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
John Peters
Flash Delivery
$4,905.00
9899 Wong St.
912-2489
10/2/2023
10/6/2023
Hamburg
RT
69602-569
1
Tony Adams
Speedy Express
$3,437.00
8491 Wong St.
646-9074
5/24/2019
5/27/2019
Florence
SC
16303-405
2
Mark Adams
Speedy Express
$4,063.00
2513 Johnson St.
423-9997
6/18/2021
6/22/2021
Sidney
RN
40009-365
3
John Bannon
Flash Delivery
$189.00
413 White St.
740-1551
2/23/2019
2/24/2019
Florence
RN
47328-597
4
Mark Brown
Flash Delivery
$4,342.00
6290 Wong St.
264-8449
10/29/2017
11/1/2017
Hamburg
CS
75689-685
5
Brad Bannon
Logitrax
$3,045.00
3035 Peters St.
443-2285
12/10/2020
12/13/2020
Florence
CS
60727-910
6
Mark Smith
Flash Delivery
$4,980.00
5020 Richards St.
303-2307
1/5/2022
1/6/2022
York
CS
49038-598
7
Mark White
Logitrax
$1,776.00
1480 White St.
287-9768
7/2/2018
7/5/2018
Cairo
RT
45976-933
8
Tom Brown
Logitrax
$4,481.00
6608 Brown St.
931-6074
9/23/2021
9/27/2021
Paris
SC
12971-624
9
Aaron Johnson
Flash Delivery
$2,036.00
4125 Bannon St.
288-2673
12/3/2020
12/4/2020
Hamburg
RS
31865-849
10
Aaron Smith
Flash Delivery
$810.00
6907 Richards St.
475-8772
6/21/2019
6/24/2019
Paris
RT
69449-561
11
Tony Peters
Logitrax
$4,833.00
2867 Brown St.
199-9379
11/9/2019
11/13/2019
Sidney
RT
84917-290
12
Frank Wong
Logitrax
$281.00
5449 Richards St.
443-8525
12/10/2024
12/11/2024
York
SC
15390-529
13
Tony Wong
Flash Delivery
$1,888.00
8144 Brown St.
410-4922
2/19/2022
2/23/2022
York
CS
86275-297
14
Aaron Bannon
Speedy Express
$1,572.00
9082 Bannon St.
906-4436
9/16/2023
9/19/2023
Hamburg
CS
56154-324
15
Frank Wong
Speedy Express
$2,933.00
5449 Richards St.
443-8525
5/2/2024
5/5/2024
York
SC
15390-529
16
Tony Peters
Speedy Express
$1,508.00
2867 Brown St.
199-9379
5/2/2021
5/4/2021
Sidney
RT
84917-290
17
Sue Adams
Logitrax
$4,161.00
6996 Peters St.
571-8266
5/16/2019
5/20/2019
Rome
CS
80229-760
18
Chris Bannon
Logitrax
$1,512.00
5648 Bannon St.
554-2580
10/1/2017
10/4/2017
Rome
RN
17043-557
19
Paul Bannon
Flash Delivery
$3,854.00
7660 Wong St.
128-4125
12/10/2022
12/14/2022
Sidney
SC
43781-262
20
Paul Johnson
Flash Delivery
$4,083.00
2363 White St.
484-6706
3/16/2020
3/19/2020
Cairo
SP
42685-886
21
Tony Peters
Speedy Express
$3,182.00
2867 Brown St.
199-9379
12/13/2024
12/15/2024
Sidney
RT
84917-290
22
Mark Peters
Flash Delivery
$4,149.00
2183 Adams St.
562-6261
1/17/2025
1/19/2025
Sidney
RN
16624-542
23
Tony Peters
Speedy Express
$4,933.00
2867 Brown St.
199-9379
1/6/2019
1/10/2019
Sidney
RT
84917-290
24
Aaron Peters
Flash Delivery
$1,390.00
1991 Bannon St.
210-5079
8/17/2021
8/18/2021
York
CS
88879-602

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