Multiselect DropDownDataGrid does not display all selected values #429

New Issue

claunia · 2026-01-29T17:37:08Z

claunia commented

2026-01-29 17:37:08 +00:00

Originally created by @OndrejUzovic on GitHub (Jun 10, 2022).

When the DropDownDataGrid is set to allow multiselect and the virtualization with LoadData it does not display all selected items in the input control.

Steps to reproduce the problem with the code bellow:

Select the first item from the drop down list.
Scroll down and select the 30th item from the drop down list.

The expected behavior would be that both selections are displayed in the input control.
However the current behavior is that the only one selection is displayed. Which one is displayed depends on the scroll position.

@page "/"

@using Radzen;
@using Radzen.Blazor;
@using System.Linq.Dynamic.Core;

<div style="width:700px; height:500px; background-color:beige;">

    <RadzenDropDownDataGrid FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith"
                            AllowFiltering="true" AllowClear="true" AllowRowSelectOnRowClick=true AllowVirtualization=true
                            Data=@myLoadedData Multiple=true LoadData=@OnLoadData Count=@myVirtualizationCount
                            @bind-Value=myMultipleValues
                            ValueProperty="CustomerID" TextProperty="CompanyName">
        <Columns>
            <RadzenDropDownDataGridColumn Width="40px" Sortable="false">
                <Template Context="data">
                    <RadzenCheckBox TriState="false" Value="@(myMultipleValues != null && myMultipleValues.Any(x => x == ((Record) data).CustomerID))" 
                                    TValue="bool" />
                </Template>
            </RadzenDropDownDataGridColumn>
            <RadzenDropDownDataGridColumn Property="CustomerID" Title="Customer ID"/>
            <RadzenDropDownDataGridColumn Property="CompanyName" Title="Company Name"/>
        </Columns>
    </RadzenDropDownDataGrid>

</div>


@code {
    private class Record
    {
        public string CustomerID { get; set; }
        public string CompanyName { get; set; }
    }

    private int myVirtualizationCount;
    private IEnumerable<Record> myLoadedData;

    private IEnumerable<Record> myDropDownData;

    // Selected values.
    private IEnumerable<string> myMultipleValues;


    protected override void OnInitialized()
    {
        var items = new List<Record>();
        for (int i = 0; i < 100; ++i)
        {
            var record = new Record() { CustomerID = i.ToString(), CompanyName = $"Name{i}" };
            items.Add(record);
        }

        myDropDownData = items;
    }

    private void OnLoadData(LoadDataArgs args)
    {
        var query = myDropDownData.AsQueryable();

        if (!string.IsNullOrEmpty(args.Filter))
        {
            query = query.Where(c => c.CompanyName.ToLower().Contains(args.Filter.ToLower()));
        }

        if (!string.IsNullOrEmpty(args.OrderBy))
        {
            query = query.OrderBy(args.OrderBy);
        }

        myVirtualizationCount = query.Count();

        myLoadedData = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList();

        InvokeAsync(StateHasChanged);
    }
}

I know there is the known design issue when using LoadData so that it is not possible to query if the item exists among drop downs.
However I though (same like for the single-select) the mechanism using the 'SelectedItem' property could be used. However then I get the null reference exception.

Originally created by @OndrejUzovic on GitHub (Jun 10, 2022). When the DropDownDataGrid is set to allow multiselect and the virtualization with LoadData it does not display all selected items in the input control. Steps to reproduce the problem with the code bellow: 1. Select the first item from the drop down list. 2. Scroll down and select the 30th item from the drop down list. The expected behavior would be that both selections are displayed in the input control. However the current behavior is that the only one selection is displayed. Which one is displayed depends on the scroll position. ![image](https://user-images.githubusercontent.com/55758368/173036472-89bf10d7-3065-4bce-89b3-c8e05427d743.png) ``` @page "/" @using Radzen; @using Radzen.Blazor; @using System.Linq.Dynamic.Core; <div style="width:700px; height:500px; background-color:beige;"> <RadzenDropDownDataGrid FilterCaseSensitivity="FilterCaseSensitivity.CaseInsensitive" FilterOperator="StringFilterOperator.StartsWith" AllowFiltering="true" AllowClear="true" AllowRowSelectOnRowClick=true AllowVirtualization=true Data=@myLoadedData Multiple=true LoadData=@OnLoadData Count=@myVirtualizationCount @bind-Value=myMultipleValues ValueProperty="CustomerID" TextProperty="CompanyName"> <Columns> <RadzenDropDownDataGridColumn Width="40px" Sortable="false"> <Template Context="data"> <RadzenCheckBox TriState="false" Value="@(myMultipleValues != null && myMultipleValues.Any(x => x == ((Record) data).CustomerID))" TValue="bool" /> </Template> </RadzenDropDownDataGridColumn> <RadzenDropDownDataGridColumn Property="CustomerID" Title="Customer ID"/> <RadzenDropDownDataGridColumn Property="CompanyName" Title="Company Name"/> </Columns> </RadzenDropDownDataGrid> </div> @code { private class Record { public string CustomerID { get; set; } public string CompanyName { get; set; } } private int myVirtualizationCount; private IEnumerable<Record> myLoadedData; private IEnumerable<Record> myDropDownData; // Selected values. private IEnumerable<string> myMultipleValues; protected override void OnInitialized() { var items = new List<Record>(); for (int i = 0; i < 100; ++i) { var record = new Record() { CustomerID = i.ToString(), CompanyName = $"Name{i}" }; items.Add(record); } myDropDownData = items; } private void OnLoadData(LoadDataArgs args) { var query = myDropDownData.AsQueryable(); if (!string.IsNullOrEmpty(args.Filter)) { query = query.Where(c => c.CompanyName.ToLower().Contains(args.Filter.ToLower())); } if (!string.IsNullOrEmpty(args.OrderBy)) { query = query.OrderBy(args.OrderBy); } myVirtualizationCount = query.Count(); myLoadedData = query.Skip(args.Skip.Value).Take(args.Top.Value).ToList(); InvokeAsync(StateHasChanged); } } ``` I know there is the known design issue when using LoadData so that it is not possible to query if the item exists among drop downs. However I though (same like for the single-select) the mechanism using the 'SelectedItem' property could be used. However then I get the null reference exception.

claunia closed this issue

2026-01-29 17:37:08 +00:00

claunia commented

2026-01-29 17:37:10 +00:00

@enchev commented on GitHub (Aug 4, 2022):

Since the component works with Data property and in this case the selected item might not be part of Data I've enabled SelectedValue to work in multiple selection as well. Here is how your case can be handled in our next update:

<RadzenDropDownDataGrid ...
                            @bind-Value=myMultipleValues Change=@Change SelectedValue=@selectedValue
...
    object selectedValue;
    void Change()
    {
        selectedValue = myMultipleValues != null ? myDropDownData.Where(r => myMultipleValues.Contains(r.CustomerID)) : null;
    }

@enchev commented on GitHub (Aug 4, 2022): Since the component works with Data property and in this case the selected item might not be part of Data I've enabled SelectedValue to work in multiple selection as well. Here is how your case can be handled in our next update: ``` <RadzenDropDownDataGrid ... @bind-Value=myMultipleValues Change=@Change SelectedValue=@selectedValue ... object selectedValue; void Change() { selectedValue = myMultipleValues != null ? myDropDownData.Where(r => myMultipleValues.Contains(r.CustomerID)) : null; } ```

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/radzen-blazor#429