Dynamically added first item displayed twice

[Chris Marshall]

We have run into an issue with the latest version of the SfListBox control, for some reason when the first item is added dynamically it is shown twice, only the first of these is actually selectable in the list.  Any other items added afterwards are fine.

Here is the definition of the control

<SfListBox DataSource="@CurrentTimeModel.ScheduleRunTimes" TItem="ScheduleRunTimeModel" TValue="ScheduleRunTimeModel" @ref="scheduleRunTimesListBoxRef" Height="100px">

    <ListBoxSelectionSettings ShowCheckbox="false" ShowSelectAll="false"></ListBoxSelectionSettings>
    <ListBoxFieldSettings Text="EntryText" Value="EntryID"></ListBoxFieldSettings>
</SfListBox>

Here is the code we are using to add elements dynamically

    private async Task OnAddScheduledTime(Object e)

    {
        if (!AddTimeValue.HasValue)
            return;


        ScheduleRunTimeModel newTime = new ScheduleRunTimeModel { Entry = AddTimeValue.Value };


        if (CurrentTimeModel.ScheduleRunTimes.FirstOrDefault(x => x.Entry == newTime.Entry) == null)
        {
            CurrentTimeModel.ScheduleRunTimes.Add(newTime);


            await scheduleRunTimesListBoxRef.AddItemsAsync(new[] { newTime });
        }
        else
        {
            alertDialog.Show("Add Time", $"{newTime.EntryText} has already been added!", "OK");
        }


        StateHasChanged();
    }

Any thoughts on why the entry is added twice?

[Chris Marshall]

Image of the listbox, clicking either of the two entries for 05:00 AM will cause the first one to be highlighted only.

[Gayathri KarunaiAnandam]

Hi Chris,

We have validated your code snippet. In that, we found that when Button click you are adding an item using DataSource property and also by using AddItemsAsync method. Hence, it renders two items. We can resolve this issue, by only using the AddItemsAsync method to add the Items. You can get the updated dataSource by using the GetDataList method. Please check the below code snippet.

Code:

<SfListBox DataSource="ScheduleRunTimes" TValue="string[]" TItem="ListItem" @ref="scheduleRunTimesListBoxRef" Height="100px">

            <ListBoxFieldSettings Text="Text" Value="Id"></ListBoxFieldSettings>

             <ListBoxSelectionSettings ShowCheckbox="false" ShowSelectAll="false"></ListBoxSelectionSettings>

        </SfListBox>

        <SfButton OnClick="OnAddScheduledTime">AddItem</SfButton>

@code

{

private async Task OnAddScheduledTime(Object e)

 

    {

       ListItem newTime = new ListItem { Text = "5.00 PM"};

      

         await scheduleRunTimesListBoxRef.AddItemsAsync(new[] { newTime });

         itemCount = scheduleRunTimesListBoxRef.GetDataList().Count();

     

    }

}

For your reference, please find the attachment.

Please get back to us, if you need further assistance.

Regards,

Gayathri K

Attachment: Listbox_AddItems_899093ab.zip

[Chris Marshall]

Thank you for the feedback, we have updated the code and it is working correctly now.

[Gayathri KarunaiAnandam]

Hi Chris, 

    

We are happy to hear that your issue has been resolved. Please feel free to contact us if you need any further assistance on this. 

Regards, 

Gayathri K 

[Jeff Voigt]

Chris,

I just ran into this issue myself and I just swapped the lines to where you add it using the list box method and THEN add it to your own copy of the data source.  Hope that helps.