SfListBox OnChange Event - Not firing correctly

[David Krasicki]

I created a simple page with a Dual List Box as found in the following example:  https://blazor.syncfusion.com/documentation/listbox/dual-listbox/

The issue I'm seeing is the ValueChanged event fires when items are selected in the List Box, not when the list of Values changes.  For example, when I move an item from the left List Box over to the right List Box, I expect the ValueChanged event to fire.  Instead, it only fires if I click on (select) one of the items in the List Box.

Am I using the wrong event?  Which event triggers when the underlying DataSource changes?  Is there a way to override the functionality of the move events found in the Dual List Box tool bar?

[Madhan Venkateshan]

Hi David Krasicki, 

 

Good day to you. 

 

You can use ‘OnActionComplete’ event and it will be triggered when you move an item, please refer the below code snippets. 

 

<div id="listbox1"> 

    <h4>Group A</h4> 

    <SfListBox TValue="string[]" DataSource="@GroupA" Scope="#listbox" TItem="CountryCode"> 

        <ListBoxEvents TValue="string[]" OnActionComplete="OnActionComplete"></ListBoxEvents> 

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

        <ListBoxToolbarSettings Items="@Items"></ListBoxToolbarSettings> 

    </SfListBox> 

</div> 

<div id="listbox2"> 

    <h4>Group B</h4> 

    <SfListBox TValue="string[]" ID="listbox" DataSource="@GroupB" TItem="CountryCode"> 

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

    </SfListBox> 

</div> 

 

@code { 

    public string[] Items = new string[] { "moveUp", "moveDown", "moveTo", "moveFrom", "moveAllTo", "moveAllFrom" }; 

    public List<CountryCode> GroupA = new List<CountryCode> 

  { 

        new CountryCode{ Name = "Australia", Code = "AU" }, 

        new CountryCode{ Name = "Bermuda", Code = "BM" }, 

        …. 

    }; 

 

    public List<CountryCode> GroupB = new List<CountryCode> 

  { 

        new CountryCode{ Name = "India", Code = "IN" }, 

        new CountryCode{ Name = "Italy", Code = "IT" }, 

        …. 

    }; 

 

    public class CountryCode 

    { 

        public string Name { get; set; } 

        public string Code { get; set; } 

    } 

 

    public void OnActionComplete(Syncfusion.Blazor.DropDowns.ActionCompleteEventArgs args) 

    { 

        if(args.EventName == "moveTo" || args.EventName == "moveUp") 

        { 

            // perform your operation 

        } 

    } 

} 

 

Regards, 

Madhan V 

[Jay Goodison]

Does OnActionComplete work when you use a template

[Saranya Dhayalan]

Hi David,  

We have checked your reported query, In our current behavior OnActionComplete event is not  triggered when you move an item. We have confirmed that the issue is defect and logged a defect report for the same. The fix for this issue is estimated to be available in our upcoming patch release and appreciate your patience until then. 

 

Regards, 

Saranya D 

[Alex]

I dont beleive this was fixed, ValueChanged is still not fired when item is moved from left to right.

[Keerthikaran Venkatachalam]

Hi Alex,

We have reviewed your query, and the ListBox ValueChange event is being triggered correctly when selecting values in the ListBox. For your reference, we’ve included a sample project along with a video demonstration.

If the issue persists, please provide us with a full page code snippet that includes the Syncfusion ListBox, including any steps and a video demonstration. Additionally, let us know which package version you're using in your project. This will help us deliver a more tailored solution promptly.

If you're using an older package version, we recommend updating to the latest Syncfusion package (v27.1.56) and testing again on your side.

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

Regards,

KeerthiKaran K V

Attachment: Sample_9cbf7433.zip