Currently, there's only one "Change" event for Dropdown component. The native oninput event won't work since the component has another separated filter input element underneath it and whatever I type is not on the main dropdown text box which won't fire the oninput event. In my case, I need to bind the list of users dynamically based on whatever entered in the filter input. The reason is that we have multiple sets of domains for AD users. I need users to enter the domian and partial ID to dynamically list out the matched users within the domain in the dropdown list for multiple user selections across different domains. Is this possible?
Maybe LoadData event will work in your case, check our demo for reference about LoadData binding:
Hi Radzen Team,
Let me know if I understand correctly. For LoadData event with virtualization, I still need to pre-load the global AD users among all the different domains/regions and then use filter with Skip&Take to narrow down the results. However, I actually wanted to load the data dynamically with user typing the domain (such as "us\", "uk\", or "ie\" etc) and then only filter within one set of domain/region of the users data afterwards... The reason I want to do this way is because loading on some other domain/region users might take a long time... That's why I need the oninput event to load the data dynamically. Or if you have a way to do multi-binding on LoadData with different options or selection between the domains/regions in the dropdown component, that would be great too.
You do not need to preload anything if your data source takes paging and filtering arguments. In server Blazor this can be DvContext and in WASM OData service.
Hmm, are you suggesting to use DropDownDataGrid with paging and filtering? This might be a good idea. But it will require some modifications on the AD service which will need to involve with other team. Originally, I was thinking to use the existing service to dynamically display in the dropdown list but if this is the only way to handle my case, I guess I have to go this route then. Thanks!!
One more question. When I use LoadData event with Skip and Take, the dropdown data grid only has 2 pages at most no matter how many counts of the records I get and if I set AllowVirtualization to true, then there's no more paging at all...
Hi Radzen Team,
Another issue is that if I select 4 items or more, it will show 4 or more items selected and there's no way I can track who I already selected before in this case... Thus, I wonder if you can make it as an option where I can set it to true or false to display all the selected items or not, or to set a certain number to collapse the selected items. Thanks a lot!!
That's great! This works perfectly for my case. Thanks a lot!!
Hi Radzen Team,
I keep encountering the following issue with multiple selection enabled on dropdown data grid...
blazor.server.js:1 Uncaught (in promise) Error: Cannot send data if the connection is not in the 'Connected' State.
at bt.send (blazor.server.js:1:52057)
at kt._sendMessage (blazor.server.js:1:68692)
at kt._sendWithProtocol (blazor.server.js:1:68733)
at kt.send (blazor.server.js:1:68841)
at Object.beginInvokeDotNetFromJS (blazor.server.js:1:131797)
at w (blazor.server.js:1:2164)
at C.invokeMethodAsync (blazor.server.js:1:4014)
at HTMLDocument.resetTimeDelay (VM24 appcodeoverview:97:30)
Here is what happened, I searched the users for "michael" and selected the first one.
After the user is selected, I then wanted to search for "michelle" so I hit backspace 3 times until the keyword became "mich" and then the error occurred right away...
This only happens after at least one item is being selected. Even if I keep hitting backspace to remove the entire keyword, it will still happen if I search for "mich", "michael", or any other keywords that the selected item contains with....
Here is my RadzenDropDownDataGrid in razor file:
<RadzenDropDownDataGrid @ref="Grid" Chips="true" AllowRowSelectOnRowClick="true" AllowFiltering="true" FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" AllowClear="true" @bind-Value=@MultipleSelections
LoadData="@OnLoadData" Multiple="true" Placeholder="Select..." Data=@AdUsers Count="@Count" TextProperty="Name" ValueProperty="Name" Class="w-100" PageSize="8" PageNumbersCount="3" MaxSelectedLabels="10" AllowColumnResize="true" >
<Columns>
<RadzenDropDownDataGridColumn Width="60px" Sortable="false">
<HeaderTemplate>
<RadzenCheckBox TriState="false" TValue="bool" Value="@(AdUsers.Any(c => MultipleSelections != null && MultipleSelections.Contains(c.Name)))"
Change="@(args => MultipleSelections = args ? Grid.View.Cast<UserInfo>().Select(c => c.Name) : MultipleSelections = Enumerable.Empty<string>())"/>
</HeaderTemplate>
<Template Context="data">
<RadzenCheckBox TriState="false" Value="@(MultipleSelections != null && MultipleSelections.Contains(((UserInfo) data).Name))"
TValue="bool" />
</Template>
</RadzenDropDownDataGridColumn>
<RadzenDropDownDataGridColumn Property="Name" Title="Name" Width="150px"/>
<RadzenDropDownDataGridColumn Property="EmailAddress" Title="Email" Width="200px"/>
<RadzenDropDownDataGridColumn Property="SamAccountName" Title="Account" Width="100px"/>
</Columns>
</RadzenDropDownDataGrid>
and the OnLoadData event in code behind
private void OnLoadData(LoadDataArgs args)
{
var query = AdService.SearchProfileFromAzureAD(args.Filter).AsQueryable();
if (string.IsNullOrEmpty(args.OrderBy) == false)
{
query = query.OrderBy(x => x.Name);
}
if (args.Skip != null)
{
query = query.Skip(args.Skip.Value);
}
if (args.Top != null)
{
query = query.Take(args.Top.Value);
}
Count = query.Count();
AdUsers = query;
InvokeAsync(StateHasChanged);
}
One more small question is why my CheckBox is checked with a solid square, not a check mark?
This is the general error displayed in the browser when there is an exception in Blazor code. You can debug your application to check where and why the exception is raised.
I added try and catch in OnLoadData() but it doesn't go to catch at all... The error pops up right after InvokeAsync(StateHasChanged) is executed...
private void OnLoadData(LoadDataArgs args)
{
try
{
var query = AdService.SearchKingstonProfileFromAzureAD(args.Filter).AsQueryable();
if (string.IsNullOrEmpty(args.OrderBy) == false)
{
query = query.OrderBy(x => x.Name);
}
if (args.Skip != null)
{
query = query.Skip(args.Skip.Value);
}
if (args.Top != null)
{
query = query.Take(args.Top.Value);
}
Count = query.Count();
AdUsers = query;
InvokeAsync(StateHasChanged);
}
catch (Exception ex)
{
var message = ex.Message;
}
}
BTW, I saw this error as well
Error: System.InvalidOperationException: Collection was modified; enumeration operation may not execute.
at System.Collections.Generic.List`1.Enumerator.MoveNext()
at System.Linq.Enumerable.SelectListIterator`2.MoveNext()
at System.Linq.Enumerable.CastIterator[TResult](IEnumerable source)+MoveNext()
at Radzen.Blazor.RadzenDropDownDataGrid`1.SelectItemFromValue(Object value)
at Radzen.DropDownBase`1.OnParametersSetAsync()
at Microsoft.AspNetCore.Components.ComponentBase.CallOnParametersSetAsync()
at Radzen.RadzenComponent.SetParametersAsync(ParameterView parameters)
at Radzen.DataBoundFormComponent`1.SetParametersAsync(ParameterView parameters)
at Radzen.DropDownBase`1.SetParametersAsync(ParameterView parameters)
Hi Radzen Team,
The above error is resolved by changing MultipleSelections to List<> instead of using IEnumerable<>.
private List<string> MultipleSelections { get; set; }
private RadzenDropDownDataGrid<List<string>> Grid { get; set; }
<RadzenDropDownDataGridColumn Width="60px" Sortable="false">
<HeaderTemplate>
<RadzenCheckBox TriState="false" TValue="bool" Value="@(AdUsers.Any(c => MultipleSelections != null && MultipleSelections.Contains(c.Name)))"
Change="@(args => MultipleSelections = args ? Grid.View.Cast<UserInfo>().Select(c => c.Name).ToList() : MultipleSelections = Enumerable.Empty<string>().ToList())"/>
</HeaderTemplate>
<Template Context="data">
<RadzenCheckBox TriState="false" Value="@(MultipleSelections != null && MultipleSelections.Contains(((UserInfo) data).Name))" TValue="bool" />
</Template>
</RadzenDropDownDataGridColumn>
However, do you know why my checkbox is selected with a solid square, not with a check mark as in your demo?
You are using Standard theme while our demo by default is using Material. Check our Getting started to know how to reference desired theme CSS:
https://blazor.radzen.com/get-started
Got it, thanks!!
One more question related to DropDownDataGrid, if an error occurs during the selection in dropdown list, the error dialog will be blocked by the datagrid element as you can see in the following screenshot.
I notice the DialogService actually locks all other elements in the page but somehow the datagrid is still active on top of the error dialog...
I'm not sure how good UX is to show a dialog on selection change of a drop down. Drop downs z-index should be always bigger than dialog z-index, maybe you should use our new Alert component instead:
UPDATE: In the next update opening a dialog will close all popups: Close all popups on dialog open · radzenhq/radzen-blazor@776ae01 · GitHub
Hi Radzen Team,
Not sure if this is a bug or something that I didn't configure correctly.
As you can see in the above gif image, I have the selected name tags showed on the dropdown text box with Chips set to "true" but all of the sudden the list gets changed when the filter result has someone being selected before. And it starts having some weird behaviors afterwards...
Here is the what I have in the razor file:
And OnLoadData event:
private void OnLoadData(LoadDataArgs args)
{
try
{
var query = AdService.SearchKingstonProfileFromAzureAD(args.Filter).AsQueryable();
// This is required for binding in RadzenDropDown component if using LoadData event
Count = query.Count();
if (string.IsNullOrEmpty(args.OrderBy) == false)
{
query = query.OrderBy(args.OrderBy);
}
if (args.Skip != null)
{
query = query.Skip(args.Skip.Value);
}
if (args.Top != null)
{
query = query.Take(args.Top.Value);
}
AdUsers = query;
InvokeAsync(StateHasChanged);
}
catch (Exception ex)
{
ShowErrorMessageDialog();
}
}