Dynamically update listbox items in response to data source change.

[Tom]

What is the recommended way to have a listbox dynamically update its contents in reaction to data source changes?

<EjsListBox @ref="e_listBox" DataSource="@Model.WorkspaceBriefs"  TValue="int[]" Value="SelectedValue">

<ListBoxEvents TValue="int[]" ValueChange="SelectionChanged" />

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

</EjsListBox>

In the example above Model.WorkspaceBriefs is a [Parameter]ized property with associated EventChanged<>. When the data source changes in the background I was expecting the listbox to update automatically but it does not. Is there a way to make this happen?

Thanks,

Tom

[Saranya Dhayalan]

Hi Tom, 

 

Thank you for contacting Syncfusion support 

 

Query : What is the recommended way to have a listbox dynamically update its contents in reaction to data source changes? 

 

We have checked your reported query, we suggest you to use Observable collection to the datasource property to update the listbox dynamically during datasource changes. In the button click event we have added the items in listbox datasource. Please find the below code snippet: 

 

@using Syncfusion.EJ2.Blazor.DropDowns 

@using System.Collections.ObjectModel 

@using Syncfusion.EJ2.Blazor.Buttons 

 

    <EjsListBox TValue="string[]" DataSource="@Vehicles" ModelType="@typeof(VehicleData)" @ref="ListBoxObj"> 

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

    </EjsListBox> 

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

    

 

    @code { 

        EjsListBox<string[]> ListBoxObj; 

 

        public ObservableCollection<VehicleData> Vehicles { get; set; } 

 

        public class VehicleData 

        { 

            public string Text { get; set; } 

            public string Id { get; set; } 

 

            public static ObservableCollection<VehicleData> getListData() 

            { 

                ObservableCollection<VehicleData> data = new ObservableCollection<VehicleData>(); 

 

                data.Add(new VehicleData() { Text = "Hennessey Venom", Id = "Vehicle-01" }); 

                data.Add(new VehicleData() { Text = "Bugatti Chiron", Id = "Vehicle-02" }); 

                data.Add(new VehicleData() { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" }); 

                data.Add(new VehicleData() { Text = "SSC Ultimate Aero", Id = "Vehicle-04" }); 

                data.Add(new VehicleData() { Text = "Koenigsegg CCR", Id = "Vehicle-05" }); 

                data.Add(new VehicleData() { Text = "McLaren F1", Id = "Vehicle-06" }); 

                data.Add(new VehicleData() { Text = "Aston Martin One- 77", Id = "Vehicle-07" }); 

                data.Add(new VehicleData() { Text = "Jaguar XJ220", Id = "Vehicle-08" }); 

                return data; 

            } 

 

        } 

 

        protected override void OnInitialized() 

        { 

            Vehicles = VehicleData.getListData(); 

        } 

 

        private void modifyData() 

        { 

             Vehicles.Add(new VehicleData() { Text = "Ferrari LaFerrari", Id = "Vehicle-09" }); 

        } 

 

    } 

 

 

For your convenience we have prepared a sample. Please find the sample link 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/152422/ze/Listbox622294071 

 

Could you please check the above sample and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D