I have this issue on my SfDropdownlist when using a preselected item the dropdown items will duplicate/add the preselected item on the list. I need help how to fix this.
My Oninitialized Code:
private string selectedCompanyValue = string.Empty;
private string selectedYearValue = string.Empty;
protected override async Task OnInitializedAsync()
{
// Load companies and preselect first item
company = (await CompanyService.CompanyList()).ToList();
if (company.Any())
{
selectedCompanyValue = company.First().CompanyID.ToString();
}
// Load years and preselect first item
year = (await YearService.GetYears()).ToList();
if (year.Any())
{
selectedYearValue = year.First().YearID.ToString();
}
// Load initial grid data if selections exist
if (!string.IsNullOrEmpty(selectedYearValue))
{
await LoadData();
}
}
My SfDropdownlist Code:
<div style="display: flex; align-items: center; gap: 10px;">
<SfDropDownList TItem="CompanyModel"
TValue="string"
DataSource="@company"
@bind-Value="@selectedCompanyValue"
Placeholder="Select a Company"
Width="400px">
<DropDownListFieldSettings Text="CompanyName" Value="CompanyID"></DropDownListFieldSettings>
<DropDownListEvents TItem="CompanyModel" TValue="string" ValueChange="OnChange"></DropDownListEvents>
</SfDropDownList>
<SfDropDownList TItem="YearModel"
TValue="string"
DataSource="@year"
@bind-Value="@selectedYearValue"
Placeholder="Select a Year"
Width="150px">
<DropDownListFieldSettings Text="YearID" Value="YearID"></DropDownListFieldSettings>
<DropDownListEvents TItem="YearModel" TValue="string" ValueChange="OnChangeYear"></DropDownListEvents>
</SfDropDownList>
<SfButton OnClick="@LoadData">Load Data</SfButton>
</div>
Attached are the photos of the issue regarding the duplicate items on the list. I can confirm on my Database that there are no duplicates.
Oliver
Hi Oliver,
Thank you for reaching out to us.
We have reviewed your query regarding duplicate data appearing in the component, and we've created a runnable sample based on the code snippet you shared. After thorough testing on our end, we were unable to reproduce the issue — the data appears as expected without any duplicates.
To help us investigate this further and accurately replicate the issue in your environment, we kindly request the following details:
These details will help us narrow down the cause and provide you with a prompt and effective solution.
We’ve also attached the sample we created for your reference. Please feel free to compare it with your implementation and let us know if there are any specific differences or scenarios we might be overlooking.
We appreciate your cooperation and look forward to resolving this with you.
Regards,
Yohapuja S
Thanks for the reply. I noticed your sample code for selectedCompanyValue and selectedYearValue is string. Mine in Int. I converted mine to string but the anomaly still exists. I'm attaching the video regarding the anomaly.
Below is my updated code Home.razor page:
@page "/"
@using Microsoft.AspNetCore.Components.Server.ProtectedBrowserStorage
@using Syncfusion.Blazor.Grids
@using System.Dynamic
@using Syncfusion.Blazor.DropDowns
@rendermode InteractiveServer
@inject ICompanyService CompanyService
@inject IYearService YearService
@inject DepreciationService DepreciationService
@inject IJSRuntime Js
@inject NavigationManager NavigationManager
@inject ProtectedSessionStorage ProtectedSessionStorage
<PageTitle>Asset Depreciation Expense</PageTitle>
<h1>Asset Depreciation Expense</h1>
<br />
<div style="display: flex; align-items: center; gap: 10px;">
<div>
<SfDropDownList TItem="CompanyModel"
TValue="string"
DataSource="@company"
@bind-Value="@selectedCompanyValue"
Placeholder="Select a Company"
Width="400px" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Text="CompanyName" Value="CompanyID"></DropDownListFieldSettings>
<DropDownListEvents TItem="CompanyModel" TValue="string" ValueChange="OnChange"></DropDownListEvents>
</SfDropDownList>
</div>
<div>
<SfDropDownList TItem="YearModel"
TValue="string"
DataSource="@year"
@bind-Value="@selectedYearValue"
Placeholder="Select a Year"
Width="150px" FloatLabelType="@FloatLabelType.Always">
<DropDownListFieldSettings Text="YearID" Value="YearID"></DropDownListFieldSettings>
<DropDownListEvents TItem="YearModel" TValue="string" ValueChange="OnChangeYear"></DropDownListEvents>
</SfDropDownList>
</div>
<div style="transform: translateY(12px);">
<SfButton OnClick="@LoadData">Apply Filter</SfButton>
</div>
</div>
<br />
<div>
<SfGrid TValue="DepreciationRecordModel" DataSource="@Records" AllowTextWrap="true">
<GridTextWrapSettings WrapMode="WrapMode.Both"></GridTextWrapSettings>
<GridColumns>
<GridColumn Field="CompanyName" HeaderText="Company" Width="200" HeaderTextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field="AssetName" HeaderText="Asset" Width="150" HeaderTextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field="PurchaseDate" HeaderText="Purchase Date" Format="d" Width="90" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field="PurchaseCost" HeaderText="Cost" Format="N2" Width="120" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="ExpectedLife" HeaderText="Life (Years)" Width="80" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Center"></GridColumn>
<GridColumn Field="Jan" HeaderText="Jan" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Feb" HeaderText="Feb" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Mar" HeaderText="Mar" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Apr" HeaderText="Apr" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="May" HeaderText="May" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Jun" HeaderText="Jun" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Jul" HeaderText="Jul" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Aug" HeaderText="Aug" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Sep" HeaderText="Sep" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Oct" HeaderText="Oct" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Nov" HeaderText="Nov" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
<GridColumn Field="Dec" HeaderText="Dec" Format="N2" Width="auto" HeaderTextAlign="TextAlign.Center" TextAlign="TextAlign.Right"></GridColumn>
</GridColumns>
</SfGrid>
</div>
@if (!Records.Any())
{
<div class="alert alert-info mt-3">
No depreciation records found for the selected year.
</div>
}
@code {
private List<CompanyModel> company = new(); // Use List instead of IEnumerable
private List<YearModel> year = new(); // Use List instead of IEnumerable
private int SelectedCompanyId;
private int SelectedYearId;
private IEnumerable<DepreciationRecordModel> Records = Enumerable.Empty<DepreciationRecordModel>();
private string selectedCompanyValue = string.Empty;
private string selectedYearValue = string.Empty;
private int userIdResult = 0;
private string userNameResult = string.Empty;
private bool isInteropExecuted = false;
protected override async Task OnInitializedAsync()
{
// Load companies and preselect first item
company = (await CompanyService.CompanyList()).ToList();
if (company.Any())
{
selectedCompanyValue = company.First().CompanyID.ToString();
}
// Load years and preselect first item
year = (await YearService.GetYears()).ToList();
if (year.Any())
{
selectedYearValue = year.First().YearID.ToString();
}
// Load initial grid data if selections exist
Records = await DepreciationService.GetDepreciationData(SelectedCompanyId, DateTime.Today.Year);
}
public Task OnChange(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, CompanyModel> args)
{
this.SelectedCompanyId = args.ItemData.CompanyID;
selectedCompanyValue = args.Value;
return Task.CompletedTask;
}
public Task OnChangeYear(Syncfusion.Blazor.DropDowns.ChangeEventArgs<string, YearModel> args)
{
this.SelectedYearId = args.ItemData.YearID;
selectedYearValue = args.Value;
return Task.CompletedTask;
}
public async Task LoadData()
{
Records = await DepreciationService.GetDepreciationData(SelectedCompanyId, SelectedYearId);
}
}
My CompanyList Service:
public async Task<IEnumerable<CompanyModel>> CompanyList()
{
IEnumerable<CompanyModel> companies;
using var conn = new SqlConnection(_configuration.Value);
companies = await conn.QueryAsync<CompanyModel>("spCompany_List", commandType: CommandType.StoredProcedure);
return companies;
}
My Year Service:
public async Task<IEnumerable<YearModel>> GetYears()
{
IEnumerable<YearModel> years;
using var conn = new SqlConnection(_configuration.Value);
years = await conn.QueryAsync<YearModel>("spCombobox_DepreciationDate", commandType: CommandType.StoredProcedure);
return years;
}
My Storedprocedures:
Hi Oliver,
Thank you for sharing the code snippet.
We have validated the reported issue based on the provided code and created a sample for verification. However, we were unable to reproduce the issue — we did not observe any duplicate data in our testing.
Additionally, we also attempted to modify the code by converting values to int, but even with those changes, the issue did not occur at our end.
For your reference, we have attached the sample we used during our validation. We kindly request you to review it and let us know if there are any specific steps or conditions we might have missed that could help us replicate the issue on our side. And can you please modify the shared sample to replicate the reported issue at our end.
Regards,
Yohapuja S