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

2 Mar 20264 minutes to read

Create grouped popup items with headers by integrating the ListView component with DropDownButton. Set the ListView element as the target property and enable grouping using the groupBy property.

The following example demonstrates how to create a grouped dropdown with item headers using ListView:

app.jsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';
enableRipple(true);
// To render DropDownButton.
function App() {
    let data = [
        { 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' }
    ];
    let field = { text: 'text', groupBy: 'category' };
    return (<div>
        <ListViewComponent id="listview" dataSource={data} fields={field} showCheckBox={true}/>
        <DropDownButtonComponent target='#listview' iconCss='e-icons e-down' cssClass='e-caret-hide'/>
      </div>);
}
export default App;
ReactDom.render(<App />, document.getElementById('button'));

app.tsx

import { enableRipple } from '@syncfusion/ej2-base';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { DropDownButtonComponent } from '@syncfusion/ej2-react-splitbuttons';
import * as React from 'react';
import * as ReactDom from 'react-dom';

enableRipple(true);

// To render DropDownButton.
function App() {
  let data: Array<{ [key: string]: string; }> = [
    { 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' }
  ];

  let field: { [key: string]: string; } = { text: 'text', groupBy: 'category' };
  
    return (
      <div>
        <ListViewComponent id="listview" dataSource={data} fields={field} showCheckBox={true}/>
        <DropDownButtonComponent  target='#listview' iconCss='e-icons e-down' cssClass='e-caret-hide'/>
      </div>
    );
}
export default App;
ReactDom.render(<App />,document.getElementById('button'));