Building a Custom Dropdown Menu with Checkbox Selections and Chip-Based Display

This article provides a guide on how to create a custom dropdown menu that displays a list of menu items with checkbox selections for submenus. The selected submenu items will be displayed as chips, allowing for a clear and organized view of the user’s selections.

Implementation Steps

1. Setup the Chip List: Use the ejs-chiplist component to display selected submenu items as chips. The enableDelete property allows users to remove chips if needed.

   <div class="chip-container">
       <ejs-chiplist
           [chips]="chips"
           enableDelete="true"
           (deleted)="deletedChips($event)"
       ></ejs-chiplist>
   </div>
   

2. Create the Menu: Implement the ejs-menu component to create a vertical menu. The menu will include a template for rendering submenu items with checkboxes.

   <div id="target">
       <ejs-menu
           #menu
           [items]="menuItems"
           orientation="Vertical"
           (beforeClose)="onCloseMenu($event)"
           (beforeOpen)="onOpenMenu($event)"
           showItemOnClick="true"
       >
           <ng-template #template let-dataSource="">
               {{ dataSource.text }}
               <div *ngIf="dataSource.customListbox">
                   <ejs-listbox
                       [dataSource]="data"
                       [selectionSettings]="selection"
                       [value]="values"
                       (change)="onChange($event, dataSource)"
                   ></ejs-listbox>
               </div>
           </ng-template>
       </ejs-menu>
   </div>
   

3. Dropdown Button: Use the ejs-dropdownbutton component to trigger the dropdown menu. The button can be styled and configured to show an icon and handle events for opening and closing.

   <button
       ejs-dropdownbutton
       target="#target"
       content="Filter"
       iconCss="e-icons e-filter"
       cssClass="e-caret-hide"
       (beforeClose)="onCloseDdb($event)"
       (beforeOpen)="onCreated($event)"
   ></button>
   

Event Handling

• Chip Deletion: Implement the deletedChips method to handle the removal of chips when the delete icon is clicked.

• Menu Events: Use onCloseMenu and onOpenMenu methods to manage the state of the menu when it is opened or closed.

• Listbox Change: The onChange method should be implemented to update the chip list based on the selections made in the listbox.

Sample Demo link: Sample link

This setup allows for a dynamic and interactive user interface where users can select multiple submenu items and view their selections as chips. This enhances the user experience by providing a clear visual representation of their choices.

Additional References

• Syncfusion Menu Component Documentation
• Syncfusion ChipList Component Documentation
• Syncfusion ListBox Component Documentation