FlexGrid
FlexGrid
Searching
The FlexGridSearch control provides a simple UI for performing full-text searches on FlexGrid controls.
Features
ID
Start
End
Country
Product
Amount
Amount2
Discount
Active
ID
Start
End
Country
Product
Amount
Amount2
Discount
Active
0
loading...
The total item count is now .
Settings
Description
The FlexGridSearch control provides a simple UI for performing full-text searches on FlexGrid controls.
It filters the data and highlights matches on the grid as you type.
The same FlexGrid control can be filtered by the FlexGridSearch control and filter feature at the same time.
You can also specify the CaseSensitiveSearch property of FlexGrid to determine whether the search is case-sensitive or not.
SearchAllColumns: Determines whether invisible columns should be included in the search.
In this sample, Color column is invisible. You can try by search with words Red or White.
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 | using System.Collections.Generic; using Microsoft.AspNetCore.Mvc; using Microsoft.AspNetCore.Http; using C1.Web.Mvc; using C1.Web.Mvc.Serialization; using MvcExplorer.Models; namespace MvcExplorer.Controllers { public partial class FlexGridController : Controller { private readonly ControlOptions _gridSearchOptions = new ControlOptions { Options = new OptionDictionary { {"Delay",new OptionItem{Values = new List<string> {"100", "300", "500", "800", "1000"}, CurrentValue = "500"}}, {"Css Match", new OptionItem {Values = new List<string> {"Default", "color-match", "underline-match", "style-match"}, CurrentValue = "Default"}}, {"Case Sensitive Search", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}}, {"Search All Columns", new OptionItem {Values = new List<string> {"True", "False"}, CurrentValue = "True"}} } }; public ActionResult Searching(IFormCollection data) { _gridSearchOptions.LoadPostData(data); ViewBag.DemoOptions = _gridSearchOptions; return View(); } public ActionResult Searching_Bind([C1JsonRequest] CollectionViewRequest<Sale> requestData) { return this.C1Json(CollectionViewHelper.Read(requestData, Sale.GetData(200))); } } } |
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 | @model IEnumerable<Sale> @{ ControlOptions optionsModel = ViewBag.DemoOptions; ViewBag.DemoSettings = true; var cssMatch = optionsModel.Options["Css Match"].CurrentValue; if (cssMatch == "Default") { cssMatch = "wj-state-match"; } } <p id="theSearch" style="width:300px;"></p> <c1-flex-grid id="theFlexGrid" class="grid" auto-generate-columns="false" is-read-only="true" auto-search="true" case-sensitive-search="@(Convert.ToBoolean(optionsModel.Options["Case Sensitive Search"].CurrentValue))"> <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"></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" is-visible="@false"></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-items-source read-action-url="@Url.Action("Searching_Bind")"></c1-items-source> <c1-flex-grid-filter default-filter-type="Both"></c1-flex-grid-filter> </c1-flex-grid> <c1-flex-grid-search id="theSearch" grid="theFlexGrid" placeholder="@Html.Raw(FlexGridRes.EnterTextSearch_Text0)" delay="@(Convert.ToInt32(optionsModel.Options["Delay"].CurrentValue))" css-match="@cssMatch" search-all-columns="@(Convert.ToBoolean(optionsModel.Options["Search All Columns"].CurrentValue))"></c1-flex-grid-search> <p> @Html.Raw(FlexGridRes.Searching_Text2) <b><span id="searchCount"></span></b>. </p> <style type="text/css"> .color-match { color: orangered !important; background-color: #C3EFA2 !important; font-weight: bold; } .underline-match { color: black !important; background-color: yellow !important; font-weight: bold; text-decoration: underline !important; } .style-match { color: darkgreen !important; background-color: lightyellow !important; font-style: oblique; text-shadow: 2px 2px 5px green; } </style> @section Scripts { <script> function saveValue(key, value) { if (sessionStorage) { sessionStorage.setItem(key, value); } else { $.cookies.set(key, value); } } function getValue(key) { if (sessionStorage) { return sessionStorage.getItem(key); } else { return $.cookies.get(key); } } function updateSearchCount(theGrid) { let cnt = theGrid.collectionView.items.length; document.getElementById('searchCount').textContent = cnt; } window.onbeforeunload = function () { let theSearch = wijmo.Control.getControl("#theSearch"); saveValue("SearchValue", theSearch.text || ""); } c1.documentReady(function () { let theSearch = wijmo.Control.getControl("#theSearch"); theSearch.text = getValue("SearchValue") || theSearch.text || ""; let theGrid = wijmo.Control.getControl("#theFlexGrid"); theGrid.collectionView.collectionChanged.addHandler(function () { updateSearchCount(theGrid); }); }); </script>} @section Settings { @await Html.PartialAsync("_OptionsMenu", optionsModel) } @section Summary { <p>@Html.Raw(FlexGridRes.Searching_Text0)</p> } @section Description { <p>@Html.Raw(FlexGridRes.Searching_Text1)</p> <p>@Html.Raw(FlexGridRes.Searching_Text3)</p> <p>@Html.Raw(FlexGridRes.Searching_SearchAllColumns)</p> } |