Group items in popup in Vue Split button component

11 Jun 20246 minutes to read

Grouped items are possible in SplitButton by templating entire popup with ListView. Check ListView grouping and create such items. Create ListView with id listview and provide element of the ListView as target of SplitButton to render it in popup area.

Install Syncfusion List packages using below command.

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

In this following example, ListView is created and its element is set as target for SplitButton.

<template>
    <div>
        <ejs-splitbutton target='#listview'>ClipBoard</ejs-splitbutton>
        <ejs-listview id='listview' :dataSource='items' :fields='fields' sortOrder='Descending'>
        </ejs-listview>
    </div>
</template>

<script setup>

import { SplitButtonComponent as EjsSplitbutton } from "@syncfusion/ej2-vue-splitbuttons";
import { ListViewComponent as EjsListview } from '@syncfusion/ej2-vue-lists';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
const items = [
    {
        'text': 'Cut',
        'category': 'Basic'
    },
    {
        'text': 'Copy',
        'category': 'Basic'
    },
    {
        'text': 'Paste',
        'category': 'Basic'
    },
    {
        'text': 'Paste as Formula',
        'category': 'Advanced'
    },
    {
        'text': 'Paste as Hyperlink',
        'category': 'Advanced'
    }];
const fields = { 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-split-btn-wrapper {
    margin: 20px 20px 5px 5px;
}
</style>
<template>
    <div>
        <ejs-splitbutton target='#listview'>ClipBoard</ejs-splitbutton>
        <ejs-listview id='listview' :dataSource='items' :fields='fields' sortOrder='Descending'>
        </ejs-listview>
    </div>
</template>

<script>

import { SplitButtonComponent } from "@syncfusion/ej2-vue-splitbuttons";
import { ListViewComponent } from '@syncfusion/ej2-vue-lists';
import { enableRipple } from '@syncfusion/ej2-base';

enableRipple(true);
export default {
    name: "App",
    components: {
        "ejs-splitbutton": SplitButtonComponent,
        "ejs-listview": ListViewComponent
    },
    data() {
        return {
            items: [
                {
                    'text': 'Cut',
                    'category': 'Basic'
                },
                {
                    'text': 'Copy',
                    'category': 'Basic'
                },
                {
                    'text': 'Paste',
                    'category': 'Basic'
                },
                {
                    'text': 'Paste as Formula',
                    'category': 'Advanced'
                },
                {
                    'text': 'Paste as Hyperlink',
                    'category': 'Advanced'
                }],
            fields: { 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-split-btn-wrapper {
    margin: 20px 20px 5px 5px;
}
</style>