FlexGrid
FlexGrid
Filtering
This view shows how to use filtering in FlexGrid.
Features
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
ID
Start
End
Country
Product
Color
Amount
Amount2
Discount
Active
0
loading...
Settings
ExclusiveValueSearch:
Description
This view shows how to use filtering in FlexGrid.
The ExclusiveValueSearch is an advanced property to customize the behavior while searching filter value in column filter box.
You can toggle check ExclusiveValueSearch then click on column filter icon, uncheck some values and input value into search box for observing how it work.
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 | using C1.Web.Mvc; using MvcExplorer.Models; using System; using System.Collections.Generic; using System.Linq; using Microsoft.AspNetCore.Mvc; using C1.Web.Mvc.Serialization; using Microsoft.AspNetCore.Http; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private static IEnumerable<Sale> _filterDataModel = Sale.GetData(500).ToList(); private static OptionItem CreateOptionItem() { return new OptionItem { Values = new List<string> { "None", "Condition", "Value", "Both" }, CurrentValue = "Both" }; } private readonly ControlOptions _gridFilterModel = new ControlOptions { Options = new OptionDictionary { {"Country", CreateOptionItem()}, {"Product", CreateOptionItem()}, {"Color", CreateOptionItem()}, {"Amount", CreateOptionItem()}, {"Active", CreateOptionItem()} } }; public ActionResult Filter(IFormCollection data) { _gridFilterModel.LoadPostData(data); ViewBag.DemoOptions = _gridFilterModel; ViewBag.FilterTypes = GetFilterTypes(_gridFilterModel); return View(); } public ActionResult Filter_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, _filterDataModel)); } 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 48 49 50 51 52 53 54 55 | @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; Dictionary<string, FilterType> filterTypes = ViewBag.FilterTypes; ViewBag.DemoSettings = true; } <script type="text/javascript"> function toggleExclusiveValueSearch(e) { var exclusiveValueSearch = e.target.checked; var filteringGrid = wijmo.Control.getControl('#filteringGrid'); var flexGridFilter = c1.getExtenders(filteringGrid, wijmo.grid.filter.FlexGridFilter)[0]; var cols = filteringGrid.columns; for (var i = 0; i < cols.length; i++) { var colFilter = flexGridFilter.getColumnFilter(cols[i]); if (colFilter) { colFilter.valueFilter.exclusiveValueSearch = exclusiveValueSearch; } } } </script> <c1-flex-grid id="filteringGrid" auto-generate-columns="false" is-read-only="true" selection-mode="Row" sorting-type="SingleColumn" class="grid"> <c1-items-source page-size="25" read-action-url="@Url.Action("Filter_Bind")"></c1-items-source> <c1-flex-grid-column binding="ID"></c1-flex-grid-column> <c1-flex-grid-column binding="Start"></c1-flex-grid-column> <c1-flex-grid-column binding="End" format="t"></c1-flex-grid-column> <c1-flex-grid-column binding="Country"></c1-flex-grid-column> <c1-flex-grid-column binding="Product"></c1-flex-grid-column> <c1-flex-grid-column binding="Color"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Amount2" format="c"></c1-flex-grid-column> <c1-flex-grid-column binding="Discount" format="p0"></c1-flex-grid-column> <c1-flex-grid-column binding="Active"></c1-flex-grid-column> <c1-flex-grid-filter default-filter-type="Both" exclusive-value-search="true"> <c1-flex-grid-column-filter column="Country" filter-type="@filterTypes["Country"]"></c1-flex-grid-column-filter> <c1-flex-grid-column-filter column="Product" filter-type="@filterTypes["Product"]"></c1-flex-grid-column-filter> <c1-flex-grid-column-filter column="Color" filter-type="@filterTypes["Color"]"></c1-flex-grid-column-filter> <c1-flex-grid-column-filter column="Amount" filter-type="@filterTypes["Amount"]"></c1-flex-grid-column-filter> <c1-flex-grid-column-filter column="Active" filter-type="@filterTypes["Active"]"></c1-flex-grid-column-filter> </c1-flex-grid-filter> </c1-flex-grid> <c1-pager owner="filteringGrid"></c1-pager> @section Settings{ <p>@await Html.PartialAsync("_OptionsMenu", optionsModel)</p> ExclusiveValueSearch: <input id="exclusiveValueSearch" type="checkbox" checked="checked" onchange="toggleExclusiveValueSearch(event)" /> } @section Description{ <p>@Html.Raw(FlexGridRes.Filter_Text0)</p> <p>@Html.Raw(FlexGridRes.Filter_Text1)</p> } |