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>