Handle click on ListBox element

[Alex]

Hello!

I'm trying to implement logic that would allow some action execution (loading page section using AJAX) based on click on the ListBox item.

My ListBox looks like this:

<div class="control-section">

    <div id="listbox-selection">

        <h4>Active scenarios:</h4>

        <ejs-listbox id="scenario-listbox" dataSource="@Model.ScenarioList" actionComplete="onComplete" >

        </ejs-listbox>

    </div>
</div>

So it loads elements from data source. ScenarioList looks like

ScenarioList = new List<object>();
ScenarioList.Add(new { text = "Email", id = "email" });

So if one list item should have id == "email". So if I would do:

@section Scripts {

    <script>

        function onComplete() {

            alert('1');

        }

        document.getElementById('email').addEventListener('click', () => {

            alert('2');

        });

    </script>

}

Listener won't be added and '2' will not be displayed on 'email' element click. As far as I understand, this is because items are generated on-fly. And if I move ' document.getElementById...' to onComplete - it won't work as way.

I have not found instructions about handling item click in the documentation. Could someone, please, advise, what is the proper way of handling a left button click on a particular list element?

Thanks in advance!

[Janakiraman Sakthivel]

Hi Alex, 

 

Thank you for contacting Syncfusion support. 

  

We have checked your reported requirement. We can achieve your requirement using change event as like as below. 

 

 

  <ejs-listbox id="listbox" dataSource="@ViewBag.DefaultData" change="change"></ejs-listbox> 

 

  <script> 

    function change(args) { 

                if (args.items[0].id == 'email') { 

                                alert('email'); 

                } 

     } 

  </script> 

 

The change event is triggered while selecting/unselecting the list item. For your convenience, we have prepared the sample based on our suggestion. Please find the link below. 

 

Sample Link: https://www.syncfusion.com/downloads/support/forum/167868/ze/core-sample2036588144-126618808 

 

API Link: https://ej2.syncfusion.com/documentation/api/list-box/#change 

  

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

 

Regards,   

Janakiraman S. 

[Alex]

Thanks a lot!

Works great!

[Gayathri KarunaiAnandam]

Hi Alex, 

Thanks for the update. 

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

Regards, 

Gayathri K