Group popup items with listview component in Vue Drop down button component

8 Aug 20232 minutes to read

Header in popup items is possible in DropdownButton by templating entire popup with ListView. Create ListView with id #listview and provide it as a target for DropDownButton.

Install Syncfusion List packages using below command.

npm install @syncfusion/ej2-vue-list --save

In the following example, ListView element is given as target to DropDownButton and header can be achieved by groupBy property.

<template>
<div>
    <ejs-dropdownbutton target= '#listview' iconCss= 'e-icons e-down' cssClass= 'e-caret-hide'></ejs-dropdownbutton>
    <ejs-listview id='listview' :dataSource='dataSource' :fields='fields' showCheckBox= 'true'
    ></ejs-listview>
</div>
</template>

<script>
import Vue from 'vue';
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
import { ListViewPlugin } from '@syncfusion/ej2-vue-lists';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
Vue.use(DropDownButtonPlugin);
Vue.use(ListViewPlugin);

export default {
    data () {
        return {
            dataSource :[
                { class: 'data', text: 'Print', id: 'data1', category: 'Customize Quick Access Toolbar' },
                { class: 'data', text: 'Save As', id: 'data2', category: 'Customize Quick Access Toolbar' },
                { class: 'data', text: 'Update Folder', id: 'data3', category: 'Customize Quick Access Toolbar' },
                { class: 'data', text: 'Reply', id: 'data4', category: 'Customize Quick Access Toolbar' }
            ],
            fields: { text: 'text', groupBy: 'category' }
        }
    }
}
</script>

<style>
  @import '../node_modules/@syncfusion/ej2-base/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-buttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-popups/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-splitbuttons/styles/material.css';
  @import '../node_modules/@syncfusion/ej2-lists/styles/material.css';
  .e-down::before {
    content: '\e969';
  }
</style>