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
Brad Adams
Logitrax
$4,045.00
4604 White St.
262-6494
1/24/2023
1/28/2023
Hamburg
RT
40878-658
1
Joe Brown
Logitrax
$558.00
6964 Brown St.
527-8669
4/6/2023
4/7/2023
Rome
SC
77782-530
2
Tony Brown
Flash Delivery
$3,737.00
7572 Richards St.
776-6633
10/26/2024
10/30/2024
Sidney
CS
94557-430
3
Paul Smith
Flash Delivery
$3,301.00
2648 Bannon St.
728-9093
1/16/2025
1/17/2025
Hamburg
RS
31359-989
4
John Wong
Logitrax
$4,807.00
7232 Richards St.
951-7929
4/7/2021
4/9/2021
Florence
CS
50726-967
5
Brad Richards
Flash Delivery
$1,486.00
5185 Brown St.
485-9285
8/11/2022
8/13/2022
Paris
RT
87213-429
6
Tom White
Flash Delivery
$4,240.00
7580 Adams St.
957-5536
9/1/2020
9/5/2020
Paris
RS
86855-526
7
Tom Brown
Flash Delivery
$630.00
6777 Brown St.
209-3409
6/23/2024
6/24/2024
Cairo
RN
20136-684
8
Frank Wong
Logitrax
$1,291.00
8721 Peters St.
604-1493
10/12/2023
10/15/2023
Hamburg
SP
70519-908
9
Aaron Peters
Logitrax
$3,556.00
8803 Bannon St.
150-9428
6/23/2023
6/24/2023
Sidney
SP
42421-710
10
Tom Brown
Flash Delivery
$870.00
1820 Richards St.
551-1666
12/6/2022
12/9/2022
Cairo
RS
97903-169
11
Joe Peters
Flash Delivery
$1,250.00
9145 Richards St.
366-7392
4/13/2018
4/17/2018
York
SC
43063-481
12
Frank Johnson
Flash Delivery
$978.00
6224 Johnson St.
733-1384
5/12/2017
5/16/2017
Hamburg
RN
33914-862
13
Chris Bannon
Flash Delivery
$3,173.00
8976 Adams St.
845-2367
12/6/2022
12/7/2022
Florence
RS
78268-485
14
Aaron Brown
Flash Delivery
$1,356.00
5132 Peters St.
240-8141
3/31/2017
4/4/2017
Hamburg
RN
65021-907
15
Bill Peters
Logitrax
$173.00
8329 Richards St.
510-2466
5/3/2017
5/4/2017
Cairo
CS
68112-443
16
Paul Brown
Speedy Express
$2,846.00
5359 Brown St.
278-7114
10/31/2022
11/3/2022
Sidney
RT
73362-809
17
Aaron White
Flash Delivery
$2,620.00
3608 Bannon St.
996-7788
3/29/2018
4/1/2018
Rome
RT
61024-799
18
Brad Richards
Flash Delivery
$3,426.00
5185 Brown St.
485-9285
6/13/2024
6/17/2024
Paris
RT
87213-429
19
Aaron White
Flash Delivery
$3,884.00
3608 Bannon St.
996-7788
5/9/2022
5/11/2022
Rome
RT
61024-799
20
John Richards
Logitrax
$1,347.00
9255 White St.
712-2996
10/18/2023
10/20/2023
Florence
RS
58720-255
21
Brad Richards
Flash Delivery
$4,653.00
5185 Brown St.
485-9285
2/6/2022
2/8/2022
Paris
RT
87213-429
22
John White
Speedy Express
$3,008.00
4736 Richards St.
561-1375
9/18/2019
9/22/2019
Cairo
RS
69066-661
23
John White
Flash Delivery
$1,095.00
3756 Smith St.
657-4523
2/9/2022
2/11/2022
Paris
SC
96252-230
24
Brad Richards
Speedy Express
$596.00
5185 Brown St.
485-9285
9/26/2019
9/29/2019
Paris
RT
87213-429

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