FlexGrid
Searching
The FlexGridSearch control provides a simple UI for performing full-text searches on FlexGrid controls.
Features
Sample
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.
Source
SearchingController.cs
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"}} } }; 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))); } } }
Searching.cshtml
@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"></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"></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> }
Documentation