DropDown - Concatenate TextProperty

Radzen Studio Blazor Server
1

How can I customize the TextProperty to concatenate multiple fields and be searchable. I'm aware I can use the Template field to display this, but it is not searchable. Extending the class with a viewmodel is also not a great option, as I'm using entity framework and it messes up class type testing.

<RadzenDropDown Style="width:100%;" AllowClear="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" @bind-Value="SelectedProjectIds" Multiple="true" Data="@Projects" TextProperty="p.ProjectNumber + ' - ' p.Name" ValueProperty="Id" Change="@(args => OnSelectedProjectsChanged(args, "DropDown with multiple selection"))">
</RadzenDropDown>
2

I've just published custom filtering support for DropDown, DropDownDataGrid, AutoComplete and ListBox. Check the third DropDown in this demo:
https://blazor.radzen.com/dropdown

Here is the relevant code:

@inject NorthwindContext dbContext
...
<RadzenDropDown AllowClear="true" TValue="string"
                        LoadData="@LoadData" AllowFiltering="true"
                        Data="@customCustomersData" 
                        TextProperty="CompanyName" ValueProperty="CustomerID" />
...
@code {
    IEnumerable<Customer> customCustomersData;

    void LoadData(LoadDataArgs args)
    {
        customCustomersData = dbContext.Customers.Where(c => c.CustomerID.Contains(args.Filter) || c.ContactName.Contains(args.Filter)).ToList();
    }
}
1 Like
3

@enchev thank you so much for this update! only one issue though...my property does not show up as the selection once selected. This makes my filterable options and selected property different. Anyway to make the selected property show up as the selection?

4

Additionally...this only works when not using "multiple" as it clears your selection with each search.

5

It should be ok with Radzen.Blazor 2.5.2.

6

Hi enchev.
Thank you for adding this option! I´m testing the Loading event with the Autocomplete component to consume a rest service that "Filters" the result using args.Filter as argument. It worked ok the first time but it does funny mixing if I change the filter. I don´t know if the Loading event was designed to do what i did. If it is of use i can send a more detailed sample.
On the other hand, it would be of great use that the down key allow us to "jump" from the "argument" to the list of results at the autocomplete component and navigate it.
I wait for your answer.
Thank you again.
H

7

Hey, I have two issues with the "loaddata" functionality and filters.

  1. Cant get LoadData to work with AllowVirtualization="true", the dropdown is just shown as empty.

  2. When I use the dropDown's filter the dropdown doesnt update and shorten the resultlist as it does when LoadData isnt used. I have to type something in the filter - click outside the dropdown - and then click the dropdown again for the filter to have any effect.

<RadzenDropDown Style="width:300px; margin-top:10px; margin-bottom:10px; vertical-align: middle;" TValue="string" @bind-Value="uniqueProject" Placeholder="Projekt"
Data="@customDwProject"
TextProperty="project_name" ValueProperty="project" LoadData="@LoadData" AllowVirtualization="false" AllowFiltering="true" AllowClear="false" Change="@(args => Search(args, "projectChange"))" >

@code{
void LoadData(LoadDataArgs args)
{
customDwProject = projectList.Where(c => c.project.ToUpper().Contains(args.Filter.ToUpper()) || c.project_name.ToUpper().Contains(args.Filter.ToUpper()) ).ToList();
NotificationService.Notify(new NotificationMessage
{
Severity = NotificationSeverity.Info,
Summary = $"TEST Antal prosjekt i listan",
Detail = customDwProject.Count().ToString()
}) ;
}
}

8

I solved my second problem by adding await InvokeAsync(() => { StateHasChanged(); }); in my LoadData method. If there is a better solution Im all ears