Listbox Toolbar actions not exposed directly

[E]

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]

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, 

https://stackblitz.com/edit/nb9fbp-buvjw5?file=index.ts 

 

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]

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]

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, 

 

https://stackblitz.com/edit/nb9fbp-buvjw5?file=index.ts 

 

We have considered to add these details in our documentation. Please let us know if you have any concern. 

 

Regards, 

Vinoth Kumar S