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

[Dhaval Budhelia]

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]

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]

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]

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