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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

144821 May 24,2019 07:10 AM UTC May 31,2019 06:07 AM UTC Vue 3
loading
Tags: MultiselectDropDown
Dhaval Budhelia
Asked On May 24, 2019 07:20 AM UTC

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>

Vinoth Kumar Sundara Moorthy [Syncfusion]
Replied On 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



Dhaval Budhelia
Replied On 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


Prince Oliver [Syncfusion]
Replied On 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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon