Multiselect with checkbox and with 'All' node and all items selected by default.

Hello, Vinod,

Thank you for the example.

To achieve the desired functionalities, I can suggest the following:

1) Add Select All as first value, and depending on if it is selected, set the new value of the component.

2) To set all items as selected initially, pass the entire collection as value.

I modified the provided example to showcase this:

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

Regards,
Stefan
Progress Telerik

Hi Stefan,

From the example provided by you, I get the gist that whatever you set the Value to becomes your default selected items when the Multiselect loads for the first time. 

My followup question is how do I make some values selected when the component loads if my object is complex one that is it consists of Key value pair. 

[{key: 1, country: 'Select All'},{key: 2, country: 'India'},{key: 3, country: 'US'},{key: 4, country: 'UK'},{key: 5, country: 'Australia'}]

I am using KeyValue Pair and load Values based on the Selected Keys. 

Could I please get an example having all the values above selected by default. 

Hello, Vinod,

To select values initially, set them to the state variable that is bound to the value property.

Also, the MultiSelect can work with complex objects out of the box.

I modified the example to work with complex objects and to have values selected by default:

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

Regards,
Stefan
Progress Telerik

Also, extending the question in the thread : 

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

1) In the example provided by you in the above link, If some of the items are deselected and then the CheckBox on the 'Select All' selected, nothing happens. Note - clicking the 'Select All' row works but not on the corresponding Checkbox. 

2) If I 'Select All' and then deselect some items, then I select them back, the 'Select All' option is not selected automatically. 


Could you please address these two questions . 

Hello, Vinod,

I can assume that both issue occurs because once the checkbox is clicked instead of the row, the event.nativeEventTarget is different and this check fails:


I can suggest extending the check to include the case with the checkbox:

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

Please have in mind that this is a custom code, that has to be modified for the real case. Please ensure to inspect it and test if before using it in a real application.

Regards,
Stefan
Progress Telerik