DropDown, DropDownDataGrid and ListBox SearchText two-way binding sup…

…port added
radzenhq · Aug 17, 2023 · ae1f280 · ae1f280
1 parent d58dd28
commit ae1f280
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 15 deletions.
diff --git a/Radzen.Blazor/DataBoundFormComponent.cs b/Radzen.Blazor/DataBoundFormComponent.cs
@@ -216,9 +216,30 @@ protected virtual IQueryable Query
         }
 
         /// <summary>
-        /// Gets the Search text typed by user
+        /// Gets or sets the search text
         /// </summary>
-        public string SearchText => searchText;
+        [Parameter]
+        public string SearchText
+        {
+            get
+            {
+                return searchText;
+            }
+            set
+            {
+                if (searchText != value)
+                {
+                    searchText = value;
+                }
+            }
+        }
+
+        /// <summary>
+        /// Gets or sets the search text changed.
+        /// </summary>
+        /// <value>The search text changed.</value>
+        [Parameter]
+        public EventCallback<string> SearchTextChanged { get; set; }
 
         /// <summary>
         /// The search text
@@ -295,6 +316,12 @@ protected virtual IEnumerable View
         /// <returns>A Task representing the asynchronous operation.</returns>
         public override async Task SetParametersAsync(ParameterView parameters)
         {
+            var searchTextChanged = parameters.DidParameterChange(nameof(SearchText), SearchText);
+            if (searchTextChanged)
+            {
+                searchText = parameters.GetValueOrDefault<string>(SearchText);
+            }
+
             var dataChanged = parameters.DidParameterChange(nameof(Data), Data);
 
             if (dataChanged)

diff --git a/Radzen.Blazor/DropDownBase.cs b/Radzen.Blazor/DropDownBase.cs
@@ -257,13 +257,6 @@ internal object GetKey(object item)
         [Parameter]
         public Action<object> SelectedItemChanged { get; set; }
 
-        /// <summary>
-        /// Gets or sets the search text changed.
-        /// </summary>
-        /// <value>The search text changed.</value>
-        [Parameter]
-        public Action<string> SearchTextChanged { get; set; }
-
         /// <summary>
         /// The selected items
         /// </summary>
@@ -363,6 +356,7 @@ protected async System.Threading.Tasks.Task ClearAll()
                 return;
 
             searchText = null;
+            await SearchTextChanged.InvokeAsync(searchText);
             await JSRuntime.InvokeAsync<string>("Radzen.setInputValue", search, "");
 
             internalValue = default(T);
@@ -740,7 +734,7 @@ async Task DebounceFilter()
                 selectedIndex = -1;
 
             await JSRuntime.InvokeAsync<string>("Radzen.repositionPopup", Element, PopupID);
-            SearchTextChanged?.Invoke(SearchText);
+            await SearchTextChanged.InvokeAsync(SearchText);
         }
 
         /// <summary>

diff --git a/Radzen.Blazor/RadzenDropDown.razor b/Radzen.Blazor/RadzenDropDown.razor
@@ -105,7 +105,7 @@
                 <div class="rz-dropdown-filter-container">
                     <input id="@SearchID" @ref="@search" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" class="rz-dropdown-filter rz-inputtext   " autocomplete="off" type="text"
                            @onchange="@((ChangeEventArgs args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText"
-                           @oninput=@(args => searchText = $"{args.Value}")/>
+                            @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);}) />
                     <span class="rz-dropdown-filter-icon rzi rzi-search"></span>
                 </div>
             }
@@ -132,7 +132,7 @@
                         <div class="rz-multiselect-filter-container">
                             <input id="@SearchID" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" class="rz-inputtext" role="textbox" type="text"
                                    onclick="Radzen.preventDefaultAndStopPropagation(event)"
-                                   @ref="@search" @oninput=@(args => searchText = $"{args.Value}")
+                                   @ref="@search" @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);})
                                    @onchange="@((args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" />
                             <span class="rz-multiselect-filter-icon rzi rzi-search"></span>
                         </div>

diff --git a/Radzen.Blazor/RadzenDropDownDataGrid.razor b/Radzen.Blazor/RadzenDropDownDataGrid.razor
@@ -116,7 +116,7 @@
                     <div class="rz-lookup-search">
                         <input class="rz-lookup-search-input" id="@SearchID" @ref="@search" tabindex="-1" placeholder="@SearchTextPlaceholder"
                                @onchange="@((args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" style="@(ShowSearch ? "" : "margin-right:0px;")"
-                               @oninput=@(args => searchText = $"{args.Value}")/>
+                        @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);}) />
                         @if (ShowSearch)
                         {
                             <button class="rz-button rz-button-md rz-button-icon-only rz-primary" type="button" title="" @onclick="@((args) => OnFilter(new ChangeEventArgs()))">

diff --git a/Radzen.Blazor/RadzenDropDownDataGrid.razor.cs b/Radzen.Blazor/RadzenDropDownDataGrid.razor.cs
@@ -289,7 +289,7 @@ protected override Task OnAfterRenderAsync(bool firstRender)
             {          
                 if(Visible && LoadData.HasDelegate && Data == null)
                 {
-                    LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize });
+                    LoadData.InvokeAsync(new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize, Filter = searchText });
                 }
 
                 StateHasChanged();
@@ -312,6 +312,21 @@ protected override async Task OnDataChanged()
             }
         }
 
+        /// <summary>
+        /// Set parameters as an asynchronous operation.
+        /// </summary>
+        /// <param name="parameters">The parameters.</param>
+        /// <returns>A Task representing the asynchronous operation.</returns>
+        public override async Task SetParametersAsync(ParameterView parameters)
+        {
+            await base.SetParametersAsync(parameters);
+
+            if (!string.IsNullOrEmpty(searchText) && !LoadData.HasDelegate)
+            {
+                await OnLoadData(new Radzen.LoadDataArgs() { Skip = 0, Top = PageSize });
+            }
+        }
+
         /// <summary>
         /// Reloads this instance.
         /// </summary>

diff --git a/Radzen.Blazor/RadzenListBox.razor b/Radzen.Blazor/RadzenListBox.razor
@@ -37,7 +37,7 @@
                     <div class="rz-listbox-filter-container">
                         <input id="@SearchID" @ref="@search" disabled="@Disabled" class="rz-inputtext" role="textbox" type="text" placeholder="@Placeholder"
                                @onchange="@((args) => OnFilter(args))" @onkeydown="@((args) => OnFilterKeyPress(args))" value="@searchText" @onkeydown:stopPropagation="true"
-                               @oninput=@(args => searchText = $"{args.Value}") />
+                               @oninput=@(args => { searchText = $"{args.Value}"; SearchTextChanged.InvokeAsync(searchText);}) />
                         <span class="rz-listbox-filter-icon rzi rzi-search"></span>
                     </div>
                 }