Can we keep a button to draw out the Multiselect list

Hello, Vinod,

In order to provide an answer that will be more to the point please share the following information:

1) Is the currently selected items has to be shown as well as the button?

2) If the items will be shown, where the button has to be placed, after the last item or any different place?

3) Is this button has to only open and close the list or it will have other functions as well?

Please have in mind that even if this is possible, it will require a custom code to achieve it.

Regards,
Stefan
Progress Telerik

Hi Stephan, 

I have created an example in the link below : 

https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-gtdba4?embed=1&file=app/multiselect.js

The requirement is as follows : 

I want to directly open Multiselect list without having to click inside the text area. 

I don't want to show this text area itself to see the items, basically when I click on the Show button, my list should appear without this 'item selected' text box. 

The button will be there only to open and close the list. 

In the example above, I have to make two clicks to see the list. One on the button and two on the textbox. I want to remove redundant step and remove the textbox altogether. 

 

We are only using Functional components. 

Hello, Vinod,

Thank you for the example and the details.

Currently, this is possible only at some extend. We can use the opened prop of the MultiSelect to open and close it using the button. Then we can hide the input with CSS. Still, this will leave a visual issue as the list will be positioned under the button with an empty space. This is because the list container is positioned based on the input position. 

This is how it looks:

https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-gtdba4?embed=1&file=app/multiselect.js

I will check with the team, if we can extend the popupSettings of the MultiSelect to pass an anchor as well. This anchor can be the button:

https://www.telerik.com/kendo-react-ui/components/dropdowns/api/MultiSelectProps/#toc-popupsettings

Regards,
Stefan
Progress Telerik

Hello, Vinod,

Apologies, this is the updated example, the first one was not saved correctly:

https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-jeeycx?file=app%2Fmain.jsx

Regards,
Stefan
Progress Telerik

Thanks Stefan for prompt revert,

Yes, this helps. We would like to get rid of that extra space that we are seeing now. Please let me know how we can get rid of this after your internal deliberation. 

Regards,

Vinod 

Hello, Vinod,

We are able to remove the extra space using the CSS rules to position it correctly.

The only thing that will be missing is focusing the items when navigating via the keyboard as this depends on the input that we had to removed.

Please check the new version:

https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-warccg?file=app/main.jsx

Regards,
Stefan
Progress Telerik

Thank you very much Stefan for prompt responses. This definitely helps me achieve what I had wanted. 

 

Regards,

Vinod

Stefan,

The example you have provided in the link above always focuses on the last item in the list when loads i.e. scrolls all the way down to the last item. Could we not show the list showing from the first item instead of the last ?

 

Regards,

Vinod

Hello, Vinod,

This occurs because by default to focused item represent the end of the selected range, which is this case are all items.

To show it from the first item, use the ref of the MultiSelect and set its focusedIndex to -1:

https://stackblitz.com/edit/kendo-react-multiselect-checkboxes-warccg?file=app/main.jsx



Regards,
Stefan
Progress Telerik