Multiselect in Drodown

Hi, 
Is there any option to display a checkbox at the left side of the dropdownlist item ?
I'd like to have the option of selecting more than 1 option and then take them for further actions.

Many thanks!

8 Replies 1 reply marked as answer

CA Carlos Alarcon September 8, 2020 02:02 PM UTC

I was able to do it using a template:
But I have two problems:
1) Once I click DDL is collapsed again so every time I need to click again
2) How can I get the list of selected items ? My datasource fields are: id and description.

Thanks!

This is my Code:

<ejs-dropdownlist id="tienda" ref="tienda" placeholder="Tienda" :itemTemplate="tiendaTemplate" :dataSource="tiendaSource" :fields="fields">
</ejs-dropdownlist>


//function to display template
tiendaTemplate: function () {
return {
template: Vue.component('itemTemplate', {
template: `<span><span><input type="checkbox" id="{data.id}"></input></span><span>&nbsp;</span><span>{{data.description}}</span></span>`,
data() {
return {
data: {}
};
}
})
};
},


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 8, 2020 04:16 PM UTC

Hi Carlos, 

Greetings from Syncfusion support. 

We have checked your requirement. Since you specified that you are in need of selecting one or more items, we suggest you to use Multiselect control with checkbox mode which allows you to select more than one value. Please find the demo link below,

Demo Link         : https://ej2.syncfusion.com/vue/demos/#/material/multi-select/checkbox.html 


Screenshot        : 

 


Please let us know if you need any further assistance on this. 

Regards, 
Jeyanth. 



CA Carlos Alarcon September 9, 2020 03:41 AM UTC

Ok, thanks! I'll do it. 

Btw I'm not getting alert emails once you update the case. Any idea why? 

Thanks a lot.


JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 10, 2020 01:27 PM UTC

Hi Carlos, 

Thanks for your update.

 
We have checked our logs and found that the emails sent to you were delivered properly. It may have been blocked at your end due to any of the following reasons.   
  • Network related issues
  • Spam filters sometimes may wrongly block legit emails.
  • User email server may be overloaded at that time.

Please check your spam folder once and let us know if the issue is resolved. 

Regards, 
Jeyanth. 



CA Carlos Alarcon September 15, 2020 12:23 AM UTC

OK, thanks it works.

But now I see its better for me to use DropDownTree control, however I got this message ( I follow this example: https://ej2.syncfusion.com/vue/demos/#/material/drop-down-tree/checkbox.html)

"export 'DropDownTreePlugin' was not found in '@syncfusion/ej2-vue-dropdowns"



in package.json
"@syncfusion/ej2-vue-dropdowns": "^17.2.49",


Thanks!


MK Muthukrishnan Kandasamy Syncfusion Team September 15, 2020 11:46 AM UTC


Hi Carlos, 
 
Thanks for the update. 
 
We have validated your reported problem in Syncfusion Vue DropDownTree component. You have mentioned that you are using @syncfusion/ej2-vue-dropdowns packages with version 17.2.49 but, we rolled out the DropDownTree component from the release version 18.1.42. So to resolve your reported problem, you need to update to the latest version of @syncfusion/ej2-vue-dropdowns package. 
 
We have prepared sample for your convenience, please refer to the below link for the sample. 
 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Muthukrishnan K 


Marked as answer

CA Carlos Alarcon September 16, 2020 02:59 AM UTC

Ok, got it.

<ejs-multiselect
id="tienda"
ref="tienda"
placeholder="Tiendas"
:dataSource="tiendaSource"
:fields="fields"
mode="CheckBox"
popupHeight="300"
showDropDownIcon="true"
showSelectAll="false"
enableSelectionOrder="false"
filterBarPlaceholder="Tiendas"
:enabled="enabledTiendas"
></ejs-multiselect>

Having the previous code Select All option is still displayed. Why ?

Thanks a lot !



JM Jeyanth Muthu Pratheeban Sankara Subramanian Syncfusion Team September 16, 2020 12:22 PM UTC

Hi Carlos, 

Thanks for your update. 

We would like to know you that showSelectAll is false by default. Therefore, if you don’t want the functionality of select all option then we suggest you to remove the showSelectAll property. Alternatively, you can bind a boolean variable to showSelectAll property.

Please let us know if you need any further assistance on this. 

Regards, 
Jeyanth. 


Loader.
Up arrow icon