[docs] HxGrid - individual column searching demo

havit · Feb 20, 2023 · 1a736a0 · 1a736a0
1 parent 9d3d3aa
commit 1a736a0
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 0 deletions.
diff --git a/....Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_ColumnSearching.razor b/....Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_ColumnSearching.razor
@@ -0,0 +1,50 @@
+@using System.Globalization;
+
+<HxGrid @ref="grid" TItem="CultureInfo" Responsive="true" DataProvider="GetGridData" PageSize="10">
+	<Columns>
+		<HxGridColumn HeaderText="LCID" ItemTextSelector="@(item => item.LCID.ToString())">
+			<HeaderTemplate>
+				<HxInputText @bind-Value="lcidSearchString" @onfocusout="RefreshData" />
+			</HeaderTemplate>
+		</HxGridColumn>
+		<HxGridColumn HeaderText="DisplayName" ItemTextSelector="@(item => item.DisplayName)">
+			<HeaderTemplate>
+				<HxInputText @bind-Value="displayNameSearchString" @onfocusout="RefreshData" />
+			</HeaderTemplate>
+		</HxGridColumn>
+		<HxGridColumn HeaderText="Name" ItemTextSelector="@(item => item.Name)">
+			<HeaderTemplate>
+				<HxInputText @bind-Value="nameSearchString" @onfocusout="RefreshData" />
+			</HeaderTemplate>
+		</HxGridColumn>
+		<HxGridColumn HeaderText="EnglishName" ItemTextSelector="@(item => item.EnglishName)">
+			<HeaderTemplate>
+				<HxInputText @bind-Value="englishNameSearchString" @onfocusout="RefreshData" />
+			</HeaderTemplate>
+		</HxGridColumn>
+	</Columns>
+</HxGrid>
+
+@code {
+	private List<CultureInfo> localCultureInfos = CultureInfo.GetCultures(CultureTypes.AllCultures).ToList();
+	private string lcidSearchString = string.Empty, displayNameSearchString = string.Empty, nameSearchString = string.Empty, englishNameSearchString = string.Empty;
+
+	private HxGrid<CultureInfo> grid;
+
+	private Task<GridDataProviderResult<CultureInfo>> GetGridData(GridDataProviderRequest<CultureInfo> request)
+	{
+		// Remove items not containing the search strings. Where statements were separated to increase readability.
+		var filteredCultureInfos = localCultureInfos?
+			.Where(i => i.LCID.ToString().Contains(lcidSearchString))
+			.Where(i => i.DisplayName?.Contains(displayNameSearchString) ?? true)
+			.Where(i => i.Name?.Contains(nameSearchString) ?? true)
+			.Where(i => i.EnglishName?.Contains(englishNameSearchString) ?? true) ?? new List<CultureInfo>();
+
+		return Task.FromResult(request.ApplyTo(filteredCultureInfos));
+	}
+
+	private async Task RefreshData()
+	{
+		await grid.RefreshDataAsync();
+	}
+}
diff --git a/...ponents.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Documentation.razor b/...ponents.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Documentation.razor
@@ -63,6 +63,10 @@
         <p>To achieve an inline-editing experience, you can use the <code>SelectedDataItem</code> and render editing UI for such items. Simply specify the content of the <code>ItemTemplate</code> in <code>HxGridColumn</code> and use the <code>SelectedDataItemChanged</code> event to save changes (or you can add a column with command buttons).</p>
         <Demo Type="typeof(HxGrid_Demo_InlineEditing)" />
 
+        <DocHeading Title="Individual column searching" Id="column-searching" />
+        <p>Individual column searching can be set up by putting for instance <a href="@($"/components/{nameof(HxInputText)}")">@nameof(HxInputText)</a> components into the columns' <code>HeaderTemplate</code>s and filtering the data in the <code>DataProvider</code> based on the user provided values.</p>
+        <Demo Type="typeof(HxGrid_Demo_ColumnSearching)" />
+
         <DocHeading Title="Hoverable rows" Id="hover" />
         <p>You can set <code>@nameof(HxGrid<TItem>.Hover)</code> parameter to enable/disable hover state on rows. If not set, hover state is enabled if the grid has selection enabled.</p>
         <Demo Type="typeof(HxGrid_Demo_Hover)" />

diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Shared/Components/Search/Search.razor.cs b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Shared/Components/Search/Search.razor.cs
@@ -66,6 +66,7 @@ private SearchItem SelectedResult
 		new("/components/HxGrid#ContextMenu", "HxGrid > Context menu", ""),
 		new("/components/HxGrid#Multiselect", "HxGrid > Multiselect with checkboxes", ""),
 		new("/components/HxGrid#inline-editing", "HxGrid > Inline-editing", ""),
+		new("/components/HxGrid#column-searching", "HxGrid > Individual column searching", ""),
 		new("/components/HxIcon", "HxIcon", "bootstrap picture image font"),
 		new("/components/HxInputDate", "HxInputDate", "datepicker"),
 		new("/components/HxInputDateRange", "HxInputDateRange", "period datepicker"),