JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Group popup items with ListView component in JavaScript (ES5) DropDownButton control

08 May 2023 / 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
index.js
index.html
styles.css
Copied to clipboard
ej.base.enableRipple(true);

var ddbOption = { 
  target: '#listview',
  iconCss: 'e-icons e-down',
  cssClass: 'e-caret-hide'
};

var drpDownBtn = new ej.splitbuttons.DropDownButton(ddbOption);

drpDownBtn.appendTo('#element');

var 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' },
    { class: 'data', text: 'Reply All', id: 'data4', category: 'Customize Quick Access Toolbar' },
    { class: 'data', text: 'Forward', id: 'data4', category: 'Customize Quick Access Toolbar' },
    { class: 'data', text: 'Delete', id: 'data4', category: 'Customize Quick Access Toolbar' },
    { class: 'data', text: 'Undo', id: 'data4', category: 'Customize Quick Access Toolbar' },
];

//Initialize ListView component
var listviewInstance = new ej.lists.ListView({
    dataSource: dataSource,
    //map the appropriate columns to fields property
    fields: { text: 'text', groupBy: 'category' },
    showCheckBox: true
});

//Render initialized ListView
listviewInstance.appendTo("#listview");
Copied to clipboard
<!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/21.2.3/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-popups/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-splitbuttons/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.2.3/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <button id="element"></button>
        <div id="listview"></div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#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;
}
Previous
Next