From fcce4555ebe1e708eeb5e00792f40c2dc098edd7 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Mon, 9 Oct 2023 01:35:46 +1100 Subject: [PATCH 01/36] Added HxMultiSelect filtering --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 71 ++++-- .../Havit.Blazor.Components.Web.Bootstrap.xml | 54 ++++- .../Forms/HxMultiSelect.cs | 30 ++- .../Internal/HxMultiSelectInternal.razor | 30 +-- .../Internal/HxMultiSelectInternal.razor.cs | 221 +++++++++++++++--- .../wwwroot/HxMultiSelect.js | 50 ++++ 6 files changed, 373 insertions(+), 83 deletions(-) create mode 100644 Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index 70a5645d5..c45e105d3 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -1,38 +1,61 @@ @page "/HxMultiSelectTest" @using System.Globalization -

HxCheckboxList

+

HxMultiSelect

+ +

Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty())

+ - - -

Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty())

+ + + + + @code { - private bool enabled = true; - private Model model = new Model(); - private List 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 CultureInfos { get; set; } - } + private bool enabled = true; + private Model model = new Model(); + private List data; + + private HxMultiSelect hxMultiSelectFilter; + + 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 CultureInfos { get; set; } + } + + private bool FilterSelector(CultureInfo item, string filter) + { + return string.IsNullOrWhiteSpace(filter) || item.EnglishName.Contains(filter, StringComparison.OrdinalIgnoreCase); + } } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 6e31b54ab..50206bac4 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2701,14 +2701,24 @@ + + + Additional attributes to be splatted onto an underlying HTML element. + + Custom CSS class to render with input-group span. - + - Input-group at the beginning of the input. + Input-group at the end of the input. + + + + + Input-group at the end of the input. @@ -2716,21 +2726,49 @@ Input-group at the beginning of the input. - + - Input-group at the end of the input. + Input-group at the beginning of the input. - + - Input-group at the end of the input. + This event is fired when a dropdown element has been hidden from the user (will wait for CSS transitions to complete). - + - Additional attributes to be splatted onto an underlying HTML element. + This event is fired when a dropdown element has been made visible to the user (will wait for CSS transitions to complete). + + + + + Receives notification from JavaScript when item is hidden. + + + Collapses the item. + + + + + Expands the item. + + + + + Triggers the event. Allows interception of the event in derived components. + + + + + Triggers the event. Allows interception of the event in derived components. + + + + + Represents properties (and methods) of a component rendering a form value (ie. form inputs). diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 25d5cbc37..8ff8804ed 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -110,6 +110,11 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// [Parameter] public RenderFragment InputGroupEndTemplate { get; set; } + [Parameter] public bool EnableFiltering { get; set; } + + [Parameter] public Func FilterSelector { get; set; } = (_, _) => true; + + private bool IsShown { get; set; } private List itemsToRender; private HxMultiSelectInternal hxMultiSelectInternalComponent; @@ -152,6 +157,16 @@ private void HandleItemSelectionChanged(bool @checked, TItem item) CurrentValue = newValue; // setter includes ValueChanged + NotifyFieldChanged } + private void HandleOnHiddenChanged() + { + IsShown = false; + } + + private void HandleOnShownChanged() + { + IsShown = true; + } + protected override bool TryParseValueFromString(string value, out List result, out string validationErrorMessage) { throw new NotSupportedException(); @@ -181,13 +196,17 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(105, nameof(HxMultiSelectInternal.ItemsToRender), itemsToRender); builder.AddAttribute(106, nameof(HxMultiSelectInternal.TextSelector), TextSelector); builder.AddAttribute(107, nameof(HxMultiSelectInternal.ValueSelector), ValueSelector); - builder.AddAttribute(108, nameof(HxMultiSelectInternal.Value), Value); + builder.AddAttribute(108, nameof(HxMultiSelectInternal.SelectedValues), Value); builder.AddAttribute(109, nameof(HxMultiSelectInternal.NullDataText), NullDataText); builder.AddAttribute(110, nameof(HxMultiSelectInternal.ItemSelectionChanged), EventCallback.Factory.Create.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.Checked, args.Item))); builder.AddAttribute(111, nameof(HxMultiSelectInternal.InputGroupStartText), InputGroupStartText); builder.AddAttribute(112, nameof(HxMultiSelectInternal.InputGroupStartTemplate), InputGroupStartTemplate); builder.AddAttribute(113, nameof(HxMultiSelectInternal.InputGroupEndText), InputGroupEndText); builder.AddAttribute(114, nameof(HxMultiSelectInternal.InputGroupEndTemplate), InputGroupEndTemplate); + builder.AddAttribute(115, nameof(HxMultiSelectInternal.EnableFiltering), EnableFiltering); + builder.AddAttribute(116, nameof(HxMultiSelectInternal.FilterSelector), FilterSelector); + builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), EventCallback.Factory.Create(this, HandleOnHiddenChanged)); + builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), EventCallback.Factory.Create(this, HandleOnShownChanged)); builder.AddMultipleAttributes(200, this.AdditionalAttributes); @@ -202,7 +221,14 @@ private string GetInputText() { return InputText; } - else if ((InputTextSelector is null) || (Data is null) || (CurrentValue is null)) + + // If filtering is enabled and the dropdown is visible then we want to display the user-entered filter text instead of the selected values summary + if (EnableFiltering && IsShown) + { + return InputText; + } + + if ((InputTextSelector is null) || (Data is null) || (CurrentValue is null)) { return CurrentValueAsString; } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index d34819069..a7f095fd5 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -6,24 +6,23 @@ bool enabled = EnabledEffective && (ItemsToRender != null); } -
-
+
+
@if (InputGroupStartText is not null) { @InputGroupStartText } @InputGroupStartTemplate - - + + @InputGroupEndTemplate @@ -36,14 +35,15 @@
    @* Must be always rendered otherwise does not work after disable->enabled scenario *@ @if (enabled) { - for (int i = 0; i < ItemsToRender.Count; i++) + var filteredItems = EnableFiltering ? ItemsToRender.Where(x => FilterSelector(x, InputText)).ToList() : ItemsToRender; + for (var i = 0; i < filteredItems.Count; i++) { string checkboxElementId = InputId + "_" + i.ToString(); - var item = ItemsToRender[i]; + var item = filteredItems[i]; TValue value = SelectorHelpers.GetValue(ValueSelector, item); - bool itemSelected = Value?.Contains(value) ?? false; + bool itemSelected = SelectedValues?.Contains(value) ?? false;
    @* Must be always rendered otherwise does not work after disable->enabled scenario *@ - @if (enabled) + @if (enabled && EnableFiltering) { - + } - var filteredItems = EnableFiltering ? ItemsToRender.Where(x => FilterSelector(x, InputText)).ToList() : ItemsToRender; + @if (enabled) + { + var filteredItems = GetFilteredItems(); for (var i = 0; i < filteredItems.Count; i++) { string checkboxElementId = InputId + "_" + i.ToString(); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 65feac730..f64c3eebd 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -55,7 +55,9 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public bool EnableFiltering { get; set; } - [Parameter] public Func FilterSelector { get; set; } = (_, _) => true; + [Parameter] public Func FilterPredicate { get; set; } = (_, _) => true; + + [Parameter] public bool ClearFilterOnHide { get; set; } [Parameter] public EventCallback OnShown { get; set; } @@ -85,11 +87,13 @@ public HxMultiSelectInternal() /// protected virtual Task InvokeOnShownAsync(string elementId) => OnShown.InvokeAsync(elementId); + private IJSObjectReference jsModule; private readonly DotNetObjectReference> dotnetObjectReference; private ElementReference elementReference; + private ElementReference filterInputReference; private bool isShown; + private string filterText = string.Empty; private bool disposed; - private IJSObjectReference jsModule; private async Task HandleItemSelectionChangedAsync(bool newChecked, TItem item) { @@ -103,7 +107,17 @@ await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs private void HandleInputChanged(ChangeEventArgs e) { - InputText = e.Value?.ToString() ?? string.Empty; + filterText = e.Value?.ToString() ?? string.Empty; + } + + private List GetFilteredItems() + { + if (!EnableFiltering || string.IsNullOrEmpty(filterText)) + { + return ItemsToRender; + } + + return ItemsToRender.Where(x => FilterPredicate(x, filterText)).ToList(); } public async ValueTask FocusAsync() @@ -122,7 +136,12 @@ public async ValueTask FocusAsync() public Task HandleJsHidden() { isShown = false; - InputText = string.Empty; + + if (ClearFilterOnHide) + { + filterText = string.Empty; + } + return InvokeOnHiddenAsync(this.InputId); } @@ -130,6 +149,7 @@ public Task HandleJsHidden() public async Task HandleJsShown() { isShown = true; + await filterInputReference.FocusAsync(); await InvokeOnShownAsync(this.InputId); } @@ -161,6 +181,24 @@ public async ValueTask DisposeAsync() await DisposeAsyncCore(); } + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await EnsureJsModuleAsync(); + if (disposed) + { + return; + } + + await jsModule.InvokeVoidAsync("initialize", elementReference, dotnetObjectReference, false); + } + } + protected virtual async ValueTask DisposeAsyncCore() { disposed = true; From 74e58a55eea34a4f39b664e51f30c480b037b28f Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Tue, 10 Oct 2023 22:53:22 +1100 Subject: [PATCH 05/36] Added empty template and changed hide/show handlers --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 3 +- .../Havit.Blazor.Components.Web.Bootstrap.xml | 46 +++++++++++- .../Forms/HxMultiSelect.cs | 33 +++++---- .../Internal/HxMultiSelectInternal.razor | 5 ++ .../Internal/HxMultiSelectInternal.razor.cs | 72 +++++++++++-------- 5 files changed, 113 insertions(+), 46 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index 68be52b40..a35a7eaed 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -26,7 +26,8 @@ NullDataText="Loading languages..." EnableFiltering="true" FilterPredicate="((item, filterText) => FilterSelector(item, filterText))" - Enabled="@enabled" /> + Enabled="@enabled"> + @code diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index f6cd6a203..7066a7878 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2726,6 +2726,26 @@ Input-group at the end of the input. + + + Enables filtering capabilities. + + + + + This event is fired when a dropdown element has been made visible to the user. + + + + + This event is fired when a dropdown element has been hidden from the user. + + + + + Template that defines what should be rendered in case of empty items. + + Additional attributes to be splatted onto an underlying HTML element. @@ -2741,6 +2761,9 @@ Triggers the event. Allows interception of the event in derived components. + + + Receives notification from JavaScript when item is hidden. @@ -2756,9 +2779,6 @@ Expands the item. - - - Represents properties (and methods) of a component rendering a form value (ie. form inputs). @@ -4412,6 +4432,26 @@ Input-group at the end of the input. + + + Enables filtering capabilities. + + + + + This event is fired when a dropdown element has been made visible to the user. + + + + + This event is fired when a dropdown element has been hidden from the user. + + + + + Template that defines what should be rendered in case of empty items. + + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index a3319e5e8..1f06f207c 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -110,13 +110,29 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// [Parameter] public RenderFragment InputGroupEndTemplate { get; set; } + /// + /// Enables filtering capabilities. + /// [Parameter] public bool EnableFiltering { get; set; } [Parameter] public Func FilterPredicate { get; set; } = (_, _) => true; [Parameter] public bool ClearFilterOnHide { get; set; } - private bool IsShown { get; set; } + /// + /// This event is fired when a dropdown element has been made visible to the user. + /// + [Parameter] public EventCallback OnShown { get; set; } + + /// + /// This event is fired when a dropdown element has been hidden from the user. + /// + [Parameter] public EventCallback OnHidden { get; set; } + + /// + /// Template that defines what should be rendered in case of empty items. + /// + [Parameter] public RenderFragment EmptyTemplate { get; set; } private List itemsToRender; private HxMultiSelectInternal hxMultiSelectInternalComponent; @@ -159,16 +175,6 @@ private void HandleItemSelectionChanged(bool @checked, TItem item) CurrentValue = newValue; // setter includes ValueChanged + NotifyFieldChanged } - private void HandleOnHiddenChanged() - { - IsShown = false; - } - - private void HandleOnShownChanged() - { - IsShown = true; - } - protected override bool TryParseValueFromString(string value, out List result, out string validationErrorMessage) { throw new NotSupportedException(); @@ -207,9 +213,10 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(114, nameof(HxMultiSelectInternal.InputGroupEndTemplate), InputGroupEndTemplate); builder.AddAttribute(115, nameof(HxMultiSelectInternal.EnableFiltering), EnableFiltering); builder.AddAttribute(116, nameof(HxMultiSelectInternal.FilterPredicate), FilterPredicate); - builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), EventCallback.Factory.Create(this, HandleOnHiddenChanged)); - builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), EventCallback.Factory.Create(this, HandleOnShownChanged)); + builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), OnHidden); + builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), OnShown); builder.AddAttribute(119, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); + builder.AddAttribute(120, nameof(HxMultiSelectInternal.EmptyTemplate), EmptyTemplate); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 184bc279c..794633946 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -69,6 +69,11 @@ } + + if (filteredItems.Count <= 0) + { + @EmptyTemplate + } }
\ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index f64c3eebd..d792256fc 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -53,16 +53,30 @@ public partial class HxMultiSelectInternal : IAsyncDisposable /// [Parameter] public RenderFragment InputGroupEndTemplate { get; set; } + /// + /// Enables filtering capabilities. + /// [Parameter] public bool EnableFiltering { get; set; } [Parameter] public Func FilterPredicate { get; set; } = (_, _) => true; [Parameter] public bool ClearFilterOnHide { get; set; } - [Parameter] public EventCallback OnShown { get; set; } + /// + /// This event is fired when a dropdown element has been made visible to the user. + /// + [Parameter] public EventCallback OnShown { get; set; } + /// + /// This event is fired when a dropdown element has been hidden from the user. + /// [Parameter] public EventCallback OnHidden { get; set; } + /// + /// Template that defines what should be rendered in case of empty items. + /// + [Parameter] public RenderFragment EmptyTemplate { get; set; } + /// /// Additional attributes to be splatted onto an underlying HTML element. /// @@ -70,11 +84,6 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Inject] private IJSRuntime JSRuntime { get; set; } = default!; - public HxMultiSelectInternal() - { - dotnetObjectReference = DotNetObjectReference.Create(this); - } - protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null); /// @@ -95,6 +104,34 @@ public HxMultiSelectInternal() private string filterText = string.Empty; private bool disposed; + public HxMultiSelectInternal() + { + dotnetObjectReference = DotNetObjectReference.Create(this); + } + + /// + protected override async Task OnAfterRenderAsync(bool firstRender) + { + + await base.OnAfterRenderAsync(firstRender); + + if (firstRender) + { + await EnsureJsModuleAsync(); + if (disposed) + { + return; + } + + await jsModule.InvokeVoidAsync("initialize", elementReference, dotnetObjectReference, false); + } + } + + private async Task EnsureJsModuleAsync() + { + jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxMultiSelect)); + } + private async Task HandleItemSelectionChangedAsync(bool newChecked, TItem item) { await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs @@ -171,34 +208,11 @@ public async Task ShowAsync() await jsModule.InvokeVoidAsync("show", elementReference); } - private async Task EnsureJsModuleAsync() - { - jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxMultiSelect)); - } - public async ValueTask DisposeAsync() { await DisposeAsyncCore(); } - /// - protected override async Task OnAfterRenderAsync(bool firstRender) - { - - await base.OnAfterRenderAsync(firstRender); - - if (firstRender) - { - await EnsureJsModuleAsync(); - if (disposed) - { - return; - } - - await jsModule.InvokeVoidAsync("initialize", elementReference, dotnetObjectReference, false); - } - } - protected virtual async ValueTask DisposeAsyncCore() { disposed = true; From a659d9f5edb392cd3613ecb70a8453d22d022ce6 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Tue, 10 Oct 2023 23:11:35 +1100 Subject: [PATCH 06/36] Added default filter predicate --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 6 ------ .../Forms/HxMultiSelect.cs | 2 +- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 11 ++++++++--- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index a35a7eaed..afe21d949 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -25,7 +25,6 @@ @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." EnableFiltering="true" - FilterPredicate="((item, filterText) => FilterSelector(item, filterText))" Enabled="@enabled"> @@ -54,9 +53,4 @@ { public List CultureInfos { get; set; } } - - private bool FilterSelector(CultureInfo item, string filter) - { - return string.IsNullOrWhiteSpace(filter) || item.EnglishName.Contains(filter, StringComparison.OrdinalIgnoreCase); - } } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 1f06f207c..6c6e20d52 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -115,7 +115,7 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// [Parameter] public bool EnableFiltering { get; set; } - [Parameter] public Func FilterPredicate { get; set; } = (_, _) => true; + [Parameter] public Func FilterPredicate { get; set; } [Parameter] public bool ClearFilterOnHide { get; set; } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index d792256fc..fa98e58b7 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -58,7 +58,7 @@ public partial class HxMultiSelectInternal : IAsyncDisposable /// [Parameter] public bool EnableFiltering { get; set; } - [Parameter] public Func FilterPredicate { get; set; } = (_, _) => true; + [Parameter] public Func FilterPredicate { get; set; } [Parameter] public bool ClearFilterOnHide { get; set; } @@ -112,7 +112,6 @@ public HxMultiSelectInternal() /// protected override async Task OnAfterRenderAsync(bool firstRender) { - await base.OnAfterRenderAsync(firstRender); if (firstRender) @@ -154,7 +153,13 @@ private List GetFilteredItems() return ItemsToRender; } - return ItemsToRender.Where(x => FilterPredicate(x, filterText)).ToList(); + var filterPredicate = FilterPredicate ?? DefaultFilterPredicate; + return ItemsToRender.Where(x => filterPredicate(x, filterText)).ToList(); + + bool DefaultFilterPredicate(TItem item, string filter) + { + return string.IsNullOrWhiteSpace(filter) || TextSelector(item).Contains(filter, StringComparison.OrdinalIgnoreCase); + } } public async ValueTask FocusAsync() From 8632672e40f746667ac4a871b8102682908f4dd8 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Tue, 10 Oct 2023 23:15:59 +1100 Subject: [PATCH 07/36] Changed filtering enablement property --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 2 +- .../XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml | 4 ++-- Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs | 4 ++-- .../Forms/Internal/HxMultiSelectInternal.razor | 2 +- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 5 ++--- 5 files changed, 8 insertions(+), 9 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index afe21d949..b14808a45 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -24,7 +24,7 @@ Data="@data" @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." - EnableFiltering="true" + AllowFiltering="true" Enabled="@enabled"> diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 7066a7878..30a7813df 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2726,7 +2726,7 @@ Input-group at the end of the input. - + Enables filtering capabilities. @@ -4432,7 +4432,7 @@ Input-group at the end of the input. - + Enables filtering capabilities. diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 6c6e20d52..1a42631f4 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -113,7 +113,7 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// /// Enables filtering capabilities. /// - [Parameter] public bool EnableFiltering { get; set; } + [Parameter] public bool AllowFiltering { get; set; } [Parameter] public Func FilterPredicate { get; set; } @@ -211,7 +211,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(112, nameof(HxMultiSelectInternal.InputGroupStartTemplate), InputGroupStartTemplate); builder.AddAttribute(113, nameof(HxMultiSelectInternal.InputGroupEndText), InputGroupEndText); builder.AddAttribute(114, nameof(HxMultiSelectInternal.InputGroupEndTemplate), InputGroupEndTemplate); - builder.AddAttribute(115, nameof(HxMultiSelectInternal.EnableFiltering), EnableFiltering); + builder.AddAttribute(115, nameof(HxMultiSelectInternal.AllowFiltering), AllowFiltering); builder.AddAttribute(116, nameof(HxMultiSelectInternal.FilterPredicate), FilterPredicate); builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), OnHidden); builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), OnShown); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 794633946..34456afb1 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -32,7 +32,7 @@
    @* Must be always rendered otherwise does not work after disable->enabled scenario *@ - @if (enabled && EnableFiltering) + @if (enabled && AllowFiltering) { : IAsyncDisposable /// /// Enables filtering capabilities. /// - [Parameter] public bool EnableFiltering { get; set; } + [Parameter] public bool AllowFiltering { get; set; } [Parameter] public Func FilterPredicate { get; set; } @@ -140,7 +140,6 @@ await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs }); } - private void HandleInputChanged(ChangeEventArgs e) { filterText = e.Value?.ToString() ?? string.Empty; @@ -148,7 +147,7 @@ private void HandleInputChanged(ChangeEventArgs e) private List GetFilteredItems() { - if (!EnableFiltering || string.IsNullOrEmpty(filterText)) + if (!AllowFiltering || string.IsNullOrEmpty(filterText)) { return ItemsToRender; } From 3d48a112e4ab6ec3b7c5690867a0cf2c66a03738 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Tue, 10 Oct 2023 23:25:30 +1100 Subject: [PATCH 08/36] Added empty template --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 3 +++ .../Internal/HxMultiSelectInternal.razor | 27 ++++++++++--------- 2 files changed, 17 insertions(+), 13 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index b14808a45..1812a361c 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -26,6 +26,9 @@ NullDataText="Loading languages..." AllowFiltering="true" Enabled="@enabled"> + + Couldn't find any matching cultures + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 34456afb1..9ad69f7d9 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -32,22 +32,23 @@
    @* Must be always rendered otherwise does not work after disable->enabled scenario *@ - @if (enabled && AllowFiltering) - { - - } + @if (enabled) { + if (AllowFiltering) + { + + } + var filteredItems = GetFilteredItems(); for (var i = 0; i < filteredItems.Count; i++) { From 5612d244be6389cc318c7043808514c896eee3bd Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Tue, 10 Oct 2023 23:26:51 +1100 Subject: [PATCH 09/36] Changed default filter to use IsNullOrEmpty --- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 7a2e72885..adf245f6a 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -157,7 +157,7 @@ private List GetFilteredItems() bool DefaultFilterPredicate(TItem item, string filter) { - return string.IsNullOrWhiteSpace(filter) || TextSelector(item).Contains(filter, StringComparison.OrdinalIgnoreCase); + return string.IsNullOrEmpty(filter) || TextSelector(item).Contains(filter, StringComparison.OrdinalIgnoreCase); } } From 6769c7339525c658e768b0e4fd727aeba7838672 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 11 Oct 2023 00:23:37 +1100 Subject: [PATCH 10/36] Added select all --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 6 +- .../Forms/HxMultiSelect.cs | 9 +++ .../Internal/HxMultiSelectInternal.razor | 58 +++++++++++------- .../Internal/HxMultiSelectInternal.razor.cs | 61 ++++++++++++++++++- 4 files changed, 108 insertions(+), 26 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index 1812a361c..71470d97c 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -3,8 +3,6 @@

    HxMultiSelect

    -

    Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty())

    - @@ -25,6 +23,8 @@ @bind-Value="@model.CultureInfos" NullDataText="Loading languages..." AllowFiltering="true" + AllowSelectAll="true" + SelectAllText="Select all cultures" Enabled="@enabled"> Couldn't find any matching cultures @@ -32,6 +32,8 @@ +

    Selected values: @String.Join(", ", model.CultureInfos ?? Enumerable.Empty())

    + @code { private bool enabled = true; diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 1a42631f4..204550c7d 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -134,6 +134,12 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// [Parameter] public RenderFragment EmptyTemplate { get; set; } + [Parameter] public bool AllowSelectAll { get; set; } + + [Parameter] public EventCallback SelectAllChanged { get; set; } + + [Parameter] public string SelectAllText { get; set; } + private List itemsToRender; private HxMultiSelectInternal hxMultiSelectInternalComponent; @@ -217,6 +223,9 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), OnShown); builder.AddAttribute(119, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); builder.AddAttribute(120, nameof(HxMultiSelectInternal.EmptyTemplate), EmptyTemplate); + builder.AddAttribute(121, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAll); + builder.AddAttribute(122, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); + builder.AddAttribute(123, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 9ad69f7d9..fcfd6e2fa 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -32,8 +32,6 @@
      @* Must be always rendered otherwise does not work after disable->enabled scenario *@ - - @if (enabled) { if (AllowFiltering) @@ -44,36 +42,52 @@ class="@CssClassHelper.Combine("form-control")" autocomplete="false" value="@filterText" - @oninput="HandleInputChanged" + @oninput="HandleInputChangedAsync" @onclick:stopPropagation onfocusin="this.select()" /> } var filteredItems = GetFilteredItems(); - for (var i = 0; i < filteredItems.Count; i++) + if (filteredItems.Count <= 0) + { + @EmptyTemplate + } + else { - string checkboxElementId = InputId + "_" + i.ToString(); + if (AllowSelectAll) + { +
    • + +
      • + } - var item = filteredItems[i]; - TValue value = SelectorHelpers.GetValue(ValueSelector, item); + for (var i = 0; i < filteredItems.Count; i++) + { + string checkboxElementId = InputId + "_" + i.ToString(); - bool itemSelected = SelectedValues?.Contains(value) ?? false; + var item = filteredItems[i]; + TValue value = SelectorHelpers.GetValue(ValueSelector, item); -
    • - -
      • - } + bool itemSelected = DoSelectedValuesContainValue(value); - if (filteredItems.Count <= 0) - { - @EmptyTemplate +
    • + +
      • + } } }
    diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index adf245f6a..fc27ca8f5 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -77,6 +77,12 @@ public partial class HxMultiSelectInternal : IAsyncDisposable /// [Parameter] public RenderFragment EmptyTemplate { get; set; } + [Parameter] public bool AllowSelectAll { get; set; } + + [Parameter] public EventCallback SelectAllChanged { get; set; } + + [Parameter] public string SelectAllText { get; set; } = "-- select all --"; + /// /// Additional attributes to be splatted onto an underlying HTML element. /// @@ -131,18 +137,69 @@ private async Task EnsureJsModuleAsync() jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxMultiSelect)); } - private async Task HandleItemSelectionChangedAsync(bool newChecked, TItem item) + private async Task HandleItemSelectionChangedAsync(bool newChecked, TItem item, bool triggerSelectAllEvent = true) { await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs { Checked = newChecked, Item = item }); + + if (triggerSelectAllEvent) + { + await ChangeSelectAllAsync(false); + } + } + + private bool selectAll; + + private async Task HandleSelectAllClickedAsync() + { + var filteredItems = GetFilteredItems(); + + // If all items are already selected then they should be deselected, otherwise only records that aren't selected should be + if (selectAll) + { + foreach (var item in filteredItems) + { + // We don't want to trigger select all triggers each time, an item is selected, just once at the end + await HandleItemSelectionChangedAsync(false, item, false); + } + } + else + { + foreach (var item in filteredItems) + { + var value = SelectorHelpers.GetValue(ValueSelector, item); + var itemSelected = DoSelectedValuesContainValue(value); + + // If the item is already selected we don't need to reselect it + if (!itemSelected) + { + // We don't want to trigger select all triggers each time, an item is selected, just once at the end + await HandleItemSelectionChangedAsync(!itemSelected, item, false); + } + } + } + + await ChangeSelectAllAsync(!selectAll); + } + + private bool DoSelectedValuesContainValue(TValue value) + { + return SelectedValues?.Contains(value) ?? false; + } + + private Task ChangeSelectAllAsync(bool selectAll) + { + this.selectAll = selectAll; + return SelectAllChanged.InvokeAsync(selectAll); } - private void HandleInputChanged(ChangeEventArgs e) + private Task HandleInputChangedAsync(ChangeEventArgs e) { filterText = e.Value?.ToString() ?? string.Empty; + return ChangeSelectAllAsync(false); } private List GetFilteredItems() From dfb9f914d6b030c880478fc88d3aeb6e04a7707f Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 11 Oct 2023 00:33:26 +1100 Subject: [PATCH 11/36] Fixed default select all text value --- .../Forms/Internal/HxMultiSelectInternal.razor | 2 +- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index fcfd6e2fa..7720f0b68 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -61,7 +61,7 @@
    diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index fc27ca8f5..88a0d8708 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -81,7 +81,7 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public EventCallback SelectAllChanged { get; set; } - [Parameter] public string SelectAllText { get; set; } = "-- select all --"; + [Parameter] public string SelectAllText { get; set; } /// /// Additional attributes to be splatted onto an underlying HTML element. From c99868da445dcd3c0f3f8d07503c530831b9270c Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 15:49:52 +1100 Subject: [PATCH 12/36] Removed unused code --- .../Havit.Blazor.Components.Web.Bootstrap.xml | 10 ------- .../Internal/HxMultiSelectInternal.razor | 2 +- .../Internal/HxMultiSelectInternal.razor.cs | 29 ++----------------- .../wwwroot/HxMultiSelect.js | 4 +-- 4 files changed, 4 insertions(+), 41 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 30a7813df..69c6af562 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2769,16 +2769,6 @@ Receives notification from JavaScript when item is hidden. - - - Collapses the item. - - - - - Expands the item. - - Represents properties (and methods) of a component rendering a form value (ie. form inputs). diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 7720f0b68..121d496c2 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -39,7 +39,7 @@ : IAsyncDisposable [Parameter] public List ItemsToRender { get; set; } - [Parameter] public List SelectedIndexes { get; set; } - [Parameter] public List SelectedValues { get; set; } [Parameter] public Func TextSelector { get; set; } [Parameter] public Func ValueSelector { get; set; } - [Parameter] public List Value { get; set; } - [Parameter] public string NullDataText { get; set; } [Parameter] public EventCallback ItemSelectionChanged { get; set; } @@ -88,7 +84,7 @@ public partial class HxMultiSelectInternal : IAsyncDisposable /// [Parameter(CaptureUnmatchedValues = true)] public Dictionary AdditionalAttributes { get; set; } - [Inject] private IJSRuntime JSRuntime { get; set; } = default!; + [Inject] private IJSRuntime JSRuntime { get; set; } protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null); @@ -108,6 +104,7 @@ public partial class HxMultiSelectInternal : IAsyncDisposable private ElementReference filterInputReference; private bool isShown; private string filterText = string.Empty; + private bool selectAll; private bool disposed; public HxMultiSelectInternal() @@ -118,8 +115,6 @@ public HxMultiSelectInternal() /// protected override async Task OnAfterRenderAsync(bool firstRender) { - await base.OnAfterRenderAsync(firstRender); - if (firstRender) { await EnsureJsModuleAsync(); @@ -151,8 +146,6 @@ await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs } } - private bool selectAll; - private async Task HandleSelectAllClickedAsync() { var filteredItems = GetFilteredItems(); @@ -251,24 +244,6 @@ public async Task HandleJsShown() await InvokeOnShownAsync(this.InputId); } - /// - /// Collapses the item. - /// - public async Task HideAsync() - { - await EnsureJsModuleAsync(); - await jsModule.InvokeVoidAsync("hide", elementReference); - } - - /// - /// Expands the item. - /// - public async Task ShowAsync() - { - await EnsureJsModuleAsync(); - await jsModule.InvokeVoidAsync("show", elementReference); - } - public async ValueTask DisposeAsync() { await DisposeAsyncCore(); diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js index 7613f1a82..f14b63bd2 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js @@ -7,9 +7,7 @@ element.addEventListener('shown.bs.dropdown', handleDropdownShown); element.addEventListener('hidden.bs.dropdown', handleDropdownHidden); - var d = new bootstrap.Dropdown(element, { - toggle: shouldToggle, - }); + var d = new bootstrap.Dropdown(element); } export function show(element) { From ec53d4764c2faef0c06d6b962c91bd56bf207ac8 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 15:50:36 +1100 Subject: [PATCH 13/36] Renamed function --- .../Forms/Internal/HxMultiSelectInternal.razor | 2 +- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 121d496c2..70e9bf2b8 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -42,7 +42,7 @@ class="form-control" autocomplete="false" value="@filterText" - @oninput="HandleInputChangedAsync" + @oninput="HandleFilterInputChangedAsync" @onclick:stopPropagation onfocusin="this.select()" /> } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 75f2c3735..7c8a03249 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -189,7 +189,7 @@ private Task ChangeSelectAllAsync(bool selectAll) return SelectAllChanged.InvokeAsync(selectAll); } - private Task HandleInputChangedAsync(ChangeEventArgs e) + private Task HandleFilterInputChangedAsync(ChangeEventArgs e) { filterText = e.Value?.ToString() ?? string.Empty; return ChangeSelectAllAsync(false); From 3e04982b98d7be8d21fa6b1864d3a9e96c8ccc5f Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 18:23:52 +1100 Subject: [PATCH 14/36] Added string localisation to select all default text --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 18 ++++++++++++++++-- .../Forms/Internal/HxMultiSelectInternal.razor | 2 +- .../Internal/HxMultiSelectInternal.razor.cs | 15 ++++++++++++++- 3 files changed, 31 insertions(+), 4 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index 71470d97c..dba8e46fa 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -12,10 +12,24 @@ - + + + + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 7c8a03249..5d6210fe4 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -1,4 +1,5 @@ -using Microsoft.JSInterop; +using Microsoft.Extensions.Localization; +using Microsoft.JSInterop; namespace Havit.Blazor.Components.Web.Bootstrap.Internal; @@ -86,6 +87,8 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Inject] private IJSRuntime JSRuntime { get; set; } + [Inject] private IStringLocalizerFactory StringLocalizerFactory { get; set; } + protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null); /// @@ -211,6 +214,16 @@ bool DefaultFilterPredicate(TItem item, string filter) } } + private string GetSelectAllText() + { + if (SelectAllText is not null) + { + return SelectAllText; + } + + return StringLocalizerFactory.GetLocalizedValue("-- select all --", typeof(HxMultiSelect)); + } + public async ValueTask FocusAsync() { if (EqualityComparer.Default.Equals(elementReference, default)) From 1466054cf87a67260400cf8633cee5cdf94942f3 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 18:29:02 +1100 Subject: [PATCH 15/36] Added select all default text to resources --- .../Internal/HxMultiSelectInternal.razor.cs | 4 +- .../Resources/HxMultiSelect.resx | 123 ++++++++++++++++++ 2 files changed, 125 insertions(+), 2 deletions(-) create mode 100644 Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 5d6210fe4..bd7b77840 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -87,7 +87,7 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Inject] private IJSRuntime JSRuntime { get; set; } - [Inject] private IStringLocalizerFactory StringLocalizerFactory { get; set; } + [Inject] private IStringLocalizer StringLocalizer { get; set; } protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null); @@ -221,7 +221,7 @@ private string GetSelectAllText() return SelectAllText; } - return StringLocalizerFactory.GetLocalizedValue("-- select all --", typeof(HxMultiSelect)); + return StringLocalizer["SelectAllDefaultText"]; } public async ValueTask FocusAsync() diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx new file mode 100644 index 000000000..f089b6da1 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx @@ -0,0 +1,123 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + text/microsoft-resx + + + 2.0 + + + System.Resources.ResXResourceReader, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + + -- select all -- + + \ No newline at end of file From 5e92a17e7b5b138f9923d54ef3bb6d7f4e302918 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 18:32:06 +1100 Subject: [PATCH 16/36] Removed the unused shouldToggle option --- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 2 +- Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index bd7b77840..48b5fabf9 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -126,7 +126,7 @@ protected override async Task OnAfterRenderAsync(bool firstRender) return; } - await jsModule.InvokeVoidAsync("initialize", elementReference, dotnetObjectReference, false); + await jsModule.InvokeVoidAsync("initialize", elementReference, dotnetObjectReference); } } diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js index f14b63bd2..6d8346ed9 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/HxMultiSelect.js @@ -1,4 +1,4 @@ -export function initialize(element, hxMultiSelectDotnetObjectReference, shouldToggle) { +export function initialize(element, hxMultiSelectDotnetObjectReference) { if (!element) { return; } From 1093cc6bc79f0888dc15bfbe9a52f76ac8250624 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 18:38:36 +1100 Subject: [PATCH 17/36] Changed default select all text to '-select all-' --- .../Resources/HxMultiSelect.resx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx index f089b6da1..6d8287e2d 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx @@ -118,6 +118,6 @@ System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 - -- select all -- + -select all- \ No newline at end of file From 65539587fb16052711bac1762cecd61e258a94fd Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 19:01:17 +1100 Subject: [PATCH 18/36] Empty template now has a default template and text parameter. Fixed localisation issues --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 4 ++-- .../Havit.Blazor.Components.Web.Bootstrap.xml | 4 ++-- .../Forms/HxMultiSelect.cs | 13 ++++++++----- .../Forms/Internal/HxMultiSelectInternal.razor | 9 ++++++++- .../Internal/HxMultiSelectInternal.razor.cs | 16 ++++++++++++++-- .../Resources/HxMultiSelect.resx | 3 +++ 6 files changed, 37 insertions(+), 12 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index dba8e46fa..a29289138 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -40,9 +40,9 @@ AllowSelectAll="true" SelectAllText="Select all cultures" Enabled="@enabled"> - + Couldn't find any matching cultures - + diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 69c6af562..74f1894fc 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2741,7 +2741,7 @@ This event is fired when a dropdown element has been hidden from the user. - + Template that defines what should be rendered in case of empty items. @@ -4437,7 +4437,7 @@ This event is fired when a dropdown element has been hidden from the user. - + Template that defines what should be rendered in case of empty items. diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 204550c7d..3de2982d5 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -132,7 +132,9 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// /// Template that defines what should be rendered in case of empty items. /// - [Parameter] public RenderFragment EmptyTemplate { get; set; } + [Parameter] public RenderFragment FilterEmptyResultTemplate { get; set; } + + [Parameter] public string FilterEmptyResultText { get; set; } [Parameter] public bool AllowSelectAll { get; set; } @@ -222,10 +224,11 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), OnHidden); builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), OnShown); builder.AddAttribute(119, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); - builder.AddAttribute(120, nameof(HxMultiSelectInternal.EmptyTemplate), EmptyTemplate); - builder.AddAttribute(121, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAll); - builder.AddAttribute(122, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); - builder.AddAttribute(123, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); + builder.AddAttribute(120, nameof(HxMultiSelectInternal.FilterEmptyResultTemplate), FilterEmptyResultTemplate); + builder.AddAttribute(121, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); + builder.AddAttribute(122, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAll); + builder.AddAttribute(123, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); + builder.AddAttribute(124, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index b0f127725..00e38c565 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -50,7 +50,14 @@ var filteredItems = GetFilteredItems(); if (filteredItems.Count <= 0) { - @EmptyTemplate + if (FilterEmptyResultTemplate is not null) + { + @FilterEmptyResultTemplate + } + else + { + @GetFilterEmptyResultText() + } } else { diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 48b5fabf9..eb7dce24d 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -72,7 +72,9 @@ public partial class HxMultiSelectInternal : IAsyncDisposable /// /// Template that defines what should be rendered in case of empty items. /// - [Parameter] public RenderFragment EmptyTemplate { get; set; } + [Parameter] public RenderFragment FilterEmptyResultTemplate { get; set; } + + [Parameter] public string FilterEmptyResultText { get; set; } [Parameter] public bool AllowSelectAll { get; set; } @@ -87,7 +89,7 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Inject] private IJSRuntime JSRuntime { get; set; } - [Inject] private IStringLocalizer StringLocalizer { get; set; } + [Inject] private IStringLocalizer StringLocalizer { get; set; } protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null); @@ -224,6 +226,16 @@ private string GetSelectAllText() return StringLocalizer["SelectAllDefaultText"]; } + private string GetFilterEmptyResultText() + { + if (FilterEmptyResultText is not null) + { + return FilterEmptyResultText; + } + + return StringLocalizer["FilterEmptyResultDefaultText"]; + } + public async ValueTask FocusAsync() { if (EqualityComparer.Default.Equals(elementReference, default)) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx index 6d8287e2d..c3269f2a8 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx +++ b/Havit.Blazor.Components.Web.Bootstrap/Resources/HxMultiSelect.resx @@ -117,6 +117,9 @@ System.Resources.ResXResourceWriter, System.Windows.Forms, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089 + + No results + -select all- From 55a4ceca3502bbd0d225439896027bdade235842 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 19:50:57 +1100 Subject: [PATCH 19/36] Added AllowFiltering and AllowSelectAll as settings --- .../Havit.Blazor.Components.Web.Bootstrap.xml | 34 +++++++++++++++++++ .../Forms/HxMultiSelect.cs | 10 +++--- .../Forms/HxMultiSelect.nongeneric.cs | 2 ++ .../Internal/HxMultiSelectInternal.razor.cs | 3 ++ .../Forms/MultiSelectSettings.cs | 10 ++++++ 5 files changed, 55 insertions(+), 4 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 74f1894fc..d93657848 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2701,6 +2701,25 @@ + + + Returns application-wide defaults for the component. + Enables overriding defaults in descendants (use separate set of defaults). + + + + + Set of settings to be applied to the component instance (overrides , overridden by individual parameters). + + + + + Returns optional set of component settings. + + + Similar to , enables defining wider in components descendants (by returning a derived settings class). + + Custom CSS class to render with input-group span. @@ -2746,6 +2765,11 @@ Template that defines what should be rendered in case of empty items. + + + Enables select all capabilities. + + Additional attributes to be splatted onto an underlying HTML element. @@ -5079,6 +5103,16 @@ Input size. + + + Enables filtering capabilities. + + + + + Enables select all capabilities. + + Settings for . diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 3de2982d5..547937c60 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -113,7 +113,8 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// /// Enables filtering capabilities. /// - [Parameter] public bool AllowFiltering { get; set; } + [Parameter] public bool? AllowFiltering { get; set; } + protected bool AllowFilteringEffective => this.AllowFiltering ?? this.GetSettings()?.AllowFiltering ?? GetDefaults().AllowFiltering; [Parameter] public Func FilterPredicate { get; set; } @@ -136,7 +137,8 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public string FilterEmptyResultText { get; set; } - [Parameter] public bool AllowSelectAll { get; set; } + [Parameter] public bool? AllowSelectAll { get; set; } + protected bool AllowSelectAllEffective => this.AllowSelectAll ?? this.GetSettings()?.AllowSelectAll ?? GetDefaults().AllowSelectAll; [Parameter] public EventCallback SelectAllChanged { get; set; } @@ -219,14 +221,14 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(112, nameof(HxMultiSelectInternal.InputGroupStartTemplate), InputGroupStartTemplate); builder.AddAttribute(113, nameof(HxMultiSelectInternal.InputGroupEndText), InputGroupEndText); builder.AddAttribute(114, nameof(HxMultiSelectInternal.InputGroupEndTemplate), InputGroupEndTemplate); - builder.AddAttribute(115, nameof(HxMultiSelectInternal.AllowFiltering), AllowFiltering); + builder.AddAttribute(115, nameof(HxMultiSelectInternal.AllowFiltering), AllowFilteringEffective); builder.AddAttribute(116, nameof(HxMultiSelectInternal.FilterPredicate), FilterPredicate); builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), OnHidden); builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), OnShown); builder.AddAttribute(119, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); builder.AddAttribute(120, nameof(HxMultiSelectInternal.FilterEmptyResultTemplate), FilterEmptyResultTemplate); builder.AddAttribute(121, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); - builder.AddAttribute(122, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAll); + builder.AddAttribute(122, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAllEffective); builder.AddAttribute(123, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); builder.AddAttribute(124, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs index 731cf6bb2..27349c890 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs @@ -15,6 +15,8 @@ static HxMultiSelect() Defaults = new MultiSelectSettings() { InputSize = InputSize.Regular, + AllowFiltering = false, + AllowSelectAll = false }; } } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index eb7dce24d..7f49db1b5 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -76,6 +76,9 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public string FilterEmptyResultText { get; set; } + /// + /// Enables select all capabilities. + /// [Parameter] public bool AllowSelectAll { get; set; } [Parameter] public EventCallback SelectAllChanged { get; set; } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs index c9189efdb..d2ac6122a 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs @@ -11,4 +11,14 @@ public record MultiSelectSettings : InputSettings, IInputSettingsWithSize /// Input size. /// public InputSize? InputSize { get; set; } + + /// + /// Enables filtering capabilities. + /// + public bool AllowFiltering { get; set; } + + /// + /// Enables select all capabilities. + /// + public bool AllowSelectAll { get; set; } } \ No newline at end of file From 1ce476629de27b3faba21225592d1c8639f20944 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 19:55:37 +1100 Subject: [PATCH 20/36] Removed OnShown and OnHidden event callbacks --- .../Havit.Blazor.Components.Web.Bootstrap.xml | 39 ------------------- .../Forms/HxMultiSelect.cs | 24 +++--------- .../Internal/HxMultiSelectInternal.razor.cs | 13 +------ 3 files changed, 7 insertions(+), 69 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index d93657848..481b0f3a1 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2701,25 +2701,6 @@ - - - Returns application-wide defaults for the component. - Enables overriding defaults in descendants (use separate set of defaults). - - - - - Set of settings to be applied to the component instance (overrides , overridden by individual parameters). - - - - - Returns optional set of component settings. - - - Similar to , enables defining wider in components descendants (by returning a derived settings class). - - Custom CSS class to render with input-group span. @@ -2775,16 +2756,6 @@ Additional attributes to be splatted onto an underlying HTML element. - - - Triggers the event. Allows interception of the event in derived components. - - - - - Triggers the event. Allows interception of the event in derived components. - - @@ -4451,16 +4422,6 @@ Enables filtering capabilities. - - - This event is fired when a dropdown element has been made visible to the user. - - - - - This event is fired when a dropdown element has been hidden from the user. - - Template that defines what should be rendered in case of empty items. diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 547937c60..032f7fbd1 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -120,16 +120,6 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public bool ClearFilterOnHide { get; set; } - /// - /// This event is fired when a dropdown element has been made visible to the user. - /// - [Parameter] public EventCallback OnShown { get; set; } - - /// - /// This event is fired when a dropdown element has been hidden from the user. - /// - [Parameter] public EventCallback OnHidden { get; set; } - /// /// Template that defines what should be rendered in case of empty items. /// @@ -223,14 +213,12 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(114, nameof(HxMultiSelectInternal.InputGroupEndTemplate), InputGroupEndTemplate); builder.AddAttribute(115, nameof(HxMultiSelectInternal.AllowFiltering), AllowFilteringEffective); builder.AddAttribute(116, nameof(HxMultiSelectInternal.FilterPredicate), FilterPredicate); - builder.AddAttribute(117, nameof(HxMultiSelectInternal.OnHidden), OnHidden); - builder.AddAttribute(118, nameof(HxMultiSelectInternal.OnShown), OnShown); - builder.AddAttribute(119, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); - builder.AddAttribute(120, nameof(HxMultiSelectInternal.FilterEmptyResultTemplate), FilterEmptyResultTemplate); - builder.AddAttribute(121, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); - builder.AddAttribute(122, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAllEffective); - builder.AddAttribute(123, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); - builder.AddAttribute(124, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); + builder.AddAttribute(117, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); + builder.AddAttribute(118, nameof(HxMultiSelectInternal.FilterEmptyResultTemplate), FilterEmptyResultTemplate); + builder.AddAttribute(119, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); + builder.AddAttribute(120, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAllEffective); + builder.AddAttribute(121, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); + builder.AddAttribute(122, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 7f49db1b5..07d66cbbf 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -96,16 +96,6 @@ public partial class HxMultiSelectInternal : IAsyncDisposable protected bool HasInputGroupsEffective => !String.IsNullOrWhiteSpace(InputGroupStartText) || !String.IsNullOrWhiteSpace(InputGroupEndText) || (InputGroupStartTemplate is not null) || (InputGroupEndTemplate is not null); - /// - /// Triggers the event. Allows interception of the event in derived components. - /// - protected virtual Task InvokeOnHiddenAsync(string elementId) => OnHidden.InvokeAsync(elementId); - - /// - /// Triggers the event. Allows interception of the event in derived components. - /// - protected virtual Task InvokeOnShownAsync(string elementId) => OnShown.InvokeAsync(elementId); - private IJSObjectReference jsModule; private readonly DotNetObjectReference> dotnetObjectReference; private ElementReference elementReference; @@ -261,7 +251,7 @@ public Task HandleJsHidden() filterText = string.Empty; } - return InvokeOnHiddenAsync(this.InputId); + return Task.CompletedTask; } [JSInvokable("HxMultiSelect_HandleJsShown")] @@ -269,7 +259,6 @@ public async Task HandleJsShown() { isShown = true; await filterInputReference.FocusAsync(); - await InvokeOnShownAsync(this.InputId); } public async ValueTask DisposeAsync() From 4b3d6a4654b73f0760640d0846c8d14f9ae885cb Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 20:13:20 +1100 Subject: [PATCH 21/36] Changed default ClearFilterOnHide to true --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 2 -- .../XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml | 10 ++++++++++ .../Forms/HxMultiSelect.cs | 5 +++-- .../Forms/HxMultiSelect.nongeneric.cs | 3 ++- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 6 +++++- .../Forms/MultiSelectSettings.cs | 5 +++++ 6 files changed, 25 insertions(+), 6 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index a29289138..75f4f948f 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -54,8 +54,6 @@ private Model model = new Model(); private List data; - private HxMultiSelect hxMultiSelectFilter; - protected override async Task OnParametersSetAsync() { await base.OnParametersSetAsync(); diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 481b0f3a1..8c6f6c100 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2731,6 +2731,11 @@ Enables filtering capabilities. + + + When enabled the filter will be cleared when the dropdown is closed. + + This event is fired when a dropdown element has been made visible to the user. @@ -5074,6 +5079,11 @@ Enables select all capabilities. + + + When enabled the filter will be cleared when the dropdown is closed. + + Settings for . diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 032f7fbd1..280066268 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -118,7 +118,8 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public Func FilterPredicate { get; set; } - [Parameter] public bool ClearFilterOnHide { get; set; } + [Parameter] public bool? ClearFilterOnHide { get; set; } + protected bool ClearFilterOnHideEffective => this.ClearFilterOnHide ?? this.GetSettings()?.ClearFilterOnHide ?? GetDefaults().ClearFilterOnHide; /// /// Template that defines what should be rendered in case of empty items. @@ -213,7 +214,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(114, nameof(HxMultiSelectInternal.InputGroupEndTemplate), InputGroupEndTemplate); builder.AddAttribute(115, nameof(HxMultiSelectInternal.AllowFiltering), AllowFilteringEffective); builder.AddAttribute(116, nameof(HxMultiSelectInternal.FilterPredicate), FilterPredicate); - builder.AddAttribute(117, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHide); + builder.AddAttribute(117, nameof(HxMultiSelectInternal.ClearFilterOnHide), ClearFilterOnHideEffective); builder.AddAttribute(118, nameof(HxMultiSelectInternal.FilterEmptyResultTemplate), FilterEmptyResultTemplate); builder.AddAttribute(119, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); builder.AddAttribute(120, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAllEffective); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs index 27349c890..5db935bdb 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.nongeneric.cs @@ -16,7 +16,8 @@ static HxMultiSelect() { InputSize = InputSize.Regular, AllowFiltering = false, - AllowSelectAll = false + AllowSelectAll = false, + ClearFilterOnHide = true }; } } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 07d66cbbf..8ead74c22 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -57,6 +57,9 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public Func FilterPredicate { get; set; } + /// + /// When enabled the filter will be cleared when the dropdown is closed. + /// [Parameter] public bool ClearFilterOnHide { get; set; } /// @@ -246,9 +249,10 @@ public Task HandleJsHidden() { isShown = false; - if (ClearFilterOnHide) + if (ClearFilterOnHide && filterText != string.Empty) { filterText = string.Empty; + StateHasChanged(); } return Task.CompletedTask; diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs index d2ac6122a..220c48706 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs @@ -21,4 +21,9 @@ public record MultiSelectSettings : InputSettings, IInputSettingsWithSize /// Enables select all capabilities. /// public bool AllowSelectAll { get; set; } + + /// + /// When enabled the filter will be cleared when the dropdown is closed. + /// + public bool ClearFilterOnHide { get; set; } } \ No newline at end of file From e3fe12e22d7a02331dc8294622fcce126462a1a3 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 20:14:08 +1100 Subject: [PATCH 22/36] Added ClearFilterOnHide=false to test example --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 1 + 1 file changed, 1 insertion(+) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index 75f4f948f..21758ba0e 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -39,6 +39,7 @@ AllowFiltering="true" AllowSelectAll="true" SelectAllText="Select all cultures" + ClearFilterOnHide="false" Enabled="@enabled"> Couldn't find any matching cultures From c0bdb488f569af1833763cb0dfcb33e46b19f694 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Wed, 18 Oct 2023 21:03:07 +1100 Subject: [PATCH 23/36] Added documentation --- .../HxGridDoc/HxGrid_Demo_DataProvider.razor | 2 +- .../HxMultiSelect_Demo_BasicFiltering.razor | 32 ++++++++++++++ .../HxMultiSelect_Demo_SelectAll.razor | 32 ++++++++++++++ ...xMultiSelect_Demo_TemplatedFiltering.razor | 44 +++++++++++++++++++ .../HxMultiSelect_Documentation.razor | 11 ++++- .../Forms/HxMultiSelect.cs | 15 +++++++ .../Internal/HxMultiSelectInternal.razor.cs | 33 -------------- 7 files changed, 134 insertions(+), 35 deletions(-) create mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor create mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor create mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_DataProvider.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_DataProvider.razor index a12295ab5..228200cae 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_DataProvider.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxGridDoc/HxGrid_Demo_DataProvider.razor @@ -8,7 +8,7 @@ @code { private Task> GetGridData(GridDataProviderRequest 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! diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor new file mode 100644 index 000000000..03ba6c375 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor @@ -0,0 +1,32 @@ + + +

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    + +@code { + private List people; + private List selectedPersonsInitials { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + await Task.Delay(1000); // simulates slow server API call + + people = new List + { + 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); +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor new file mode 100644 index 000000000..d8821f5d1 --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor @@ -0,0 +1,32 @@ + + +

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    + +@code { + private List people; + private List selectedPersonsInitials { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + await Task.Delay(1000); // simulates slow server API call + + people = new List + { + 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); +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor new file mode 100644 index 000000000..94a2523aa --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor @@ -0,0 +1,44 @@ + + + No items found + + + +

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    + +@code { + private List people; + private List selectedPersonsInitials { get; set; } = new(); + + protected override async Task OnInitializedAsync() + { + await Task.Delay(1000); // simulates slow server API call + + people = new List + { + 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); +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor index e66099247..ca89c5b70 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor @@ -4,7 +4,16 @@ - + + + + + + + + + + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 280066268..7bc3de41b 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -116,8 +116,14 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public bool? AllowFiltering { get; set; } protected bool AllowFilteringEffective => this.AllowFiltering ?? this.GetSettings()?.AllowFiltering ?? GetDefaults().AllowFiltering; + /// + /// Predicate to custom how the filtering is applied to the items list. + /// [Parameter] public Func FilterPredicate { get; set; } + /// + /// When enabled the filter will be cleared when the dropdown is closed. + /// [Parameter] public bool? ClearFilterOnHide { get; set; } protected bool ClearFilterOnHideEffective => this.ClearFilterOnHide ?? this.GetSettings()?.ClearFilterOnHide ?? GetDefaults().ClearFilterOnHide; @@ -126,13 +132,22 @@ public class HxMultiSelect : HxInputBase>, IInputWit ///     [Parameter] public RenderFragment FilterEmptyResultTemplate { get; set; } + /// + /// Text to display when the filtered results list is empty and when not using . + /// [Parameter] public string FilterEmptyResultText { get; set; } + /// + /// Enables select all capabilities. + /// [Parameter] public bool? AllowSelectAll { get; set; } protected bool AllowSelectAllEffective => this.AllowSelectAll ?? this.GetSettings()?.AllowSelectAll ?? GetDefaults().AllowSelectAll; [Parameter] public EventCallback SelectAllChanged { get; set; } + /// + /// Text to display for the select all dropdown option. + /// [Parameter] public string SelectAllText { get; set; } private List itemsToRender; diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 8ead74c22..5fecfaa11 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -25,63 +25,30 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public EventCallback ItemSelectionChanged { get; set; } - /// - /// Custom CSS class to render with input-group span. - /// [Parameter] public string InputGroupCssClass { get; set; } - /// - /// Input-group at the beginning of the input. - /// [Parameter] public string InputGroupStartText { get; set; } - /// - /// Input-group at the beginning of the input. - /// [Parameter] public RenderFragment InputGroupStartTemplate { get; set; } - /// - /// Input-group at the end of the input. - /// [Parameter] public string InputGroupEndText { get; set; } - /// - /// Input-group at the end of the input. - /// [Parameter] public RenderFragment InputGroupEndTemplate { get; set; } - /// - /// Enables filtering capabilities. - /// [Parameter] public bool AllowFiltering { get; set; } [Parameter] public Func FilterPredicate { get; set; } - /// - /// When enabled the filter will be cleared when the dropdown is closed. - /// [Parameter] public bool ClearFilterOnHide { get; set; } - /// - /// This event is fired when a dropdown element has been made visible to the user. - /// [Parameter] public EventCallback OnShown { get; set; } - /// - /// This event is fired when a dropdown element has been hidden from the user. - /// [Parameter] public EventCallback OnHidden { get; set; } - /// - /// Template that defines what should be rendered in case of empty items. - /// [Parameter] public RenderFragment FilterEmptyResultTemplate { get; set; } [Parameter] public string FilterEmptyResultText { get; set; } - /// - /// Enables select all capabilities. - /// [Parameter] public bool AllowSelectAll { get; set; } [Parameter] public EventCallback SelectAllChanged { get; set; } From 1b8cf7059c1c4463849e346a86a2be2c3427a85b Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Thu, 19 Oct 2023 10:25:27 +0200 Subject: [PATCH 24/36] HxMultiSelect_Demo_TemplatedFiltering - project coding standards - operator placement in multiline conditions --- .../HxMultiSelect_Demo_TemplatedFiltering.razor | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor index 94a2523aa..dc62e2ce3 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor @@ -35,9 +35,9 @@ private bool IsRecordIncluded(Person person, string filter) { - return string.IsNullOrWhiteSpace(filter) || - person.Name.Contains(filter, StringComparison.OrdinalIgnoreCase) || - person.Initials.Contains(filter, StringComparison.OrdinalIgnoreCase); + return string.IsNullOrWhiteSpace(filter) + || person.Name.Contains(filter, StringComparison.OrdinalIgnoreCase) + || person.Initials.Contains(filter, StringComparison.OrdinalIgnoreCase); } private record Person(string Name, string Initials); From 3794959665810ae14d74c389f81e1f7c7f43a543 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Thu, 19 Oct 2023 10:55:54 +0200 Subject: [PATCH 25/36] HxMultiSelect - FilterPredicate doc adjustment --- Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 7bc3de41b..6f6774f60 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -117,7 +117,8 @@ public class HxMultiSelect : HxInputBase>, IInputWit protected bool AllowFilteringEffective => this.AllowFiltering ?? this.GetSettings()?.AllowFiltering ?? GetDefaults().AllowFiltering; /// - /// Predicate to custom how the filtering is applied to the items list. + /// 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. /// [Parameter] public Func FilterPredicate { get; set; } From 48c6b594850a1c0a257538138383d9d12366e831 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Thu, 19 Oct 2023 21:32:01 +1100 Subject: [PATCH 26/36] Removed all SelectAllChanged event callbacks --- .../Havit.Blazor.Components.Web.Bootstrap.xml | 80 ++++++------------- .../Forms/HxMultiSelect.cs | 5 +- .../Internal/HxMultiSelectInternal.razor | 2 +- .../Internal/HxMultiSelectInternal.razor.cs | 16 +--- 4 files changed, 31 insertions(+), 72 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index 8c6f6c100..a20726422 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -2701,61 +2701,6 @@ - - - Custom CSS class to render with input-group span. - - - - - Input-group at the beginning of the input. - - - - - Input-group at the beginning of the input. - - - - - Input-group at the end of the input. - - - - - Input-group at the end of the input. - - - - - Enables filtering capabilities. - - - - - When enabled the filter will be cleared when the dropdown is closed. - - - - - This event is fired when a dropdown element has been made visible to the user. - - - - - This event is fired when a dropdown element has been hidden from the user. - - - - - Template that defines what should be rendered in case of empty items. - - - - - Enables select all capabilities. - - Additional attributes to be splatted onto an underlying HTML element. @@ -4427,11 +4372,36 @@ Enables filtering capabilities. + + + Predicate to custom how the filtering is applied to the items list. + + + + + When enabled the filter will be cleared when the dropdown is closed. + + Template that defines what should be rendered in case of empty items. + + + Text to display when the filtered results list is empty and when not using . + + + + + Enables select all capabilities. + + + + + Text to display for the select all dropdown option. + + diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 7bc3de41b..415da8521 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -143,8 +143,6 @@ public class HxMultiSelect : HxInputBase>, IInputWit [Parameter] public bool? AllowSelectAll { get; set; } protected bool AllowSelectAllEffective => this.AllowSelectAll ?? this.GetSettings()?.AllowSelectAll ?? GetDefaults().AllowSelectAll; - [Parameter] public EventCallback SelectAllChanged { get; set; } - /// /// Text to display for the select all dropdown option. /// @@ -233,8 +231,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(118, nameof(HxMultiSelectInternal.FilterEmptyResultTemplate), FilterEmptyResultTemplate); builder.AddAttribute(119, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); builder.AddAttribute(120, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAllEffective); - builder.AddAttribute(121, nameof(HxMultiSelectInternal.SelectAllChanged), SelectAllChanged); - builder.AddAttribute(122, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); + builder.AddAttribute(121, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 00e38c565..fba0a083f 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -42,7 +42,7 @@ class="form-control" autocomplete="false" value="@filterText" - @oninput="HandleFilterInputChangedAsync" + @oninput="HandleFilterInputChanged" @onclick:stopPropagation onfocusin="this.select()" /> } diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 5fecfaa11..c32aa19bd 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -51,8 +51,6 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public bool AllowSelectAll { get; set; } - [Parameter] public EventCallback SelectAllChanged { get; set; } - [Parameter] public string SelectAllText { get; set; } /// @@ -110,7 +108,7 @@ await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs if (triggerSelectAllEvent) { - await ChangeSelectAllAsync(false); + selectAll = false; } } @@ -143,7 +141,7 @@ private async Task HandleSelectAllClickedAsync() } } - await ChangeSelectAllAsync(!selectAll); + selectAll = !selectAll; } private bool DoSelectedValuesContainValue(TValue value) @@ -151,16 +149,10 @@ private bool DoSelectedValuesContainValue(TValue value) return SelectedValues?.Contains(value) ?? false; } - private Task ChangeSelectAllAsync(bool selectAll) - { - this.selectAll = selectAll; - return SelectAllChanged.InvokeAsync(selectAll); - } - - private Task HandleFilterInputChangedAsync(ChangeEventArgs e) + private void HandleFilterInputChanged(ChangeEventArgs e) { filterText = e.Value?.ToString() ?? string.Empty; - return ChangeSelectAllAsync(false); + selectAll = false; } private List GetFilteredItems() From a57f860887b72990af5fed290c563ba030d3e1c8 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Thu, 19 Oct 2023 22:07:56 +1100 Subject: [PATCH 27/36] Added filter search and clear icons --- .../Havit.Blazor.Components.Web.Bootstrap.xml | 23 ++++++++++++- .../Forms/HxMultiSelect.cs | 14 ++++++++ .../Internal/HxMultiSelectInternal.razor | 33 ++++++++++++++----- .../Internal/HxMultiSelectInternal.razor.cs | 9 +++++ .../Internal/HxMultiSelectInternal.razor.css | 28 +++++++++++++++- .../Forms/MultiSelectSettings.cs | 10 ++++++ .../wwwroot/defaults.css | 2 ++ 7 files changed, 108 insertions(+), 11 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml index a20726422..3a3b20702 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/XmlDoc/Havit.Blazor.Components.Web.Bootstrap.xml @@ -4374,7 +4374,8 @@ - Predicate to custom how the filtering is applied to the items list. + 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. @@ -4402,6 +4403,16 @@ Text to display for the select all dropdown option. + + + Icon displayed in filter input for searching the filter. + + + + + Icon displayed in filter input for clearing the filter. + + @@ -5054,6 +5065,16 @@ When enabled the filter will be cleared when the dropdown is closed.     + + + Icon displayed in filter input for searching the filter. + + + + + Icon displayed in filter input for clearing the filter. + + Settings for . diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 6f8536f66..908b95537 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -149,6 +149,18 @@ public class HxMultiSelect : HxInputBase>, IInputWit /// [Parameter] public string SelectAllText { get; set; } + /// + /// Icon displayed in filter input for searching the filter. + /// + [Parameter] public IconBase FilterSearchIcon { get; set; } + protected IconBase FilterSearchIconEffective => this.FilterSearchIcon ?? this.GetSettings()?.FilterSearchIcon ?? GetDefaults().FilterSearchIcon; + + /// + /// Icon displayed in filter input for clearing the filter. + /// + [Parameter] public IconBase FilterClearIcon { get; set; } + protected IconBase FilterClearIconEffective => this.FilterClearIcon ?? this.GetSettings()?.FilterClearIcon ?? GetDefaults().FilterClearIcon; + private List itemsToRender; private HxMultiSelectInternal hxMultiSelectInternalComponent; @@ -233,6 +245,8 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(119, nameof(HxMultiSelectInternal.FilterEmptyResultText), FilterEmptyResultText); builder.AddAttribute(120, nameof(HxMultiSelectInternal.AllowSelectAll), AllowSelectAllEffective); builder.AddAttribute(121, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); + builder.AddAttribute(122, nameof(HxMultiSelectInternal.FilterSearchIcon), FilterSearchIconEffective); + builder.AddAttribute(123, nameof(HxMultiSelectInternal.FilterClearIcon), FilterClearIconEffective); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index fba0a083f..272fc4d7e 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -36,15 +36,30 @@ { if (AllowFiltering) { - +
    + + +
    + @if (string.IsNullOrEmpty(filterText)) + { + + } + else + { +
    + +
    + } +
    +
    } var filteredItems = GetFilteredItems(); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index c32aa19bd..295ca83b3 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -53,6 +53,10 @@ public partial class HxMultiSelectInternal : IAsyncDisposable [Parameter] public string SelectAllText { get; set; } + [Parameter] public IconBase FilterSearchIcon { get; set; } + + [Parameter] public IconBase FilterClearIcon { get; set; } + /// /// Additional attributes to be splatted onto an underlying HTML element. /// @@ -144,6 +148,11 @@ private async Task HandleSelectAllClickedAsync() selectAll = !selectAll; } + private void HandleCrossClick() + { + filterText = string.Empty; + } + private bool DoSelectedValuesContainValue(TValue value) { return SelectedValues?.Contains(value) ?? false; diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css index c36c5d58a..5d8150494 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css @@ -22,9 +22,35 @@ button.dropdown-item, } .hx-multi-select-input:hover { - cursor: default; + cursor: default; } .form-check-label { color: inherit; +} + +.hx-multi-select-filter-input-icon { + display: flex; + align-items: center; + margin-right: 1rem; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + z-index: 5; +} + +.hx-multi-select-filter-input-wrapper { + position: relative; + flex: 1 1 auto; + width: 100%; + min-width: 0; +} + +.form-control-sm ~ .hx-multi-select-filter-input-icon { + font-size: .75rem; +} + +.hx-multi-select-filter-input-icon div[role="button"]:not(:hover) ::deep .hx-icon { + opacity: var(--hx-multi-select-filter-input-icon-opacity); } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs index 220c48706..d827ebbac 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/MultiSelectSettings.cs @@ -26,4 +26,14 @@ public record MultiSelectSettings : InputSettings, IInputSettingsWithSize /// When enabled the filter will be cleared when the dropdown is closed. /// public bool ClearFilterOnHide { get; set; } + + /// + /// Icon displayed in filter input for searching the filter. + /// + public IconBase FilterSearchIcon { get; set; } = BootstrapIcon.Search; + + /// + /// Icon displayed in filter input for clearing the filter. + /// + public IconBase FilterClearIcon { get; set; } = BootstrapIcon.XLg; } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css index c45dff434..96ea98d3d 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css @@ -133,6 +133,8 @@ /* HxMultiSelect */ --hx-multi-select-background-color: var(--bs-body-bg); --hx-multi-select-dropdown-menu-height: 300px; + --hx-multi-select-dropdown-menu-width: 100%; + --hx-multi-select-filter-input-icon-opacity: .25; /* TagInput */ --hx-input-tags-tag-margin: 0 .25rem 0 0; From 159c1d2def317ad3e81454aeefa0c442748f1772 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Fri, 20 Oct 2023 19:29:53 +1100 Subject: [PATCH 28/36] Reworked select all item selection callbacks --- .../Forms/HxMultiSelect.cs | 17 +++++---- .../Internal/HxMultiSelectInternal.razor.cs | 37 +++++++++++-------- 2 files changed, 32 insertions(+), 22 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 908b95537..82525a859 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -186,17 +186,20 @@ private void RefreshState() } } - private void HandleItemSelectionChanged(bool @checked, TItem item) + private void HandleItemSelectionChanged(List itemsSelected, List itemsDeselected) { var newValue = Value == null ? new List() : new List(Value); - TValue value = SelectorHelpers.GetValue(ValueSelector, item); - if (@checked) + + foreach (var item in itemsDeselected) { - newValue.Add(value); + TValue value = SelectorHelpers.GetValue(ValueSelector, item); + newValue.Remove(value); } - else + + foreach (var item in itemsSelected) { - newValue.Remove(value); + TValue value = SelectorHelpers.GetValue(ValueSelector, item); + newValue.Add(value); } CurrentValue = newValue; // setter includes ValueChanged + NotifyFieldChanged @@ -233,7 +236,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(107, nameof(HxMultiSelectInternal.ValueSelector), ValueSelector); builder.AddAttribute(108, nameof(HxMultiSelectInternal.SelectedValues), Value); builder.AddAttribute(109, nameof(HxMultiSelectInternal.NullDataText), NullDataText); - builder.AddAttribute(110, nameof(HxMultiSelectInternal.ItemSelectionChanged), EventCallback.Factory.Create.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.Checked, args.Item))); + builder.AddAttribute(110, nameof(HxMultiSelectInternal.ItemSelectionChanged), EventCallback.Factory.Create.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.ItemsSelected, args.ItemsDeselected))); builder.AddAttribute(111, nameof(HxMultiSelectInternal.InputGroupStartText), InputGroupStartText); builder.AddAttribute(112, nameof(HxMultiSelectInternal.InputGroupStartTemplate), InputGroupStartTemplate); builder.AddAttribute(113, nameof(HxMultiSelectInternal.InputGroupEndText), InputGroupEndText); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 295ca83b3..715cf4efd 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -102,22 +102,28 @@ private async Task EnsureJsModuleAsync() jsModule ??= await JSRuntime.ImportHavitBlazorBootstrapModuleAsync(nameof(HxMultiSelect)); } - private async Task HandleItemSelectionChangedAsync(bool newChecked, TItem item, bool triggerSelectAllEvent = true) + private async Task HandleItemSelectionChangedAsync(bool newChecked, TItem item) { - await ItemSelectionChanged.InvokeAsync(new SelectionChangedArgs - { - Checked = newChecked, - Item = item - }); + var args = new SelectionChangedArgs(); - if (triggerSelectAllEvent) + if (newChecked) { - selectAll = false; + args.ItemsSelected.Add(item); } + else + { + args.ItemsDeselected.Add(item); + } + + // When a single item is clicked we always want to uncheck select all + selectAll = false; + + await ItemSelectionChanged.InvokeAsync(args); } private async Task HandleSelectAllClickedAsync() { + var args = new SelectionChangedArgs(); var filteredItems = GetFilteredItems(); // If all items are already selected then they should be deselected, otherwise only records that aren't selected should be @@ -125,9 +131,9 @@ private async Task HandleSelectAllClickedAsync() { foreach (var item in filteredItems) { - // We don't want to trigger select all triggers each time, an item is selected, just once at the end - await HandleItemSelectionChangedAsync(false, item, false); + args.ItemsDeselected.Add(item); } + } else { @@ -139,13 +145,14 @@ private async Task HandleSelectAllClickedAsync() // If the item is already selected we don't need to reselect it if (!itemSelected) { - // We don't want to trigger select all triggers each time, an item is selected, just once at the end - await HandleItemSelectionChangedAsync(!itemSelected, item, false); + args.ItemsSelected.Add(item); } } } selectAll = !selectAll; + + await ItemSelectionChanged.InvokeAsync(args); } private void HandleCrossClick() @@ -260,9 +267,9 @@ protected virtual async ValueTask DisposeAsyncCore() - public class SelectionChangedArgs + public sealed class SelectionChangedArgs { - public bool Checked { get; set; } - public TItem Item { get; set; } + public List ItemsDeselected { get; set; } = new(); + public List ItemsSelected { get; set; } = new(); } } \ No newline at end of file From b2de43b9ffd80e3f46e2575071881195c2806729 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Sat, 21 Oct 2023 02:44:38 +1100 Subject: [PATCH 29/36] Wrapped select all button in a li --- .../Internal/HxMultiSelectInternal.razor | 46 ++++++++++--------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 272fc4d7e..edf3b029a 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -36,30 +36,32 @@ { if (AllowFiltering) { -
    - +
  • +
    + -
    - @if (string.IsNullOrEmpty(filterText)) - { - - } - else - { -
    - -
    - } +
    + @if (string.IsNullOrEmpty(filterText)) + { + + } + else + { +
    + +
    + } +
    -
    +
    • } var filteredItems = GetFilteredItems(); From e54ae0090833bc4ea75b6776086fe59ed5de2c8e Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Sat, 21 Oct 2023 02:47:21 +1100 Subject: [PATCH 30/36] Added li around empty filter result --- .../Forms/Internal/HxMultiSelectInternal.razor | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index edf3b029a..8c9eacb44 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -67,14 +67,16 @@ var filteredItems = GetFilteredItems(); if (filteredItems.Count <= 0) { - if (FilterEmptyResultTemplate is not null) - { - @FilterEmptyResultTemplate - } - else - { - @GetFilterEmptyResultText() - } +
  • + @if (FilterEmptyResultTemplate is not null) + { + @FilterEmptyResultTemplate + } + else + { + @GetFilterEmptyResultText() + } +
    • } else { From bef368ae1b91e1c7adb1200660cc346b11fccf71 Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Sat, 21 Oct 2023 02:51:34 +1100 Subject: [PATCH 31/36] Added padding to filter input. --- .../Forms/Internal/HxMultiSelectInternal.razor.css | 1 + 1 file changed, 1 insertion(+) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css index 5d8150494..6e8b8776a 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.css @@ -45,6 +45,7 @@ button.dropdown-item, flex: 1 1 auto; width: 100%; min-width: 0; + padding: 0.25em; } .form-control-sm ~ .hx-multi-select-filter-input-icon { From 34e7033fe66af1fa604a90cdab974ca765befdaa Mon Sep 17 00:00:00 2001 From: Benjamin Holbrook Date: Sat, 21 Oct 2023 03:05:08 +1100 Subject: [PATCH 32/36] Filter input now respects parent input size --- BlazorAppTest/Pages/HxMultiSelectTest.razor | 3 ++- Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs | 1 + .../Forms/Internal/HxMultiSelectInternal.razor | 2 +- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 2 ++ 4 files changed, 6 insertions(+), 2 deletions(-) diff --git a/BlazorAppTest/Pages/HxMultiSelectTest.razor b/BlazorAppTest/Pages/HxMultiSelectTest.razor index 21758ba0e..ec7a2664c 100644 --- a/BlazorAppTest/Pages/HxMultiSelectTest.razor +++ b/BlazorAppTest/Pages/HxMultiSelectTest.razor @@ -40,7 +40,8 @@ AllowSelectAll="true" SelectAllText="Select all cultures" ClearFilterOnHide="false" - Enabled="@enabled"> + Enabled="@enabled" + InputSize="InputSize.Small"> Couldn't find any matching cultures diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index 82525a859..e93b320ff 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -250,6 +250,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(121, nameof(HxMultiSelectInternal.SelectAllText), SelectAllText); builder.AddAttribute(122, nameof(HxMultiSelectInternal.FilterSearchIcon), FilterSearchIconEffective); builder.AddAttribute(123, nameof(HxMultiSelectInternal.FilterClearIcon), FilterClearIconEffective); + builder.AddAttribute(124, nameof(HxMultiSelectInternal.InputSizeEffective), ((IInputWithSize)this).InputSizeEffective); builder.AddMultipleAttributes(200, this.AdditionalAttributes); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 8c9eacb44..72dd5e674 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -41,7 +41,7 @@ : IAsyncDisposable [Parameter] public string InputCssClass { get; set; } + [Parameter] public InputSize InputSizeEffective { get; set; } + [Parameter] public string InputText { get; set; } [Parameter] public bool EnabledEffective { get; set; } From 569602314b0889f9c18c29cd4c67d0a96a29f6ef Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Mon, 23 Oct 2023 00:14:49 +0200 Subject: [PATCH 33/36] HxMultiSelect - dispose fix --- .../Forms/Internal/HxMultiSelectInternal.razor.cs | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs index 636089813..1f52bd7aa 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor.cs @@ -255,7 +255,7 @@ protected virtual async ValueTask DisposeAsyncCore() { try { - await jsModule.InvokeVoidAsync("dispose", InputId); + await jsModule.InvokeVoidAsync("dispose", elementReference); await jsModule.DisposeAsync(); } catch (JSDisconnectedException) From ab61f92155f1b9ec3d843a72defb4fea665fb3ac Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Mon, 23 Oct 2023 00:54:03 +0200 Subject: [PATCH 34/36] HxMultiSelect - doc & demos tuning --- .../DemoData/DemoDataService.cs | 13 +++- .../DemoData/IDemoDataService.cs | 1 + .../HxMultiSelect_Demo_BasicFiltering.razor | 32 --------- .../HxMultiSelect_Demo_BasicUsage.razor | 42 +++++------- .../HxMultiSelect_Demo_CustomFiltering.razor | 35 ++++++++++ .../HxMultiSelect_Demo_Filtering.razor | 24 +++++++ .../HxMultiSelect_Demo_SelectAll.razor | 44 +++++------- ...xMultiSelect_Demo_TemplatedFiltering.razor | 44 ------------ .../HxMultiSelect_Documentation.razor | 68 ++++++++++++------- .../wwwroot/defaults.css | 1 - 10 files changed, 147 insertions(+), 157 deletions(-) delete mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor create mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_CustomFiltering.razor create mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_Filtering.razor delete mode 100644 Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/DemoDataService.cs b/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/DemoDataService.cs index 0b03048f4..4f85b9a92 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/DemoDataService.cs +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/DemoDataService.cs @@ -1,6 +1,4 @@ -using System.Threading; - -namespace Havit.Blazor.Components.Web.Bootstrap.Documentation.DemoData; +namespace Havit.Blazor.Components.Web.Bootstrap.Documentation.DemoData; public class DemoDataService : IDemoDataService { @@ -542,6 +540,15 @@ public IEnumerable GetAllEmployees() return employees.ToList(); } + public async Task> GetAllEmployeesAsync(CancellationToken cancellationToken = default) + { + logger.LogInformation("DemoDataService.GetAllEmployeesAsync() called."); + + await Task.Delay(150, cancellationToken); // simulate server call + + return employees.ToList(); + } + public IQueryable GetEmployeesAsQueryable() { logger.LogInformation("DemoDataService.GetEmployeesAsQueryable() called."); diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/IDemoDataService.cs b/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/IDemoDataService.cs index 7376db034..dec17d674 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/IDemoDataService.cs +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/DemoData/IDemoDataService.cs @@ -3,6 +3,7 @@ public interface IDemoDataService { IEnumerable GetAllEmployees(); + Task> GetAllEmployeesAsync(CancellationToken cancellationToken = default); IQueryable GetEmployeesAsQueryable(); Task> GetEmployeesDataFragmentAsync(int startIndex, int? count, CancellationToken cancellationToken = default); diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor deleted file mode 100644 index 03ba6c375..000000000 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicFiltering.razor +++ /dev/null @@ -1,32 +0,0 @@ - - -

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    - -@code { - private List people; - private List selectedPersonsInitials { get; set; } = new(); - - protected override async Task OnInitializedAsync() - { - await Task.Delay(1000); // simulates slow server API call - - people = new List - { - 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); -} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor index f4e4bc8a1..139bdac48 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_BasicUsage.razor @@ -1,31 +1,23 @@ - + ValueSelector="@(p => p.Id)" + NullDataText="Loading employees..." + EmptyText="-select values-" /> -

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    +

    Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))

    @code { - private List people; - private List selectedPersonsInitials { get; set; } = new(); - - protected override async Task OnInitializedAsync() - { - await Task.Delay(1000); // simulates slow server API call - - people = new List - { - new Person("Starr Ringo", "RS"), - new Person("Lennon John", "JL"), - new Person("McCartney Paul", "PMC"), - new Person("Harrison George", "GH") - }; - } + private IEnumerable employees; + private List selectedEmployeeIds = new(); - private record Person(string Name, string Initials); + protected override async Task OnInitializedAsync() + { + employees = await DemoDataService.GetAllEmployeesAsync(); + } } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_CustomFiltering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_CustomFiltering.razor new file mode 100644 index 000000000..88602791a --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_CustomFiltering.razor @@ -0,0 +1,35 @@ +@inject IDemoDataService DemoDataService + + + + No employees found + + + +

    Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))

    + +@code { + private IEnumerable employees; + private List selectedEmployeeIds = new(); + + protected override async Task OnInitializedAsync() + { + employees = await DemoDataService.GetAllEmployeesAsync(); + } + + private bool IsRecordIncluded(EmployeeDto employee, string filterQuery) + { + return employee.Name.Contains(filterQuery, StringComparison.OrdinalIgnoreCase) + || employee.Email.Contains(filterQuery, StringComparison.OrdinalIgnoreCase); + } +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_Filtering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_Filtering.razor new file mode 100644 index 000000000..b5f007aea --- /dev/null +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_Filtering.razor @@ -0,0 +1,24 @@ +@inject IDemoDataService DemoDataService + + + +

    Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))

    + +@code { + private IEnumerable employees; + private List selectedEmployeeIds = new(); + + protected override async Task OnInitializedAsync() + { + employees = await DemoDataService.GetAllEmployeesAsync(); + } +} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor index d8821f5d1..6c1ad9f74 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_SelectAll.razor @@ -1,32 +1,24 @@ - -

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    +

    Selected employees (IDs): @String.Join(", ", selectedEmployeeIds.Select(e => e.ToString()))

    @code { - private List people; - private List selectedPersonsInitials { get; set; } = new(); - - protected override async Task OnInitializedAsync() - { - await Task.Delay(1000); // simulates slow server API call - - people = new List - { - new Person("Starr Ringo", "RS"), - new Person("Lennon John", "JL"), - new Person("McCartney Paul", "PMC"), - new Person("Harrison George", "GH") - }; - } + private IEnumerable employees; + private List selectedEmployeeIds = new(); - private record Person(string Name, string Initials); + protected override async Task OnInitializedAsync() + { + employees = await DemoDataService.GetAllEmployeesAsync(); + } } \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor deleted file mode 100644 index dc62e2ce3..000000000 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Demo_TemplatedFiltering.razor +++ /dev/null @@ -1,44 +0,0 @@ - - - No items found - - - -

    Selected initials: @String.Join(' ', selectedPersonsInitials)

    - -@code { - private List people; - private List selectedPersonsInitials { get; set; } = new(); - - protected override async Task OnInitializedAsync() - { - await Task.Delay(1000); // simulates slow server API call - - people = new List - { - 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); -} \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor index ca89c5b70..e287b961e 100644 --- a/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor +++ b/Havit.Blazor.Components.Web.Bootstrap.Documentation/Pages/Components/HxMultiSelectDoc/HxMultiSelect_Documentation.razor @@ -1,30 +1,46 @@ @attribute [Route("/components/" + nameof(HxMultiSelect))] - - - - - - - - - - - - - - - - - - - Height of the dropdown menu. - - - - Height of the dropdown menu. - - - + + + + + + +

    + You can enable filtering by setting AllowFiltering="true".
    + You can use the FilterEmptyResultTemplate to customize the message displayed when no items are found. +

    + + + +

    + You can customize filtering by setting FilterPredicate to a delegate that returns bool and accepts two parameters: TItem and string (filter).
    + You can use the FilterEmptyResultTemplate to customize the content displayed when no items are found. +

    + + + +

    + You can enable the "-select all-" option by setting AllowSelectAll="true".
    + You can customize the text of the "-select all-" option by setting SelectAllText. +

    + + +     + + + + Height of the dropdown menu. + + + + Background color of the dropdown menu. + + + + Opacity of the filter input icon. + + +     \ No newline at end of file diff --git a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css index 96ea98d3d..73f2226dc 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css +++ b/Havit.Blazor.Components.Web.Bootstrap/wwwroot/defaults.css @@ -133,7 +133,6 @@ /* HxMultiSelect */ --hx-multi-select-background-color: var(--bs-body-bg); --hx-multi-select-dropdown-menu-height: 300px; - --hx-multi-select-dropdown-menu-width: 100%; --hx-multi-select-filter-input-icon-opacity: .25; /* TagInput */ From 1144ed2c5d648dc81181ef11094a7be555876544 Mon Sep 17 00:00:00 2001 From: Robert Haken Date: Mon, 23 Oct 2023 00:59:09 +0200 Subject: [PATCH 35/36] HxMultiSelect - code-cleanup --- .../Forms/HxMultiSelect.cs | 2 +- .../Internal/HxMultiSelectInternal.razor | 4 ++-- .../Internal/HxMultiSelectInternal.razor.cs | 20 +++++++++---------- 3 files changed, 12 insertions(+), 14 deletions(-) diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs index e93b320ff..f6a00c5e2 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/HxMultiSelect.cs @@ -236,7 +236,7 @@ protected override void BuildRenderInput(RenderTreeBuilder builder) builder.AddAttribute(107, nameof(HxMultiSelectInternal.ValueSelector), ValueSelector); builder.AddAttribute(108, nameof(HxMultiSelectInternal.SelectedValues), Value); builder.AddAttribute(109, nameof(HxMultiSelectInternal.NullDataText), NullDataText); - builder.AddAttribute(110, nameof(HxMultiSelectInternal.ItemSelectionChanged), EventCallback.Factory.Create.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.ItemsSelected, args.ItemsDeselected))); + builder.AddAttribute(110, nameof(HxMultiSelectInternal.OnItemsSelectionChanged), EventCallback.Factory.Create.SelectionChangedArgs>(this, args => HandleItemSelectionChanged(args.ItemsSelected, args.ItemsDeselected))); builder.AddAttribute(111, nameof(HxMultiSelectInternal.InputGroupStartText), InputGroupStartText); builder.AddAttribute(112, nameof(HxMultiSelectInternal.InputGroupStartTemplate), InputGroupStartTemplate); builder.AddAttribute(113, nameof(HxMultiSelectInternal.InputGroupEndText), InputGroupEndText); diff --git a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor index 72dd5e674..4326bc3f6 100644 --- a/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor +++ b/Havit.Blazor.Components.Web.Bootstrap/Forms/Internal/HxMultiSelectInternal.razor @@ -55,7 +55,7 @@ } else { -
    +
    } @@ -85,7 +85,7 @@