Spinfoweb Blog Add Custom Menu in Angular UI Grid

If you want to add new custom menu in Angular UI grid then you can refer below codethis.onRegisterApi = function (gridApi) { // Keep a reference to the gridAp; self.gridApi = gridApi; $timeout(function () {//Add Custom Menu gridApi.core.addToGridMenu(gridApi.grid, [{ title: 'Export To Excel', action: function ($event) { var tempData = self.gridApi.grid.options.data; self.gridApi.grid.options.data = self.scope.filteredData; self.scope.dataReady= false; setTimeout(function () { self.gridApi.exporter.excelExport(uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE, 'excel'); self.scope.dataReady = true; self.gridApi.grid.options.data = tempData; }, 1000); }, order: 99 }, { icon: 'fa fa-file-doc-o', title: 'Export To Word', action: function ($event) { var tempData = self.gridApi.grid.options.data; self.gridApi.grid.options.data = self.scope.filteredData; self.scope.dataReady = false; setTimeout(function () { self.gridApi.exporter.excelExport(uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE, 'doc'); self.scope.dataReady = true; self.gridApi.grid.options.data = tempData; }, 1000); }, order: 99 }, { icon: 'fa fa-file-xml-o', title: 'Export To XML', action: function ($event) { var tempData = self.gridApi.grid.options.data; self.gridApi.grid.options.data = self.scope.filteredData; self.scope.dataReady = false; setTimeout(function () { self.gridApi.exporter.XMLExport(uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE); self.scope.dataReady = true; self.gridApi.grid.options.data = tempData; }, 1000); }, order: 99 }, { icon: 'fa fa-file-xml-o', title: 'Export To PDF', action: function ($event) { var tempData = self.gridApi.grid.options.data; self.gridApi.grid.options.data = self.scope.filteredData; self.scope.dataReady = false; setTimeout(function () { self.gridApi.exporter.pdfExport(uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE); self.scope.dataReady = true; self.gridApi.grid.options.data = tempData; }, 1000); }, order: 99 }, { icon: 'fa fa-file-xml-o', title: 'Export To CSV', action: function ($event) { var tempData = self.gridApi.grid.options.data; self.gridApi.grid.options.data = self.scope.filteredData; self.scope.dataReady = false; setTimeout(function () { self.gridApi.exporter.csvExport(uiGridExporterConstants.ALL, uiGridExporterConstants.VISIBLE); self.scope.dataReady = true; self.gridApi.grid.options.data = tempData; }, 1000); }, order: 99 }]); }, 1000); // Examples of API configuration // Setup events so we're notified when grid state changes. // self.gridApi.colMovable.on.columnPositionChanged(self.scope, saveState); // self.gridApi.colResizable.on.columnSizeChanged(self.scope, saveState); // self.gridApi.grouping.on.aggregationChanged(self.scope, saveState); // self.gridApi.grouping.on.groupingChanged(self.scope, saveState); // self.gridApi.core.on.columnVisibilityChanged(self.scope, saveState); // self.gridApi.core.on.filterChanged(self.scope, saveState); self.gridApi.core.on.filterChanged(self.scope, function(){ if(options.useExternalFiltering !== undefined && options.useExternalFiltering === true){ var grid = this.grid; var colSearchTerms = []; $.each(grid.columns, function (index, column) { if (column.visible && column.enableFiltering) { if(column.filters[0].term !== undefined && column.filters[0].term !== null && column.filters[0].term !== '') { colSearchTerms.push({ name: column.name, filters: column.filters[0].term.trim() }); } } }); self.scope.filterDataRowsbyColumn(colSearchTerms); } }); //self.gridApi.core.on.sortChanged(self.scope, function(grid, sort) { // self.gridApi.core.notifyDataChange(uiGridConstants.dataChange.COLUMN); //}); // Restore previously saved grid state. self.restoreState(); // this fires on a row selection //self.gridApi.selection.on.rowSelectionChanged(self.scope, function(row) { //}); // Prettify the grid menu self.updateMenu(); };