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 White
Logitrax
$2,934.00
3329 Adams St.
931-6009
4/21/2020
4/25/2020
Rome
RT
40476-854
1
Tony White
Speedy Express
$3,910.00
9941 Richards St.
269-3161
6/1/2023
6/2/2023
Hamburg
RS
71784-357
2
Paul White
Flash Delivery
$1,438.00
4051 Smith St.
821-6484
12/18/2022
12/21/2022
Florence
SC
65816-419
3
Bill Peters
Logitrax
$791.00
8845 Brown St.
437-3440
5/14/2023
5/15/2023
Cairo
RS
69388-833
4
Brad Johnson
Speedy Express
$1,982.00
2362 Wong St.
574-7619
12/7/2018
12/9/2018
Sidney
RS
96255-357
5
Aaron White
Speedy Express
$4,448.00
3325 Brown St.
119-3171
2/17/2022
2/21/2022
Paris
RT
18105-382
6
Chris Bannon
Logitrax
$1,979.00
5189 Bannon St.
114-2315
11/5/2021
11/6/2021
Paris
SP
92502-423
7
Chris Brown
Flash Delivery
$3,607.00
4225 White St.
388-2778
2/27/2021
3/2/2021
Paris
SC
97663-224
8
Aaron Brown
Speedy Express
$3,517.00
1094 Wong St.
258-6166
7/27/2024
7/30/2024
Hamburg
SC
87303-461
9
Brad Richards
Speedy Express
$426.00
1895 Richards St.
433-5421
4/23/2018
4/27/2018
York
CS
85585-424
10
Chris Brown
Speedy Express
$4,282.00
4225 White St.
388-2778
2/18/2024
2/21/2024
Paris
SC
97663-224
11
Brad Richards
Speedy Express
$335.00
1895 Richards St.
433-5421
10/2/2022
10/5/2022
York
CS
85585-424
12
Chris Bannon
Flash Delivery
$481.00
3784 Smith St.
410-8517
10/18/2022
10/19/2022
Paris
RS
73487-181
13
Aaron Peters
Logitrax
$2,613.00
5189 Adams St.
213-1857
4/29/2024
5/1/2024
Rome
SC
46209-914
14
Tony White
Logitrax
$4,544.00
9941 Richards St.
269-3161
7/19/2019
7/22/2019
Hamburg
RS
71784-357
15
Tony Richards
Speedy Express
$4,744.00
4208 Peters St.
754-3412
7/6/2024
7/9/2024
Rome
SC
99862-912
16
Tony White
Speedy Express
$1,179.00
9941 Richards St.
269-3161
4/21/2021
4/25/2021
Hamburg
RS
71784-357
17
Brad Johnson
Flash Delivery
$797.00
2362 Wong St.
574-7619
4/12/2018
4/14/2018
Sidney
RS
96255-357
18
Joe Wong
Speedy Express
$363.00
9078 Smith St.
840-5866
9/13/2017
9/15/2017
Florence
RS
17529-532
19
Sue Peters
Speedy Express
$1,420.00
6747 Brown St.
844-2932
3/5/2018
3/8/2018
Paris
CS
82228-665
20
Chris Brown
Flash Delivery
$2,535.00
6767 Johnson St.
303-5014
2/1/2021
2/3/2021
Sidney
RN
78813-758
21
Brad Johnson
Speedy Express
$1,277.00
2362 Wong St.
574-7619
1/15/2020
1/18/2020
Sidney
RS
96255-357
22
Brad Johnson
Logitrax
$3,698.00
2362 Wong St.
574-7619
6/20/2019
6/23/2019
Sidney
RS
96255-357
23
Chris Bannon
Logitrax
$2,329.00
3784 Smith St.
410-8517
8/18/2021
8/19/2021
Paris
RS
73487-181
24
Aaron Peters
Logitrax
$101.00
9355 Brown St.
648-5694
9/4/2018
9/5/2018
Rome
SC
34382-856

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