Duplicate item on dropdownlist anomaly when using preselected item.

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



Attachment: projectcode_ca6d46d9.zip

3 Replies

YS Yohapuja Selvakumaran Syncfusion Team April 9, 2025 05:40 AM UTC

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:

  1. A runnable sample from your end where the issue can be observed.
  2. A video recording or screenshot that demonstrates the duplicate data issue, if possible.
  3. The Syncfusion package version you are currently using in your project.


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


Attachment: Dropdown_Duplicate_65904414.zip


OT oliver tejada April 12, 2025 03:37 AM UTC

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:

company.jpg

year.jpg


Attachment: 20250412_112328_b3bfce3e.zip


MS Malini Selvarasu Syncfusion Team April 17, 2025 04:35 AM UTC

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


Attachment: Dropdown_duplicate_Data_99fb32ea.zip

Loader.
Up arrow icon