We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

How to set a conditional valueTemplate for a Multi Select with Checkbox Mode

Hey There,

I am using ejs-multiselect vue component with Checkbox mode and I have a specific condition when I would like to customise valueTemplate.

Can I please have an example of how to set a valueTemplate only when All the checkbox options are selected(either by clicking Select All checkbox or by manually ticking all options)

and also somehow I can't get :valueTemplate working.
as an end result I want to see "All Item Selected" text instead "Item 1, Item 2  +4 more.."

here is my example.

<template>
<div :class="cssStyle">
<ejs-multiselect :placeholder="placeholder"
:mode="mode"
:dataSource="dataSource"
:showSelectAll='showSelectAll'
:showDropDownIcon="true"
:enableSelectionOrder='true'
:selectAllText="selectAllText"
:unSelectAllText="unSelectAllText"
:allowFiltering="allowFiltering"
:filterBarPlaceholder="filterBarPlaceholder"
:valueTemplate="valueTemplate"
:fields="fields"
:closePopupOnSelect="false"
@selectedAll="selectedAll"
>ejs-multiselect>
div>
template>

<script>
import Vue from 'vue';
var valueVue = Vue.component("valueTemplate", {
template: `<span>{{data.ID}} - {{data.Name}}span>`,
data() {
return {
data: {}
};
}
});

export default {
props: {
id: {
type: String,
required: false,
default: 'multiselect'
},
placeholder: {
type: String,
required: false,
default: 'Select'
},
mode: {
type: String,
required: false,
default: 'CheckBox',
validator: function (value) {
return ['Box', 'Delimiter', 'CheckBox'].includes(value);
}
},
dataSource: {
type: Array,
required: false,
default: [],
},
showSelectAll: {
type: Boolean,
required: false,
default: true,
},
selectAllText: {
type: String,
required: false,
default: 'Select All'
},
unSelectAllText: {
type: String,
required: false,
default: 'Unselect All'
},
allowFiltering: {
type: Boolean,
required: false,
default: true
},
filterBarPlaceholder: {
type: String,
required: false,
default: 'Search ...'
},
fields: {
type: Object,
required: false,
default: function () {
return {text: null, value: null, iconCss: null, groupBy: null};
}
},
values: {
type: [Array, Boolean],
},
cssStyle: {
type: [Object, String]
}
},
data() {
return {
valueTemplate : function(e) {
return {
template: valueVue
}
},
}
}
}
script>

3 Replies

VK Vinoth Kumar Sundara Moorthy Syncfusion Team May 28, 2019 01:55 PM UTC

Hi Dhaval,

Good day to you.

We have checked your requirement and currently we have not provided valueTemplate support for checkbox mode. So, we would like to suggest you workaround by customizing the text when all the value is selected on close event as like in the below code example,

Code Example 
 
close: function(e){
    let mainLiLength:number=  this.popupWrapper.querySelectorAll('li.' + 'e-list-item').length;
    let liLength:number = this.popupWrapper.querySelectorAll('li.' + 'e-list-item.e-active').length;
    if(mainLiLength == liLength){
        this.viewWrapper.innerText = "All Item Selected";
    }
}
 

 
Sample Link: https://stackblitz.com/edit/hmvre1?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




DB Dhaval Budhelia May 30, 2019 11:50 PM UTC

Thanks Vinoth,

Thanks for your example. I end up implementing following solution.

select: function(e){
let selectedItemLength = this.popupWrapper.querySelectorAll('li.' + 'e-list-item.e-active').length;
if ((this.dataSource.length - 1) == selectedItemLength) {
setTimeout(() => {
this.viewWrapper.innerText = 'All Countries Selected';
}, 20);
}
},

It would be really great if EJ has supported valueTemplate for Checkbox mode.

Regards,
Dhaval



PO Prince Oliver Syncfusion Team May 31, 2019 06:07 AM UTC

Hello Dhaval, 

Good day to you. 

Based on our current component architecture, we could not implement the support for valueTemplate with Checkbox mode. We will check the feasibility and implement it in our future releases. 

Regards, 
Prince 


Loader.
Live Chat Icon For mobile
Up arrow icon