ej2 grid, custom toolbar button and standard buttons

Question

Hi there,I have added some custom toolbar buttons to my Grid Toolbar and implemented javascript function for the toolbar click event:Grid = new ej.grids.Grid({    dataSource: [],    editSettings: { allowEditing: false, allowAdding: true, allowDeleting: true, allowEditOnDblClick: false, mode: 'Normal', },    toolbar: ['Add', 'Delete', 'Update', 'Cancel', AddDocumentContactToolbarButton, AddProjectMembersToolbarButton, AddStakeHoldersToolbarButton],    toolbarClick: SubmitRecipientsToolbarClickbut now the default Add\Delete\Update\Cancel buttons no longer actionHow should I use a mix of standard button functionality and custom button functionality?Thanks in advance James

Ajith Govarthan · Accepted Answer

Hi James, 

Thanks for contacting Syncfusion support. 

We are happy to hear that you have found the solution at your end.  
 
Based on your query that you are facing issue in toolbarClick event while using both default and custom toolbars. So, we have prepared sample and in that sample we have used both default and custom toolbar items and handled the click events for the custom toolbar items.  

Please refer the below sample for your reference. 

Code Example: 




Index.js 

var grid = new ej.grids.Grid({ 
  dataSource: window.orderDataSource, 
  editSettings: { 
    allowEditing: true, 
    allowAdding: true, 
    allowDeleting: true, 
    mode: "Normal", 
    newRowPosition: "Top" 
  }, 
  allowPaging: true, 
  toolbarClick: clickHandler, 
  pageSettings: { pageCount: 5 }, 
  toolbar: [ 
    "Add", 
    "Edit", 
    "Delete", 
    "Update", 
    "Cancel", 
    { text: "Click", tooltipText: "Click", prefixIcon: "e-expand", id: "Click" } 
  ], 
  actionBegin: actionBegin, 
  columns: [ 
    { 
      field: "OrderID", 
      isPrimaryKey: true, 
      headerText: "Order ID", 
      textAlign: "Right", 
      validationRules: { required: true, number: true }, 
      width: 140 
    }, 
    { 
      field: "CustomerID", 
      headerText: "Customer ID", 
      validationRules: { required: true }, 
      width: 140 
    }, 
    { 
      field: "Freight", 
      headerText: "Freight", 
      textAlign: "Right", 
      editType: "numericedit", 
      width: 140, 
      format: "C2", 
      validationRules: { required: true } 
    }, 
    { 
      field: "OrderDate", 
      headerText: "Order Date", 
      editType: "datetimepickeredit", 
      format: { type: "dateTime", format: "M/d/y hh:mm a" }, 
      width: 160 
    }, 
    { 
      field: "ShipCountry", 
      headerText: "Ship Country", 
      editType: "dropdownedit", 
      width: 150, 
      edit: { params: { popupHeight: "300px" } } 
    } 
  ] 
}); 
grid.appendTo("#Grid"); 
function clickHandler(args) { 
  if (args.item.id === "Click") { 
    alert("Cutom toolbar click..."); 
  } 
} 

Sample Link: https://stackblitz.com/edit/bkqpks-ejzvfx?file=index.js 

UG-Link: https://ej2.syncfusion.com/javascript/documentation/grid/tool-bar/#built-in-and-custom-items-in-toolbar  

Note: By default, in our EJ2 Grid when you use the toolbar click event, then the toolbar click event will be triggered for both default and custom toolbar items. So, you can identify each toolbar items using the toolbar items id, for default toolbar items the toolbar item id will be combined with grid element’s ID and for the custom toolbar items, defined custom toolbar id will be taken for custom toolbar items. 

Please get back to us if you need further assistance. 

Regards, 
Ajith G.

James Carter · Answer

H there,please close this post as I have worked out the solution.Rather than using the toolbarClick event if have added click functions for the individual custom buttonsMany thanks James