RadzenDropdownDataGrid bind-Value is causing multiple queries

Radzen.Blazor Components
1

I have a RadzenDropDownDataGrid (multiple+chips) with Data set to IQueryable dataset with ValueProperty set to database table primary key and I set @bind-Value to preselected items that contains database ids. The problem is that RadzenDropdownDataGrid makes a query per selected item and that takes forever. Also when you remove an item the component makes a query for every selected item and that too takes long time if you have like 50 items selected or more.

Is there anyway to avoid queries for every selected item when initializing component or when editing the selection in the UI?

Example:

<RadzenDropDownDataGrid 
	@bind-Value="@itemSelection"
	Data="@DataList" 
	Name="SomeName"
	Multiple="true" 
	Chips="true"                                            
	MaxSelectedLabels="1000"
	Style="width: 100%" 
	AllowColumnResize="true"
	PageNumbersCount="5"                             
	AllowClear="true"
	AllowFiltering="true" 
	FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" 
	AllowFilteringByAllStringColumns="true"
	TextProperty="ChipText"
	ValueProperty="Id"  
>
	<Columns>
		<RadzenDropDownDataGridColumn Property="Id" Title="ID" Width="100px"/>
		<RadzenDropDownDataGridColumn Property="ChipText" Title="Text" Width="100px"/>
	</Columns>
</RadzenDropDownDataGrid>


private class DBModel {
	public string ChipText {get; set;}
	public int Id { get; set; }
}

private IQueryable<DbModel> DataList;
private List<int> itemSelection;

protected override async Task OnAfterRenderAsync(bool firstRender) {
	if (firstRender)
	{
		DataList = DbContext.Table.OrderByDescending(x => x.Id);
        //like 50 or more selected items.
		var ids = DbContext.OtherTable.Where( x => x.Table_FK.HasValue ).Select(x => x.Table_FK).ToList();
		itemSelection = DbContext.Table.Where( x => ids.Contains(x.Id)).ToList();
		StateHasChanged();
	}
}
2

You can always ToList() your IQueryable or you can use custom LoadData binding.

4

Problem is that using .ToList() on the IQueryable takes 10-15sec because there are thousands of rows. I am not sure how would you get around the issue with LoadData binding when iterating thru selections takes a long time?

5

With LoadData you can return only needed chunk of your data.

6

Yes, I know but I need to whole data set to be available on the dropdown with paging and I also need the preselected items?

Edit: I mean I don't understand how it helps the iteration of selected items when it does multiple SELECT TOP 1 queries per selected item. I think it should do SELECT .. WHERE IN Id in (123, 321 ...) query.

7

When using LoadData you can still filter, sort and page on the SQL server however nothing will iterate your IQueryable on select. To preselect you can set SelectedValue.

8

Ok, I'll give it a try and see what happens. I assumed I can set SelectedValue to List<> with ids.

9

I got the paging working on LoadData but not the preselected items. The chips preselected are visible but without the usual background color (don't know why). Removing the preselected chips does nothing. Tried to manually handle the removal event but I am not sure how would I get the item being removed.

10

Check the code generated by Radzen IDE / Radzen Blazor Studio for EditXXX page in WebAssembly application. When scaffolding CRUD pages check “Enable sorting, filtering and paging of lookup data” - exactly your scenario.

11

I am using Visual Studio with server side blazor+radzen components.

12

Well, I’m just trying to help you for free. If you are looking for paid support you can check our pricing page.

1 Like
13

I Modifed my example a a bit and removed ValueProperty and itemSelection is now List(DbModel) and also set the SelectedValue to itemSelection.

The reason why it's not working is because of RadzenDropDownDataGrid.razor has this line:

        else if ((selectedItems.Count > 0 || SelectedValue is IEnumerable && !(SelectedValue is string)) && Multiple)
        {
            var itemsToUse = SelectedValue is IEnumerable && !(SelectedValue is string) ? ((IEnumerable)SelectedValue).Cast<object>().ToList() : selectedItems;

OnChipRemove updates the selectedItems (defined in DropDownBase.cs) but not SelectedValue. So ItemsToUse renders SelectValue and chip removal updates the selectedItems they are not in sync. I'm yet unsure how to fix it.

14

I got it fixed. I removed the SelectedValue assignment and used @bind-Value to preselected values.

The reason why it didn't work in the first place is that I had ValueProperty="Id" defined and itemSelection was List(int) so there was no way to render chip's text because the selected items are not in the Datalist (has only 10 paged items, not the selected ones) and itemSelection is int List and when removing chip the OnRemoveChip didn't know which element to remove.

The way to resolve the situation was settings @bind-Value to same data-type as Data and removing the ValueProperty since the object itself is the "value".

I don't think it's intended that you set chips=true and set both SelectedValue to object list and @bind-Value.