Drop Down Data Grid Filter Request

kgordon · February 2, 2021, 8:38pm

Could you add the ability to filter on all columns that show up in the dropdowndatagrid?

enchev · February 2, 2021, 8:55pm

It’s already added actually:

Radzen.Blazor/RadzenDropDownDataGrid.razor

master


      
          @using Radzen
          @using System.Collections
          @using System.Collections.Generic
          @using Microsoft.AspNetCore.Components.Forms
          @using Microsoft.JSInterop
          @typeparam TValue
          @inherits DropDownBase<TValue>
          
          @if (Visible)
          {
              <div @ref="@Element" @attributes="Attributes" class="@GetCssClass()" @onfocus=@this.AsNonRenderingEventHandler(OnFocus)
                   role="combobox" aria-haspopup="listbox" aria-expanded="@isPopupOpen.ToString().ToLowerInvariant()" aria-controls="@PopupID" aria-disabled="@(Disabled.ToString().ToLowerInvariant())"
                   style="@Style" tabindex="@(Disabled ? "-1" : $"{TabIndex}")" id="@GetId()" @onclick="@(args => OpenPopup("ArrowDown", false, true))" @onclick:preventDefault @onclick:stopPropagation
                   @onkeydown="@((args) => OnKeyPress(args))" @onkeydown:preventDefault="@preventKeydown">
                  <div class="rz-helper-hidden-accessible">
                      <input tabindex="-1" disabled="@Disabled" style="width:100%" aria-haspopup="listbox" readonly="" type="text" id="@Name"
                             name="@Name" aria-label="@(!Multiple && internalValue != null ? PropertyAccess.GetItemOrValueFromProperty(internalValue, TextProperty) : EmptyAriaLabel)" @attributes="InputAttributes" />
          
                  </div>
          
                  @if (ValueTemplate != null && selectedItem != null)
                  {
                      <span class="rz-dropdown-label rz-inputtext" style="width:100%;" @onkeydown:stopPropagation="stopKeydownPropagation" @onkeydown="OnGuardKeyDown">
                          @ValueTemplate(selectedItem)
                      </span>
                  }
                  else if (Template != null && selectedItem != null)
                  {
                      <span class="rz-dropdown-label rz-inputtext" style="width:100%;" @onkeydown:stopPropagation="stopKeydownPropagation" @onkeydown="OnGuardKeyDown">
                          @Template(selectedItem)
                      </span>
                  }
                  else if (selectedItem != null && !Multiple)
                  {
                      <span class="rz-dropdown-label rz-inputtext" style="width:100%;">
                          @PropertyAccess.GetItemOrValueFromProperty(selectedItem, TextProperty)
                      </span>
                  }
                  else if ((selectedItems.Count > 0 || SelectedValue is IEnumerable && !(SelectedValue is string)) && Multiple)
                  {
                      var itemsToUse = SelectedValue is IEnumerable && !(SelectedValue is string) ? ((IEnumerable)SelectedValue).Cast<object>().ToHashSet() : selectedItems;
                      var selectedItemsTitle = !string.IsNullOrEmpty(TextProperty)
                          ? string.Join(Separator, itemsToUse.Select(i => PropertyAccess.GetItemOrValueFromProperty(i, TextProperty)))
                          : null;
                      @if (itemsToUse.Count < MaxSelectedLabels && Chips)
                      {
                          <div class="rz-dropdown-chips-wrapper" title="@selectedItemsTitle">
                              @foreach (var item in itemsToUse)
                              {
                                  <div class="rz-chip rz-chip-base rz-variant-filled rz-shade-default">
                                      <span class="rz-chip-text" @onkeydown:stopPropagation="stopKeydownPropagation" @onkeydown="OnGuardKeyDown">
                                          @if (ValueTemplate != null)
                                          {
                                              @ValueTemplate(item)
                                          }
                                          else if (Template != null)
                                          {
                                              @Template(item)
                                          }
                                          else
                                          {
                                              @GetItemOrValueFromProperty(item!, TextProperty ?? string.Empty)
                                          }
                                      </span>
                                      <button tabindex="0"
                                              title="@(RemoveChipTitle + " " + GetItemOrValueFromProperty(item!, TextProperty ?? string.Empty))"
                                              aria-label="@(RemoveChipTitle + " " + GetItemOrValueFromProperty(item!, TextProperty ?? string.Empty))"
                                              type="button" class="rz-button rz-button-xs rz-variant-text rz-base rz-shade-default rz-button-icon-only @(Disabled ?"rz-state-disabled":"")"
                                              @onclick:preventDefault @onclick:stopPropagation @onclick="() => OnChipRemove(item)">
                                          <RadzenIcon Icon="close" />
                                      </button>
                                  </div>
                              }
                          </div>
                      }
                      else
                      {
                          <label class="rz-dropdown-label rz-inputtext" style="width:100%;" title="@selectedItemsTitle" @onkeydown:stopPropagation="stopKeydownPropagation" @onkeydown="OnGuardKeyDown">
                              @if (itemsToUse.Count < MaxSelectedLabels)
                              {
                                  @if (Template == null)
                                  {
                                      @(string.Join(Separator, itemsToUse.Select(i => PropertyAccess.GetItemOrValueFromProperty(i, TextProperty))))
                                  }
                                  else
                                  {
                                      var last = itemsToUse.LastOrDefault();
                                      foreach (var item in itemsToUse)
                                      {
                                          @Template(item)@(item != last ? Separator : "")
                                      }
                                  }
                              }
                              else
                              {
                                  @($"{itemsToUse.Count} {SelectedItemsText}")
                              }
                          </label>
                      }
                  }
                  else if (SelectedValue != null && !(SelectedValue is IEnumerable && !(SelectedValue is string)))
                  {
                      <span class="rz-dropdown-label rz-inputtext rz-corner-all" style="width:100%;">
                          @PropertyAccess.GetItemOrValueFromProperty(SelectedValue, TextProperty)
                      </span>
                  }
                  else if (!string.IsNullOrEmpty(Placeholder))
                  {
                      <span class="rz-dropdown-label rz-inputtext rz-placeholder" style="width:100%;">
                          @Placeholder
                      </span>
                  }
                  else
                  {
                      <span class="rz-dropdown-label rz-inputtext" style="width:100%">
                          &nbsp;
                      </span>
                  }
          
                  <div class="rz-dropdown-trigger  rz-corner-right">
                      <span class="notranslate rz-dropdown-trigger-icon rzi rzi-chevron-down"></span>
                  </div>
          
                  <div id="@PopupID" class="@(Multiple ? "rz-multiselect-panel" : "rz-dropdown-panel")"
                       style="@PopupStyle">
                      <div class="rz-lookup-panel" @onkeydown="@CloseOnEscape">
                          @if (AllowFiltering || HeaderTemplate != null)
                          {
                              @if (HeaderTemplate != null)
                              {
                                  @HeaderTemplate
                              }
                              else
                              {
                              <div class="rz-lookup-search">
                                  <div class="rz-lookup-search-input-container">
                                      <input aria-label="@SearchAriaLabel" class="rz-lookup-search-input" id="@SearchID" @ref="@search" tabindex="0" placeholder="@(SearchTextPlaceholder ?? string.Empty)"
                                          @onchange="@OnFilter" @onkeydown="@OnFilterKeyPress" value="@(searchText ?? string.Empty)" style="@(ShowSearch ? "" : "margin-right:0px;")"
                                          @oninput="@OnFilterInput" />
                                      @if (!string.IsNullOrEmpty(searchText))
                                      {
                                          <button type="button" tabindex="-1" class="notranslate rz-dropdown-clear-icon rzi rzi-times"
                                                  aria-label="@ClearAriaLabel" @onclick="@ClearSearchText" @onclick:stopPropagation="true"></button>
                                      }
                                  </div>
                                  @if (ShowSearch)
                                  {
                                      <button tabindex="0" class="rz-button rz-button-md rz-button-icon-only rz-primary" type="button"
                                              title="@SearchTextPlaceholder" aria-label="@SearchTextPlaceholder" @onclick="@((args) => OnFilter(new ChangeEventArgs()))">
                                          <i class="notranslate rz-button-icon-left rzi">search</i>
                                      </button>
                                  }
                                  @if (ShowAdd)
                                  {
                                      <button tabindex="0" class="rz-button rz-button-md rz-button-icon-only rz-primary" style="margin-left: 5px" type="button"
                                              title="@AddAriaLabel" aria-label="@AddAriaLabel" @onclick="@OnAddClick">
                                          <i class="notranslate rz-button-icon-left rzi">add</i>
                                      </button>
                                  }
                              </div>
                              }
                          }
                          @if (Template != null)
                          {
                              <RadzenDataGrid GridLines=@GridLines EmptyTemplate=@EmptyTemplate FooterTemplate=@FooterTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" AllowColumnPicking="@AllowColumnPicking" AllowColumnReorder="@AllowColumnReorder" ColumnWidth="@ColumnWidth" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate ? Count : count)" LoadData="@OnLoadData" LoadChildData="@LoadChildData"
                                              TItem="object" ColumnReordered="@ColumnReordered" ColumnResized="@ColumnResized" ColumnReordering="@ColumnReordering" ContextMenu="@ContextMenuDataGrid"
                                              CellRender="@OnCellRender" RowRender="@OnRowRender" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSize="@PageSize" PageSizeOptions="@PageSizeOptions" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")" Density="@Density" IsLoading="@IsLoading" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat">
                                  <Columns>
                                      <RadzenDataGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="typeof(string)">
                                          <Template>
                                              @Template(context)
                                          </Template>
                                      </RadzenDataGridColumn>
                                  </Columns>
                              </RadzenDataGrid>
                          }
                          else
                          {
                              if (!string.IsNullOrEmpty(TextProperty) || Columns != null)
                              {
                                  <RadzenDataGrid GridLines=@GridLines EmptyTemplate=@EmptyTemplate FooterTemplate=@FooterTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" AllowColumnPicking="@AllowColumnPicking" AllowColumnReorder="@AllowColumnReorder" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate? Count : count)" LoadData="@OnLoadData" LoadChildData="@LoadChildData"
                                                  TItem="object" ColumnReordered="@ColumnReordered" ColumnResized="@ColumnResized" ColumnReordering="@ColumnReordering" ContextMenu="@ContextMenuDataGrid"
                                                  CellRender="@OnCellRender" RowRender="@OnRowRender" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSize="@PageSize" PageSizeOptions="@PageSizeOptions" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")" Density="@Density" IsLoading="@IsLoading" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat">
                                      <Columns>
                                          @if (Columns != null)
                                          {
                                              @Columns
                                          }
                                          else
                                          {
                                              <RadzenDataGridColumn TItem="object" Property="@TextProperty" Title="@TextProperty" Type="typeof(string)" />
                                          }
                                      </Columns>
                                  </RadzenDataGrid>
                              }
                              else
                              {
                                  <RadzenDataGrid GridLines=@GridLines EmptyTemplate=@EmptyTemplate FooterTemplate=@FooterTemplate AllowVirtualization="@IsVirtualizationAllowed()" VirtualizationOverscanCount="@GetVirtualizationOverscanCount()" AllowRowSelectOnRowClick="@AllowRowSelectOnRowClick" PagerHorizontalAlign="@PagerHorizontalAlign" PagerAlwaysVisible="@PagerAlwaysVisible" Responsive="@Responsive" AllowColumnResize="@AllowColumnResize" AllowColumnPicking="@AllowColumnPicking" AllowColumnReorder="@AllowColumnReorder" ColumnWidth="@ColumnWidth" EmptyText="@EmptyText" @ref="grid" Data="@(LoadData.HasDelegate ? (Data != null ? Data.Cast<object>() : Enumerable.Empty<object>()) : pagedData)" Count="@(LoadData.HasDelegate? Count : count)" LoadData="@OnLoadData" LoadChildData="@LoadChildData"
                                                  TItem="object" ColumnReordered="@ColumnReordered" ColumnResized="@ColumnResized" ColumnReordering="@ColumnReordering" ContextMenu="@ContextMenuDataGrid"
                                                  CellRender="@OnCellRender" RowRender="@OnRowRender" ShowPagingSummary="@ShowPagingSummary" PagingSummaryFormat="@PagingSummaryFormat" PageSize="@PageSize" PageSizeOptions="@PageSizeOptions" PageNumbersCount="@PageNumbersCount" AllowPaging="@(!IsVirtualizationAllowed())" AllowSorting="@AllowSorting" RowSelect="@OnRowSelect" Style="@(IsVirtualizationAllowed() ? "height:285px" : "")" Density="@Density" IsLoading="@IsLoading" FirstPageTitle="@FirstPageTitle" FirstPageAriaLabel="@FirstPageAriaLabel" PrevPageAriaLabel="@PrevPageAriaLabel" PrevPageTitle="@PrevPageTitle" NextPageAriaLabel="@NextPageAriaLabel" NextPageTitle="@NextPageTitle" LastPageAriaLabel="@LastPageAriaLabel" LastPageTitle="@LastPageTitle" PageAriaLabelFormat="@PageAriaLabelFormat" PageTitleFormat="@PageTitleFormat">
                                      <Columns>
                                          <RadzenDataGridColumn TItem="object" Property="it" Title="Item" Type="typeof(string)">
                                              <Template>
                                                  @context
                                              </Template>
                                          </RadzenDataGridColumn>
                                      </Columns>
                                  </RadzenDataGrid>
                              }
                          }
                      </div>
                  </div>
          
                  @if (AllowClear && (!Multiple && HasValue || Multiple && (selectedItems.Count > 0 || SelectedValue is IEnumerable)))
                  {
                      <button type="button" tabindex="-1" class="notranslate rz-dropdown-clear-icon rzi rzi-times" aria-label="@ClearAriaLabel"
                              @onclick="@Clear" @onclick:stopPropagation="true"></button>
                  }
              </div>
          }

This file has been truncated. show original

kgordon · February 3, 2021, 12:51am

Beautiful! Thank you!

xaverine · February 5, 2021, 6:33am

bug report:

with AllowFilteringByAllStringColumns="true"

after search, the search filter remains...

even if clear action is performed

enchev · February 5, 2021, 7:22am

Works as expected on our demo:

filter

xaverine · February 5, 2021, 8:00am

to reproduce the possible issue

give it a search filter
select an item from the result
clear the selected item, by pressing clear
open the search popup again and see if last search result still persist...

sorry for not being clear first time around!

enchev · February 5, 2021, 8:06am

Thanks! It will be fixed in the next update!

xaverine · March 4, 2021, 3:25am

bug?

can't re-select previous selected item

https://drive.google.com/file/d/1eY1hzkACRYpQ4XFJTZJSucypSR-A9hQt/preview