RadzenDropDown - with Key\Value

Radzen.Blazor Components
1

New to Blazor and Radzen, so bear with me (I'm a backend C# gal by trade).

I've got me a nice DataGrid and I want to add the ability to update columns that take a value based upon a dropdown.

For the Display I'm calling a function that converts that saved value (a byte?) and converts it to text.

So, what I'm after (inside my EditTemplate) is the ability to take something like a SortedList and use that in my Dropdown control.

This is what I've managed to put together (not working):

<RadzenDataGridColumn TItem="Data" Property="AccountStatus" Filterable="false" Title="Status" Frozen="false" Width="30px" TextAlign="TextAlign.Center">
   <Template Context="data">
     <RadzenText>@Data.GetAccountStatusText(data.AccountStatus)</RadzenText>
    </Template>
    <EditTemplate Context="data">
      <RadzenDropDown TValue="string" @bind-Value="distributor.AccountStatus" Style="width:50px; display: block" Name="Account Status" Data=@Data.AccountStatuses/>
   </EditTemplate>
</RadzenDataGridColumn>

And

    public static string GetAccountStatusText(byte? status)
    {
        if (!status.HasValue)
            return $"? ${status}";
        var v = status.GetValueOrDefault();
        var d = AccountStatuses();
        return d.TryGetValue(v, value: out var text) ? text : $"{v} - Not defined";
    }

    public static SortedList<byte, string> AccountStatuses()
    {
        var ret = new SortedList<byte, string>
        {
            { 0, "Inactive" },
            { 1, "Active" },
            { 255, "Undefined" }
        };

        return ret;
    }

I'm confused about how to split out the Key and the value of the SortedList within the RadzenDropDown so it displays the Value but stores the Key. I see there's some references to what I might need within the control, but I'm missing the ability to connect the dots (as it where),

1 Like
2

Hi @Dazed_And_Confused,

You can try the following

 <RadzenDropDown TValue="string" TextProperty="Value" ValueProperty="Key" @bind-Value="distributor.AccountStatus" Style="width:50px; display: block" Name="Account Status" Data=@Data.AccountStatuses />

The TextProperty and ValueProperty attributes determine which properties from your class are used for the text and value of the dropdown.

Here is what I tested and seems to work fine:

<div class="rz-p-sm-12 rz-text-align-center">
    <RadzenLabel Text="Select Value" Component="DropDownBindValue" Style="margin-right: 8px; vertical-align: middle;" />
    <RadzenDropDown @bind-Value=@value ValueProperty="Key" TextProperty="Value" Data=@data Style="width: 100%; max-width: 400px;" Name="DropDownBindValue" />
</div>

@code {
    byte value = 1;

    SortedList<byte, string> data = new SortedList<byte, string>
    {
        { 0, "Inactive" },
        { 1, "Active" },
        { 255, "Undefined" }
    };
}

sorted-list

2 Likes
3

Thank you so much, @korchev!

I’ll give this a whirl later on this morning. Really liking these components and one cannot argue the price :grinning:

4

Everything is now working. :tada: :partying_face:

Thanks again - you can close this topic if you wish.