Adding a dropdown menu in a grid
Dear Team
We're new to Syncfusion and want to add a dropdown menu with custom actions, as shown in this image. Please help us do this.
Kind regards,
Hi Maacha,
Greetings from Syncfusion support
To implement a dropdown menu with custom actions in a Syncfusion EJ2 JavaScript Grid (as shown in your screenshot), you can use a column template feature of Grid inside the Actions column. We have also discussed about how to render the other controls in the Grid column using column template in our documentation which can be accessed using the below link,
Documentation: https://ej2.syncfusion.com/javascript/documentation/grid/columns/column-template#render-other-controls-in-a-column
https://ej2.syncfusion.com/javascript/documentation/grid/columns/column-template
For your convenience, we have prepared a sample by rendering the Dropdown menu in the Grid column using the column template feature. Please refer the below code example, sample and documentation for more information.
|
Index.js
var grid = new ej.grids.Grid({ queryCellInfo: queryCellInfo, columns: [ . . . . . . . . . . . . . . . . . . . . . . . . . . . { headerText: 'Actions', textAlign: 'Center', template: '#actionTemplate', width: 180 }, ], }); grid.appendTo('#Grid');
function queryCellInfo(args) { //queryCellInfo event of Grid if (args.column.headerText === 'Actions') { var drpDownBtn = new ej.splitbuttons.DropDownButton({ items: items, iconCss: 'e-icons e-menu', cssClass: 'e-caret-hide', select: select //select event for perform your action }); drpDownBtn.appendTo(args.cell.querySelector('#icononly')); } }
function select(args) { //select event of Dropdown button //based on the item selection you can perform your action if(args.item.text === 'New tab') { //perform your action here } }
Index.html
<script type="text/x-template" id="actionTemplate">x <button id="icononly"></button> </script>
|
Sample: https://stackblitz.com/edit/olsabj29-5v2xpktc?file=index.js,index.html
Documentation: https://ej2.syncfusion.com/javascript/documentation/drop-down-button/icons#icon-only-dropdownbutton
https://ej2.syncfusion.com/javascript/documentation/api/drop-down-button/#select
Screenshot:
Regards,
Rajapandi R
