1. Home
  2. Forum
  3. Blazor
  4. Items changed event in ListBox

Items changed event in ListBox

Hello, I'd like to ask a question:

Does ListBox has an "ItemsChanged"-like event that will be fired when its items change?
I checked the ValueChange event, it is fired when selected item is changed, that's not what I want.

Thanks,
Xi.

3 Replies 1 reply marked as answer
AS Aravinthan Seetharaman Syncfusion Team January 7, 2021 04:32 PM UTC

Hi Xi, 
 
Thanks for contacting Syncfusion Support. 
 
We have checked your reported query, and we can use OnActionComplete event which will be triggered while the DataSource property value changed. 
 
 
<SfListBox TValue="string[]" DataSource="@Data" TItem="VehicleData"> 
    <ListBoxFieldSettings Text="Text" Value="Id" /> 
    <ListBoxEvents TValue="string[]" TItem="VehicleData" OnActionComplete="updateItems"> </ListBoxEvents> 
</SfListBox> 

public void updateItems(ActionCompleteEventArgs<VehicleData> args) 
    { 
        // You can customize your code here. 
    } 
 
 
 
Could you please check, whether the above details are fulfil your requirement, and get back to us, if you need assistance on this. 
 
 
Regards, 
Aravinthan S 


X X January 7, 2021 07:00 PM UTC

Hello Aravinthan,

Thanks for your reply. 
However, I want to clarify that I need an event that will be fired when the items that the ListBox contains change instead of when the DataSource property value changes, so that I can update the value of DataSource.

Looking forward to your reply.

Xi

AS Aravinthan Seetharaman Syncfusion Team January 8, 2021 04:37 PM UTC

Hi Xi, 

We have checked your reported query and we have three cases to update ListBox items. 

Case 1: We can update items using tool bar in dual List Box. 
In this case, ActionCompleteEvent will trigger when updating the Items from one Listbox to another ListBox. 

<SfListBox @ref="listbox1" Scope="@scope1" DataSource="@GroupA"  
                           TItem="ListData" Height="330px" TValue="string[]"> 
    <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
    <ListBoxToolbarSettings Items="@Items"></ListBoxToolbarSettings> 
    <ListBoxEvents TValue="string[]" TItem="ListData"  
                        OnActionComplete="ActionComplete"></ListBoxEvents> 
</SfListBox> 
             
 
<SfListBox @ref="listbox2" Scope="@scope2" DataSource="@GroupB"  
                           Height="330px" TItem="ListData" TValue="string[]"> 
       <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
</SfListBox> 
 
@code 
{ 
    public void ActionComplete(ActionCompleteEventArgs<ListData> args) 
    { 
        // You can customize your code here. 
    } 
} 

Case 2: We can update items using drag and drop. 
In this case  DragStrat and OnDrop evets will trigger while the Item is drag and dropped into another listBox. 
 
<SfListBox @ref="listbox1" DataSource="@GroupA" Scope="@listbox2"  
                       TItem="ListData" AllowDragAndDrop="true" Height="330px"   TValue="string[]"> 
                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
                <ListBoxEvents TValue="string[]" TItem="ListData"  
                       OnDrop="Drop" DragStart="Drag"></ListBoxEvents> 
            </SfListBox> 
 
            <SfListBox @ref="listbox2" DataSource="@GroupB" Scope="@listbox1"  
                       TItem="ListData" AllowDragAndDrop="true" Height="330px" TValue="string[]"> 
                <ListBoxFieldSettings Text="Name" Value="Code"></ListBoxFieldSettings> 
            </SfListBox> 
 
@code{ 
     public void Drop(DropEventArgs<ListData> args) 
    { 
        // Your code 
    } 
    public void Drag(DragEventArgs<ListData> args) 
    { 
        // Your code 
    } 
} 

Case 3: We can add and remove Items from List Box using additem() and RemoveItem() method. 
In this case we don’t have events, because we can perform our action after calling addItem/RemoveItem method. 
 
<SfListBox TValue="string[]" TItem="VehicleData"  
     DataSource="@Vehicles" @ref="ListBoxObj"> 
    <ListBoxFieldSettings Text="Text" Value="Id" /> 
</SfListBox> 
<SfButton @onclick="addData">ADD ITEMS</SfButton> 
 
@code { 
    SfListBox<string[], VehicleData> ListBoxObj; 
    public List<VehicleData> Vehicles = new List<VehicleData> { 
        new VehicleData { Text = "Hennessey Venom", Id = "Vehicle-01" }, 
        new VehicleData { Text = "Bugatti Chiron", Id = "Vehicle-02" }, 
        new VehicleData { Text = "Bugatti Veyron Super Sport", Id = "Vehicle-03" }, 
        new VehicleData { Text = "SSC Ultimate Aero", Id = "Vehicle-04" }, 
        new VehicleData { Text = "Koenigsegg CCR", Id = "Vehicle-05" }, 
    }; 
 
    public class VehicleData 
    { 
        public string Text { get; set; } 
        public string Id { get; set; } 
    } 
 
    public List<VehicleData> Item = new List<VehicleData>{ 
        new VehicleData{ Text = "Ferrari LaFerrari", Id = "Vehicle-06"}, 
        new VehicleData{ Text = "McLaren P1", Id = "Vehicle-7"} 
      }; 
 
    private async Task addData() 
    { 
        await ListBoxObj.AddItem(Item); 
 
        // Your code 
    } 
} 
 

If we misunderstood your requirement, please share more details. So that we can work on this and provide you a better solution quickly. 

Regards, 
Aravinthan S 


Marked as answer
Loader.
Up arrow icon