We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Listbox Toolbar actions not exposed directly

Thread ID:

Created:

Updated:

Platform:

Replies:

147770 Sep 23,2019 03:21 PM UTC Sep 25,2019 02:15 PM UTC JavaScript - EJ 2 3
loading
Tags: ListBox
E
Asked On September 23, 2019 03:21 PM UTC

Hi all,
Using EJ2 to create a Dual Listbox.  I can turn on the toolbar and it works fine.  

I want to use my own buttons though to trigger some of the toolbar functions.  I expected there would be a method to call the toolbar actions directly without needing to use the toolbar itself but that doesn't seem to be the case.

Along the same lines, I would've expected to see an empty() method or something similar to allow the Listbox to be easily cleared.

I can code the same functionality myself but before I do, wanted to check I'm not just missing something in the docs?

Thanks,
Ian

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On September 24, 2019 10:50 AM UTC

Hi Lan, 
 
Thank you for updating Syncfusion support. 
 
Query #1: I want to use my own buttons though to trigger some of the toolbar functions.  I expected there would be a method to call the toolbar actions directly without needing to use the toolbar itself but that doesn't seem to be the case. 
 
We have achieved your requirement in the created event. In this event we have hide the toolbar button. Please find he below code snippet, 
 
Code Snippet 
function onCreated(args): void { 
            let len = document.getElementsByClassName("e-listbox-tool")[0].childElementCount; 
            for (var i = 0; i < len; i++) { 
                (document.getElementsByClassName("e-listbox-tool")[0].children[i] as HTMLElement).style.display = "none"; 
            } 
            (document.getElementsByClassName("e-listbox-tool")[0] as HTMLElement).style.border = "none"; 
        } 
 
Query #2: Along the same lines, I would've expected to see an empty() method or something similar to allow the Listbox to be easily cleared. 
 
When u give the empty datasource listbox items easily cleared. Please find the below code snippet, 
 
refreshBtn.element.onclick = (): void => { 
            listObj1.dataSource = [] // clear the listbox1 items 
            listObj2.dataSource = []  // clear the listbox2 items 
            listObj1.dataBind(); 
            listObj2.dataBind(); 
        } 
 
For your convenience we have prepared a sample. Please check the sample in below link, 
 
Could you please check the above sample and get back to us if you need any further assistance on this? 
 
Regards, 
Vinoth Kumar S 


E
Replied On September 24, 2019 12:22 PM UTC

Thanks Vinoth.

While hiding the toolbar and triggering the clicks on the original buttons to get the same functions works, it seems a bit hacky for a professional control suite such as EJ2.  

I would've expected something more like a MoveTo method with a ListBox param, or a MoveUp method with an item/item-id param and so on.

Is there a reason why you're using the onCreated method to hide the toolbar - wouldn't you just do it all in CSS by adding a display:none or to the e-listbox-tool class?  

The listbox doesn't look to have what would probably be considered basic events/methods such as a RemoveItem method or an ItemClicked event.  I realise you can code these yourself but it's seems lacking they're not available directly.

It could be they are there just not documented?  The documentation seems to be missing some items.  

For example, I can see by using the controls in TypeScript that the ListBox has a noRecordsTemplate which works as the name susggests but this is not shown on the ListBox API reference https://ej2.syncfusion.com/documentation/api/list-box/


Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On September 25, 2019 02:15 PM UTC

Hi Lan. 
 
Good day to you. 
  
We would like to let you know that these internal methods are called by clicking its corresponding button. We have created the sample based on your requirement. Please find the modified sample link in below, 
 
 
We have considered to add these details in our documentation. Please let us know if you have any concern. 
 
Regards, 
Vinoth Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon