EJ2 Grid Custom Toolbar CRUD Button in Toolbar Template

[Arif Nurdiansyah]

Hello there, i want to ask how to create Add, Edit, Delete Button in toolbar template, because when i use toolbarTemplate, the script didn't read  the toobar properties, any info how to call add, edit delete function? like pdf export with grid.pdfExport() but how with that 3 buttons?

Thanks You!

[Hariharan J V]

Hi Arif, 

 

Thanks for contacting Syncfusion support. 

 

Query: I want to ask how to create Add, Edit, Delete Button in toolbar template, because when i use toolbarTemplate, the script didn't read  the toobar properties, any info how to call add, edit delete function? like pdf export with grid.pdfExport() but how with that 3 buttons? 

 

We have validated your query and created sample based on your requirement. Here, we have perform (add, edit, delete and pdf export) operations by using toolbar template. Please find the below code example and sample for your reference. 

 

[code example] 

... 

 

let clickHandler: EmitType<ClickEventArgs> = (args: ClickEventArgs) => { 

    var target: Element = (<HTMLElement>args.originalEvent.target).closest('.e-toolbar-item'); 

    if (target.id === 'add') { 

        grid.addRecord();                      //for adding record 

    } 

    if (target.id === 'edit') { 

        grid.startEdit();                      //for editing record 

    } 

    if (target.id === 'delete') { 

        grid.deleteRecord();                  //for deleting record 

    } 

    if (target.id === 'pdf_export') { 

        grid.pdfExport();                      //for pdf exporting 

    } 

}; 

 

    let data: Object = new DataManager(orderData as JSON[]).executeLocal(new Query().take(15)); 

    let grid: Grid = new Grid( 

        { 

            dataSource: data, 

            toolbarTemplate: '#toolbar-template', 

            editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true }, 

            toolbarClick: clickHandler, 

            allowPdfExport: true, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', width: 120, textAlign: 'Right', isPrimaryKey: true }, 

                ... 

           ] 

        }); 

   grid.appendTo('#Grid'); 

 

Please find the sample in below link. 

 

Sample link: https://stackblitz.com/edit/zf1szs-urb12d?file=index.ts 

Help Documentation: https://ej2.syncfusion.com/documentation/grid/tool-bar.html?lang=typescript#custom-toolbar 

 

Please get back to us if you need further assistance. 

 

Regards, 

Hariharan