How to Group popup items with ListView component in JavaScript DropDownButton control

JavaScript

Search results

30 Sep 2022 / 2 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.

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

Source

Preview

app.ts

index.html

styles.css

import { DropDownButton, DropDownButtonModel, ItemModel, MenuEventArgs } from '@syncfusion/ej2-splitbuttons';
import { enableRipple } from '@syncfusion/ej2-base';
import { ListView } from '@syncfusion/ej2-lists';

enableRipple(true);

// Initialize DropDownButton options.
let ddbOption: DropDownButtonModel = {
  target: '#listview',
  iconCss: 'e-icons e-down',
  cssClass: 'e-caret-hide'
};

// To initialize the DropDownButton component.
let drpDownBtn: DropDownButton = new DropDownButton(ddbOption);
// Render initialized DropDownButton.
drpDownBtn.appendTo('#element');

// Initialize datsource for ListView component.
let dataSource: { [key: string]: Object }[] = [
    { 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' }
];

// Initialize ListView component
let listviewInstance: ListView = new ListView({
    dataSource: dataSource,
    // Map the appropriate columns to fields property
    fields: { text: 'text', groupBy: 'category' },
    // To show CheckBox.
    showCheckBox: true
});

//Render initialized ListView
listviewInstance.appendTo("#listview");

<!DOCTYPE html>
<html lang="en">

<head>
    <title>EJ2 DropDownButton</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Typescript UI Controls" />
    <meta name="author" content="Syncfusion" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-popups/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/20.3.47/ej2-splitbuttons/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <button id='element'></button>
        <div id='listview'></div>
    </div>
</body>

</html>

#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

.e-down::before {
  content: '\e969';
}

#listview {
    display: block;
    max-width: 600px;
    margin: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}