Search results

Chip Customization in Vue MultiSelect component

14 Apr 2021 / 2 minutes to read

The MultiSelect allows the user to customize the selected chip element through the tagging event. In that event, you can set the custom classes to chip element via that event argument of setClass method.

The following sample demonstrates chip-customization with the MultiSelect component.

Source
Preview
app.vue
Copied to clipboard
<template>
  <div id="app">
    <div id='container' style="margin:50px auto 0; width:250px;">
        <br>
        <ejs-multiselect id='multiselect' :value='colorValues' :tagging='tagging' :dataSource='colorsData' mode="Box" placeholder="Favorite Colors" :fields='fields'></ejs-multiselect>
    </div>
  </div>
</template>
<script>
import Vue from 'vue';
import { MultiSelectPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { MultiSelect, TaggingEventArgs } from '@syncfusion/ej2-dropdowns';

Vue.use(MultiSelectPlugin);
export default {
  data (){
    return {
      colorsData: [
        { Color: 'Chocolate', Code: '#75523C' },
        { Color: 'CadetBlue', Code: '#3B8289' },
        { Color: 'DarkOrange', Code: '#FF843D' },
        { Color: 'DarkRed', Code: '#CA3832' },
        { Color: 'Fuchsia', Code: '#D44FA3' },
        { Color: 'HotPink', Code: '#F23F82' },
        { Color: 'Indigo', Code: '#2F5D81' },
        { Color: 'LimeGreen', Code: '#4CD242' },
        { Color: 'OrangeRed', Code: '#FE2A00' },
        { Color: 'Tomato', Code: '#FF745C' }
      ],
      colorValues : ['#75523C', '#4CD242', '#FF745C'],
      fields : { text: 'Color', value: 'Code' }
    }
  },
  methods: {
        tagging: function(e) {
           var msObject = document.getElementById("multiselect").ej2_instances[0];
          e.setClass(e.itemData[msObject.fields.text].toLowerCase());
        }
    }
}

</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-buttons/styles/material.css";
    .e-multi-select-wrapper .e-chips {
        opacity: 0.9;
    }

    .e-multi-select-wrapper .e-chips:hover {
        opacity: 1;
    }

    .e-multi-select-wrapper .e-chips .e-chips-close.e-icon::before,
    .e-multi-select-wrapper .e-chips .e-chipcontent,
    .e-multi-select-wrapper .e-chips .e-chipcontent:hover {
        color: #ffffff;
    }

    .e-chips.chocolate,
    .e-chips.chocolate:hover {
        background-color: #75523C;
    }

    .e-chips.darkorange,
    .e-chips.darkorange:hover {
        background-color: #FF843D;
    }

    .e-chips.darkred,
    .e-chips.darkred:hover {
        background-color: #CA3832;
    }

    .e-chips.fuchsia,
    .e-chips.fuchsia:hover {
        background-color: #D44FA3;
    }

    .e-chips.cadetblue,
    .e-chips.cadetblue:hover {
        background-color: #3B8289;
    }

    .e-chips.hotpink,
    .e-chips.hotpink:hover {
        background-color: #F23F82;
    }

    .e-chips.indigo,
    .e-chips.indigo:hover {
        background-color: #2F5D81;
    }

    .e-chips.limegreen,
    .e-chips.limegreen:hover {
        background-color: #4CD242;
    }

    .e-chips.orangered,
    .e-chips.orangered:hover {
        background-color: #FE2A00;
    }

    .e-chips.tomato,
    .e-chips.tomato:hover {
        background-color: #FF745C;
    }
</style>