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
Joe Bannon
Speedy Express
$2,629.00
5798 Johnson St.
973-5987
12/8/2017
12/10/2017
York
CS
35045-544
1
Sue Brown
Speedy Express
$4,482.00
3403 White St.
798-8220
1/27/2021
1/28/2021
Paris
CS
42579-393
2
Brad Adams
Logitrax
$4,823.00
8978 Johnson St.
418-9683
2/16/2020
2/18/2020
Sidney
SC
48663-170
3
Frank Brown
Speedy Express
$438.00
3598 Smith St.
698-2438
8/31/2023
9/4/2023
Paris
RS
22563-726
4
Tom Richards
Logitrax
$1,739.00
1635 Johnson St.
824-2507
9/21/2017
9/24/2017
Cairo
SC
18497-955
5
Tony Johnson
Logitrax
$613.00
2830 Brown St.
335-7638
5/20/2020
5/23/2020
York
CS
32736-952
6
Frank Richards
Speedy Express
$2,257.00
6981 Adams St.
399-2341
8/1/2023
8/2/2023
Florence
RN
72801-223
7
John Richards
Flash Delivery
$515.00
220 Peters St.
266-9117
3/10/2020
3/12/2020
York
RS
18988-656
8
Brad Richards
Speedy Express
$1,766.00
8922 Wong St.
652-2164
7/7/2018
7/9/2018
Sidney
CS
15577-430
9
Tony White
Speedy Express
$2,335.00
3829 Johnson St.
981-1621
3/14/2021
3/16/2021
York
CS
77831-458
10
Sue Smith
Flash Delivery
$4,692.00
5126 Wong St.
541-8552
4/10/2018
4/11/2018
York
RN
35454-331
11
Chris Bannon
Flash Delivery
$1,098.00
7559 Smith St.
457-8879
12/16/2023
12/17/2023
Rome
RT
33008-377
12
Tom Peters
Logitrax
$1,093.00
1411 Bannon St.
258-9016
12/16/2018
12/20/2018
York
RN
22522-599
13
Paul Bannon
Speedy Express
$106.00
1054 Peters St.
456-9311
11/30/2020
12/1/2020
Rome
CS
13757-439
14
Paul Johnson
Flash Delivery
$723.00
8495 Johnson St.
124-4359
6/26/2019
6/30/2019
Florence
RN
42195-665
15
Chris Smith
Flash Delivery
$397.00
6611 Brown St.
906-2368
4/2/2021
4/4/2021
Florence
RS
79463-994
16
Tom Wong
Speedy Express
$2,335.00
4601 White St.
822-2421
2/10/2023
2/12/2023
Florence
RN
36575-172
17
Aaron Johnson
Speedy Express
$255.00
1537 White St.
291-8758
4/17/2024
4/18/2024
Paris
RT
82899-453
18
Aaron White
Flash Delivery
$3,812.00
5374 Johnson St.
335-6354
4/23/2021
4/25/2021
Rome
RT
35305-493
19
Tom Richards
Logitrax
$1,086.00
1315 Richards St.
665-6825
10/22/2017
10/23/2017
York
RS
87842-700
20
Chris Bannon
Flash Delivery
$3,328.00
7559 Smith St.
457-8879
5/27/2021
5/29/2021
Rome
RT
33008-377
21
John Richards
Logitrax
$3,519.00
220 Peters St.
266-9117
1/31/2025
2/4/2025
York
RS
18988-656
22
Aaron Johnson
Speedy Express
$722.00
2233 Brown St.
243-9123
12/18/2018
12/19/2018
Florence
SP
18063-731
23
Joe Richards
Flash Delivery
$3,042.00
3563 Adams St.
914-9660
4/28/2021
4/30/2021
Sidney
SC
57918-577
24
Tony Adams
Logitrax
$2,447.00
1094 White St.
865-6636
3/16/2022
3/20/2022
Rome
SP
65768-888

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