How I select row after add ew record to Listbox ?

[Tomasz S.]

Example

https://blazorplayground.syncfusion.com/embed/LNLztosQJnAyPSkT?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

After add new record, I can't select it.

[Keerthikaran Venkatachalam]

Hi Tomasz,

We have checked your sample and found that you need to add TValue as string[] or List<TItem> to the listbox. After changing the datasource component, it needs to be re-rendered. Therefore, you should use a time delay to use the SelectItemsAsync method for selecting items. To resolve this, we have two solutions. Please refer to the code snippet and sample below.

1.

<SfListBox TValue="string[]" TItem="VehicleData" DataSource="@Vehicles" @ref="listbox">

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

</SfListBox>

<SfButton CssClass="e-btn" Content="Modify Data" @onclick="modifyData"></SfButton>

@code {

    private SfListBox<string[], VehicleData> listbox;

    private async Task modifyData()

    {

        var item = new VehicleData() { Text = "Ferrari LaFerrari", Id = "Vehicle-09" };

        Vehicles.Add(item);

        string[] selectValue = new string[] { "Vehicle-09" };

        await Task.Yield();

        await listbox.SelectItemsAsync(selectValue);

    }

}

2.

<SfListBox TValue="List<VehicleData>" TItem="VehicleData" DataSource="@Vehicles" @ref="listbox">

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

</SfListBox>

<SfButton CssClass="e-btn" Content="Modify Data" @onclick="modifyData"></SfButton>

@code {

    private SfListBox<List<VehicleData>, VehicleData> listbox;

    private async Task modifyData()

    {

        var item = new VehicleData() { Text = "Ferrari LaFerrari", Id = "Vehicle-09" };

        Vehicles.Add(item);

        string[] selectValue = new string[] { "Vehicle-09" };

        await Task.Yield();

        await listbox.SelectItemsAsync(item);

    }

}

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

Attachment: Index_73b28f84.zip

[Tomasz S.]

And for this example how:

https://blazorplayground.syncfusion.com/embed/LtVJjeVMyOICzVHZ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

?

[Keerthikaran Venkatachalam]

Hi Tomasz,

We have reviewed the reported query and, upon clicking the button, we loaded the data source to the listbox component and selected the listbox item using the SelectItemsAsync method. Please refer to the code snippet and sample below.

private async Task modifyData()

    {

        var item = new VehicleData() { Text = "Ferrari LaFerrari", Id = "Vehicle-09" };

        Vehicles = VehicleData.getListData();

        Vehicles.Add(item);

        await Task.Yield();

        await listbox.SelectItemsAsync(item);

    }

Sample link: https://blazorplayground.syncfusion.com/BjVpjoLBBCIlNxaM

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V

[Tomasz S.]

Ok.

And the last not working example:

https://blazorplayground.syncfusion.com/embed/BNrpNoVBhBLLfSli?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

[Keerthikaran Venkatachalam]

Hi Tomasz,

We have checked your sample and noticed that you are assigning a datasource to the listbox using a property. However, it takes time to re-render the component, and during that time, you are calling the SelectItemsAsync method, which is why it is not working. To resolve this issue, you can either use a time delay or use another button to call the SelectItemsAsync method. Please refer to the sample below.

Sample link: https://blazorplayground.syncfusion.com/rDhfNoLVospgVxRN

Please let us know if you need any further assistance on this.

Regards,

KeerthiKaran K V