CodeBeam.MudBlazor.Extensions
CodeBeam.MudBlazor.Extensions copied to clipboard
MudSelectExtended: How to dynamically refresh dropdown list items when using search box.
We need to perform a api call when typing in the search box, that will bring a list of itms that should replace the items in teh drop down. Right now we have
<MudSelectExtended T="LeadExplorationFilterValue" @ref="_eosSelectExtended" @bind-SelectedValues="@SelectedValues" ItemCollection="FilterValues" SearchBox="true" Color="Color.Tertiary" SearchBoxClearable="true" SearchBoxAutoFocus="true" OnSearchStringChange="GetRefinedFilterValues" MultiSelection="true" MultiSelectionTextFunc="@((x) => DisplayText)" Underline="false" Immediate="false" RelativeWidth="DropdownWidth.Adaptive" ToStringFunc="@(x => x?.Text)" Variant="Variant.Text" Margin="Margin.Dense" OpenIcon="@Icons.Material.Filled.ExpandMore" CloseIcon="@Icons.Material.Filled.ExpandLess" AnchorOrigin="Origin.BottomLeft" TransformOrigin="Origin.TopLeft" />
`
IList<LeadExplorationFilterValue> FilterValues { get; set; } = [];
MudSelectExtended<LeadExplorationFilterValue> _eosSelectExtended = null!;
bool _shouldSearch = false;
IEnumerable<LeadExplorationFilterValue> _selectedValues = [];
IEnumerable<LeadExplorationFilterValue> SelectedValues
{
get
{
return _selectedValues;
}
set
{
_selectedValues = value;
var filterValuesSelected = WellKnownFilterState.Value.SelectedFilters.ToDictionary();
filterValuesSelected[FilterType] = value.ToList();
Dispatcher.Dispatch(new UpdateSelectedFilterValuesAction(FilterType, value.ToList(), IsChipClose: false));
if ((value.Any() && !_shouldSearch) || (!value.Any() && _shouldSearch))
_shouldSearch = true;
if (_shouldSearch)
Dispatcher.Dispatch(new SearchAccountAction(SearchModel?.SearchText, IsLeadExploration: true, filterValuesSelected));
}
}
private void GetRefinedFilterValues(string searchBoxText)
{
var filter = WellKnownFilterState.Value.Filters.FirstOrDefault(x => x.FilterType == FilterType);
if (filter == null)
return;
if (filter.FilterType == LeadExplorationFilterType.LegalEntityTypeClass || filter.FilterType == LeadExplorationFilterType.Revenue || filter.FilterType == LeadExplorationFilterType.Size)
return;
if (string.IsNullOrEmpty(searchBoxText))
{
Dispatcher.Dispatch(new CleanFilterValuesAction(FilterType));
RefreshFilterValues();
return;
}
if (searchBoxText?.Length < 2)
return;
Dispatcher.Dispatch(new SearchFilterValuesAction(FilterType, searchBoxText));
}
public async void RefreshFilterValues(IList<LeadExplorationFilterValue>? filterValues = null)
{
var alreadySelected = WellKnownFilterState.Value.SelectedFilters[FilterType];
FilterValues = filterValues ?? [];
FilterValues.AddRangeNonNullItems(alreadySelected);
await _eosSelectExtended.ForceRender(true);
await _eosSelectExtended.ForceUpdate();
_eosSelectExtended.ForceUpdateItems();
}
private void OnSearchFilterValuesSuccessAction(SearchFilterValuesSuccessAction action)
{
if (action.FilterType == FilterType)
RefreshFilterValues(action.FilterValues ?? []);
}
`
when typing in the searchbox , the api call returns the new values but none of the methods called
await _eosSelectExtended.ForceRender(true);
await _eosSelectExtended.ForceUpdate();
_eosSelectExtended.ForceUpdateItems();
refresh the items can you help us/explain how to do this?
Thank you