[HxMultiSelect] filtering and select all

BlazorAppTest/Pages/HxMultiSelectTest.razor

@@ -1,38 +1,74 @@
 @page "/HxMultiSelectTest"
 @using System.Globalization
 
-<h1>HxCheckboxList</h1>
+<h1>HxMultiSelect</h1>
 
 <HxSwitch Text="Enabled" @bind-Value="@enabled" />
 
 <EditForm Model="@model">
 	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Small" />
+
 	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" />
-	<HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />
+
+    <HxMultiSelect TItem="CultureInfo" TValue="string" Label="Cultures" EmptyText="-- choose here --" TextSelector="@(item => item.EnglishName)" ValueSelector="@(item => item.EnglishName)" Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." Enabled="@enabled" InputSize="InputSize.Large" />
+
+    <!-- Multi-select with default filtering and select all -->
+    <HxMultiSelect TItem="CultureInfo"
+                   TValue="string"
+                   Label="Cultures with default filtering and select all enabled"
+                   EmptyText="-- choose here --"
+                   TextSelector="@(item => item.EnglishName)"
+                   ValueSelector="@(item => item.EnglishName)"
+                   Data="@data"
+                   @bind-Value="@model.CultureInfos"
+                   NullDataText="Loading languages..."
+                   AllowFiltering="true"
+                   AllowSelectAll="true"
+                   Enabled="@enabled" />
+
+    <!-- Multi-select with custom filtering and select all -->
+    <HxMultiSelect TItem="CultureInfo"
+                   TValue="string"
+                   Label="Cultures with custom filtering and select all enabled"
+                   EmptyText="-- choose here --"
+                   TextSelector="@(item => item.EnglishName)"
+                   ValueSelector="@(item => item.EnglishName)"
+                   Data="@data"
+                   @bind-Value="@model.CultureInfos"
+                   NullDataText="Loading languages..."
+                   AllowFiltering="true"
+                   AllowSelectAll="true"
+                   SelectAllText="Select all cultures"
+                   ClearFilterOnHide="false"
+                   Enabled="@enabled">
+        <FilterEmptyResultTemplate>
+            <span class="p-2">Couldn't find any matching cultures</span>
+        </FilterEmptyResultTemplate>
+    </HxMultiSelect>
 </EditForm>
 
 <p>Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty<string>())</p>
 
 @code
 {
-	private bool enabled = true;
-	private Model model = new Model();
-	private List<CultureInfo> data;
-
-	protected override async Task OnParametersSetAsync()
-	{
-		await base.OnParametersSetAsync();
-		await Task.Delay(3000);
-
-		data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
-		.OrderBy(item => item.EnglishName)
-		.Take(100)
-		.OrderByDescending(i => i.ToString()) // sorting test
-		.ToList();
-	}
-
-	private class Model
-	{
-		public List<string> CultureInfos { get; set; }
-	}
+    private bool enabled = true;
+    private Model model = new Model();
+    private List<CultureInfo> data;
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await base.OnParametersSetAsync();
+        await Task.Delay(3000);
+
+        data = CultureInfo.GetCultures(CultureTypes.SpecificCultures)
+            .OrderBy(item => item.EnglishName)
+            .Take(100)
+            .OrderByDescending(i => i.ToString()) // sorting test
+            .ToList();
+    }
+
+    private class Model
+    {
+        public List<string> CultureInfos { get; set; }
+    }
 }

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_DataProvider.razor

