Listbox Toolbar actions not exposed directly

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

Reply | Reply with quote

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,

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

Reply | Reply with quote

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/

Reply | Reply with quote

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,

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US