Multi-value dropdown within grid unexpectedly read-only

Radzen.Blazor Components
1

hi there, I'm trying to bind a multi-value dropdown that's inside of a grid. I've looked at the online example, which is helpful, but I can't get it to work nicely within a grid. If I use this syntax to setup binding, it shows the right selected values, but the control becomes read-only:

@bind-Value="Field.FolderIds"

If I use this syntax, trying to respond to the ValueChange (or Change event works the same), then it becomes writeable again, but won't bind as expected:

TValue="IEnumerable<long>" ValueChanged="@((args) => FolderOnChange(args, Field))"

I've made a little demo showing the symptoms and I what I tried
https://1drv.ms/v/s!AvguHRnyJtWMmeAuc5BzPDHLpYP1iw?e=0hAhGA

2

Can you provide more info about this property?

3

Thank you Encheve. Field.FolderIds is an "unmapped" model class property. I treat it as "unmapped" so it can bypass my regular ORM behavior, and do a custom update. This Field table is related many-to-many to a Folder table. So, this FolderIds property is the associative "navigation" property to the many- side of the relationship, in effect. (I will have a complementary property FieldIds on the Folder table also. But -- one thing at a time!)

In my blazor component that renders the grid, here are the queries I'm doing -- for the main grid, but also the list of all folders, and the selected folders for each field as an ILookup.

image
image788×443 13.9 KB

During the grid's row render event, I select the folders that apply to the row being rendered from the ILookup structure, and set them on the current row's FolderIds property. This is intended to make the multi-select select the right folders for the field being rendered.

void OnRowRender(RowRenderEventArgs<Field> args)
{
	// get the folder Ids associated with a given field. These will be selected
	// in the multi-select dropdown. This works, in fact, but the dropdown becomes
	// read-only when using @bind-Value="Field.FolderIds"
	args.Data.FolderIds = SelectedFolders[args.Data.Id].Select(ff => ff.FolderId);
}
4

Can you post also the property definition? Is it IList or plain IEnumerable?

5

sorry, it's like this -- plain IEnumerable

public class Field
{
    // code omitted

    [NotMapped]
    public IEnumerable<long> FolderIds { get; set; }
}
6

Okay I got this working. The solution was to bind to a component property of multi-select values instead of a property on the grid row bound item. I still use IEnumerable<long> as the selected values type. Since only one row of the grid can be edited at a time, it works fine to have one component property to hold the dropdown selections. I use the grid's RowEdit event to prep the selected values for display with this line:

void OnRowEdit(Field field) => SelectedFolderIds = SelectedFolders[field.Id].Select(ff => ff.FolderId);

And I setup the dropdown like this

<RadzenDropDown Multiple="true" 
                                Data="SelectableFolders" ValueProperty="Id" TextProperty="FullPath"   
                                @bind-Value="SelectedFolderIds"/>

The component has this field to store the selections

IEnumerable<long> SelectedFolderIds;