How to select an item in DropDown list with a Category by code?
Hi Vince,
Based on your code, the main reason the selection was not working is that the DropDownList was missing the DropDownListFieldSettings configuration. Without this, the component does not know which property should be used as the display text and which should be used as the value for selection.
To resolve this, please include the DropDownListFieldSettings tag and map:
- Text → the property you want to show in the dropdown (Choise)
- Value → the property that represents the unique value (Index)
<SfDropDownList TItem="DropDownListChoiseWithCategory" TValue="int" @bind-Value="selOverviewValue" DataSource="selOverview" Placeholder="Select item"> <DropDownListFieldSettings Value="Index" Text="Choise"></DropDownListFieldSettings> </SfDropDownList> |
Now, when you set `selOverviewValue = 3;`, the dropdown will correctly find the item in your `selOverview` list where the `Index` property is `3` and select it.
private void SelectSecondItem() { selOverviewValue = 3; }
|
GIF:
Sample: https://blazorplayground.syncfusion.com/LXhSsiheJPwDIqNA
Regards,
K N Siddartha.
Hi Vince,
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1
Gif:
To help us investigate further, could you please check whether the issue is still occurring in your local environment and provide the following details:
- A minimal sample that clearly reproduces the issue
- The exact steps to follow to replicate the problem
- A short video demonstrating the behavior you are experiencing
Your input will help us diagnose the problem more effectively.
Regards,
K N Siddartha.
Hi Vince,
Thank you for sharing your sample code. From the review, it appears that the second DropDownList is bound to a DataSource, but no data has been assigned to it. We’ve prepared a sample where data is rendered for the second DropDownList in the OnInitialized method, similar to the first one, and the value is updated on a button click as well.
We’ve also included a working sample along with a GIF for your reference.
[Home.razor]
@page "/"
@using Syncfusion.Blazor.DropDowns
<h3>DropDownList</h3>
<SfDropDownList TItem="DropDownListChoiseWithCategory" TValue="int" @bind-Value="selOverviewValue" DataSource="selOverview" Placeholder="Select item"> <DropDownListFieldSettings Value="Index" Text="Choise"></DropDownListFieldSettings> </SfDropDownList>
<SfDropDownList TItem="DropDownListChoiseWithCategory" TValue="int" @bind-Value="selOverviewValue2" DataSource="selOverview2" Placeholder="Select item"> <DropDownListFieldSettings Value="Index" Text="Choise"></DropDownListFieldSettings> </SfDropDownList>
<br/>
<button class="btn btn-primary" @onclick="SelectSecondItem"> Select item with Index </button>
<br/>
<p>Selected Value: @selOverviewValue</p>
@code { private int selOverviewValue = 0;
private int selOverviewValue2 = 0;
private List<DropDownListChoiseWithCategory> selOverview = new();
private List<DropDownListChoiseWithCategory> selOverview2 = new();
protected override void OnInitialized() { selOverview.Add(new DropDownListChoiseWithCategory() { Choise = "Tax", Category = "Private:", Index = 0 });
selOverview.Add(new DropDownListChoiseWithCategory() { Choise = "Balans", Category = "Other:", Index = 1 });
selOverview.Add(new DropDownListChoiseWithCategory() { Choise = "Profit", Category = "Other:", Index = 2 });
selOverview2.Add(new DropDownListChoiseWithCategory() { Choise = "Tax", Category = "Private:", Index = 0 });
selOverview2.Add(new DropDownListChoiseWithCategory() { Choise = "Balans", Category = "Other:", Index = 1 });
selOverview2.Add(new DropDownListChoiseWithCategory() { Choise = "Profit", Category = "Other:", Index = 2 }); }
private void SelectSecondItem() { selOverviewValue = 1; selOverviewValue2 = 1; } public class DropDownListChoiseWithCategory { public string Choise { get; set; } public string Category { get; set; } public int Index { get; set; } }
}
|
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1
Gif:
Regards,
K N Siddartha.
Hi Vince,
Based on the details you shared, we have prepared a sample binding the DataSource for two DropDown List components within the OnParametersSetAsync lifecycle method. In this approach, the data is loaded correctly after a page refresh, and the default values are applied as expected.
[Home.razor]
@page "/"
@using Syncfusion.Blazor.DropDowns
<SfDropDownList TItem="DropDownListChoiseWithCategory" TValue="int" @bind-Value="selOverviewValue" DataSource="selOverview" Placeholder="Select item"> <DropDownListFieldSettings Value="Index" Text="Choise" /> </SfDropDownList>
<SfDropDownList TItem="DropDownListChoiseWithCategory" TValue="int" @bind-Value="selOverviewValue2" DataSource="selOverview2" Placeholder="Select item"> <DropDownListFieldSettings Value="Index" Text="Choise" /> </SfDropDownList>
<br />
<button class="btn btn-primary" @onclick="SelectSecondItem"> Select item with Index = 2 </button>
<br />
<p>Selected Value 1: @selOverviewValue</p> <p>Selected Value 2: @selOverviewValue2</p>
@code { private int selOverviewValue = 0; private int selOverviewValue2 = 0;
private List<DropDownListChoiseWithCategory> selOverview = new(); private List<DropDownListChoiseWithCategory> selOverview2 = new();
private bool _dataLoaded = false;
protected override async Task OnParametersSetAsync() { if (_dataLoaded) return;
var items = new List<DropDownListChoiseWithCategory> { new() { Choise = "Tax", Category = "Private:", Index = 0 }, new() { Choise = "Balans", Category = "Other:", Index = 1 }, new() { Choise = "Profit", Category = "Other:", Index = 2 } };
selOverview = items; selOverview2 = new List<DropDownListChoiseWithCategory>(items);
_dataLoaded = true;
selOverviewValue = 1; selOverviewValue2 = 1;
StateHasChanged(); }
private void SelectSecondItem() { selOverviewValue = 2; selOverviewValue2 = 2; }
public class DropDownListChoiseWithCategory { public string Choise { get; set; } = string.Empty; public string Category { get; set; } = string.Empty; public int Index { get; set; } } }
|
For your reference we have included a working sample along with the Gif demonstrating the working.
Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1
Gif:
To help us investigate further, could you please check whether the issue is still occurring in your local environment and provide the following details:
- A minimal sample that clearly reproduces the issue
- The exact steps to follow to replicate the problem
- A short video demonstrating the behavior you are experiencing
Your input will help us diagnose the problem more effectively.
Regards,
K N SIddartha.