@@ -8,7 +8,7 @@
 @code {
 	private Task<GridDataProviderResult<CultureInfo>> GetGridData(GridDataProviderRequest<CultureInfo> request)
 	{
-        // you usualy pass the data-request to your API/DataLayer and it returns just the few requested items (+ total count)
+        // you usually pass the data-request to your API/DataLayer and it returns just the few requested items (+ total count)
 
         var cultureInfos = CultureInfo.GetCultures(CultureTypes.AllCultures).ToList();
         cultureInfos.Sort(request.Sorting.ToGenericPropertyComparer()); // Just a demo. NEVER use in production code!

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor

@@ -0,0 +1,32 @@
+<HxMultiSelect Label="Band members"
+               TItem="Person"
+               TValue="string"
+               Data="@people"
+               @bind-Value="@selectedPersonsInitials"
+               TextSelector="@(p => p.Name)"
+               ValueSelector="@(p => p.Initials)"
+               NullDataText="Loading band members..."
+               AllowFiltering="true"
+               FilterEmptyResultText="No results were found" />
+
+<p class="mt-3">Selected initials: @String.Join(' ', selectedPersonsInitials)</p>
+
+@code {
+    private List<Person> people;
+    private List<string> selectedPersonsInitials { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+		await Task.Delay(1000); // simulates slow server API call
+
+        people = new List<Person>
+        {
+            new Person("Starr Ringo", "RS"),
+            new Person("Lennon John", "JL"),
+            new Person("McCartney Paul", "PMC"),
+            new Person("Harrison George", "GH")
+        };
+    }
+
+    private record Person(string Name, string Initials);
+}

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor

@@ -0,0 +1,32 @@
+<HxMultiSelect Label="Band members"
+               TItem="Person"
+               TValue="string"
+               Data="@people"
+               @bind-Value="@selectedPersonsInitials"
+               TextSelector="@(p => p.Name)"
+               ValueSelector="@(p => p.Initials)"
+               NullDataText="Loading band members..."
+               AllowSelectAll="true"
+               SelectAllText="Select all"/>
+
+<p class="mt-3">Selected initials: @String.Join(' ', selectedPersonsInitials)</p>
+
+@code {
+    private List<Person> people;
+    private List<string> selectedPersonsInitials { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+		await Task.Delay(1000); // simulates slow server API call
+
+        people = new List<Person>
+        {
+            new Person("Starr Ringo", "RS"),
+            new Person("Lennon John", "JL"),
+            new Person("McCartney Paul", "PMC"),
+            new Person("Harrison George", "GH")
+        };
+    }
+
+    private record Person(string Name, string Initials);
+}

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor

@@ -0,0 +1,44 @@
+<HxMultiSelect Label="Band members"
+               TItem="Person"
+               TValue="string"
+               Data="@people"
+               @bind-Value="@selectedPersonsInitials"
+               TextSelector="@(p => p.Name)"
+               ValueSelector="@(p => p.Initials)"
+               NullDataText="Loading band members..."
+               AllowFiltering="true"
+               ClearFilterOnHide="false"
+               FilterPredicate="IsRecordIncluded">
+    <FilterEmptyResultTemplate>
+        <HxIcon Icon="BootstrapIcon.EmojiFrown" /> No items found
+    </FilterEmptyResultTemplate>
+</HxMultiSelect>
+
+<p class="mt-3">Selected initials: @String.Join(' ', selectedPersonsInitials)</p>
+
+@code {
+    private List<Person> people;
+    private List<string> selectedPersonsInitials { get; set; } = new();
+
+    protected override async Task OnInitializedAsync()
+    {
+        await Task.Delay(1000); // simulates slow server API call
+
+        people = new List<Person>
+        {
+            new Person("Starr Ringo", "RS"),
+            new Person("Lennon John", "JL"),
+            new Person("McCartney Paul", "PMC"),
+            new Person("Harrison George", "GH")
+        };
+    }
+
+    private bool IsRecordIncluded(Person person, string filter)
+    {
+        return string.IsNullOrWhiteSpace(filter)
+			|| person.Name.Contains(filter, StringComparison.OrdinalIgnoreCase)
+			|| person.Initials.Contains(filter, StringComparison.OrdinalIgnoreCase);
+    }
+
+    private record Person(string Name, string Initials);
+}

Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor

@@ -4,7 +4,16 @@
     <MainContent>
 
         <DocHeading Title="Basic usage" />
-        <Demo Type="typeof(HxMultiSelect_Demo_BasicUsage)" Tabs="false" />
+        <Demo Type="typeof(HxMultiSelect_Demo_BasicUsage)" />
+
+        <DocHeading Title="Basic filtering" />
+        <Demo Type="typeof(HxMultiSelect_Demo_BasicFiltering)" />
+
+        <DocHeading Title="Custom filtering" />
+        <Demo Type="typeof(HxMultiSelect_Demo_TemplatedFiltering)" />
+
+        <DocHeading Title="Select all" />
+        <Demo Type="typeof(HxMultiSelect_Demo_SelectAll)" />
 
     </MainContent>
     <CssVariables>

Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml

@@ -2701,34 +2701,17 @@
         <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxInputDateRangeInternal.DisposeAsync">
             <inheritdoc />
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupCssClass">
-            <summary>
-            Custom CSS class to render with input-group span.
-            </summary>
-        </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupStartText">
-            <summary>
-            Input-group at the beginning of the input.
-            </summary>
-        </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupStartTemplate">
-            <summary>
-            Input-group at the beginning of the input.
-            </summary>
-        </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupEndText">
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.AdditionalAttributes">
             <summary>
-            Input-group at the end of the input.
+            Additional attributes to be splatted onto an underlying HTML element.
             </summary>
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.InputGroupEndTemplate">
-            <summary>
-            Input-group at the end of the input.
-            </summary>
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.OnAfterRenderAsync(System.Boolean)">
+            <inheritdoc cref="M:Microsoft.AspNetCore.Components.ComponentBase.OnAfterRenderAsync(System.Boolean)" />
         </member>
-        <member name="P:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.AdditionalAttributes">
+        <member name="M:Havit.Blazor.Components.Web.Bootstrap.Internal.HxMultiSelectInternal`2.HandleJsHidden">
             <summary>
-            Additional attributes to be splatted onto an underlying HTML element.
+            Receives notification from JavaScript when item is hidden.
             </summary>
         </member>
         <member name="T:Havit.Blazor.Components.Web.Bootstrap.Internal.IFormValueComponent">
@@ -4384,6 +4367,52 @@
             Input-group at the end of the input.
             </summary>
         </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.AllowFiltering">
+            <summary>
+            Enables filtering capabilities.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FilterPredicate">
+            <summary>
+            Defines a custom filtering predicate to apply to the list of items.
+            If not specified, the default behavior filters items based on whether the item text (obtained via TextSelector) contains the filter query string.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.ClearFilterOnHide">
+            <summary>
+            When enabled the filter will be cleared when the dropdown is closed.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FilterEmptyResultTemplate">
+            <summary>
+            Template that defines what should be rendered in case of empty items.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FilterEmptyResultText">
+            <summary>
+            Text to display when the filtered results list is empty and when not using <see cref="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FilterEmptyResultTemplate"/>.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.AllowSelectAll">
+            <summary>
+            Enables select all capabilities.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.SelectAllText">
+            <summary>
+            Text to display for the select all dropdown option.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FilterSearchIcon">
+            <summary>
+            Icon displayed in filter input for searching the filter.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FilterClearIcon">
+            <summary>
+            Icon displayed in filter input for clearing the filter.
+            </summary>
+        </member>
         <member name="M:Havit.Blazor.Components.Web.Bootstrap.HxMultiSelect`2.FocusAsync">
             <inheritdoc cref="M:Havit.Blazor.Components.Web.Bootstrap.HxInputBase`1.FocusAsync"/>
         </member>
@@ -5021,6 +5050,31 @@
             Input size.
             </summary>
         </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.MultiSelectSettings.AllowFiltering">
+            <summary>
+            Enables filtering capabilities.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.MultiSelectSettings.AllowSelectAll">
+            <summary>
+            Enables select all capabilities.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.MultiSelectSettings.ClearFilterOnHide">
+            <summary>
+            When enabled the filter will be cleared when the dropdown is closed.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.MultiSelectSettings.FilterSearchIcon">
+            <summary>
+            Icon displayed in filter input for searching the filter.
+            </summary>
+        </member>
+        <member name="P:Havit.Blazor.Components.Web.Bootstrap.MultiSelectSettings.FilterClearIcon">
+            <summary>
+            Icon displayed in filter input for clearing the filter.
+            </summary>
+        </member>
         <member name="T:Havit.Blazor.Components.Web.Bootstrap.RadioButtonListSettings">
             <summary>
             Settings for <see cref="T:Havit.Blazor.Components.Web.Bootstrap.HxRadioButtonListBase`2"/>.