Toolbar with custom functionality

[Marko]

Hi Team,

I use syncfusion grid any grid have powerful features. A want extend my toolbar.

First I wrote my custom form which validate all data before saving into database.

I want add button like "Add" but with my functionality like inexample

Example:

Also when I use custom toolbar buttons, for example add, also I need options to update record on first row.

if (item.text === "Add") {
  // DO SOMETHING
}

Can I achieve this?

[Venkatesh Ayothi Raman]

Hi Marko, 

Thanks for contacting Syncfusion support. 

Query 1 : Validate the all values before save the value in database 

We suggest you to use the “actionBegin” event of Grid. In that event handler, we can get the user added/inserted record details.  

 

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#actionbegin 

 

Please refer the code example below, 

[html] 

 

<ejs-grid [dataSource]='data' [editSettings]='editSettings' ... (actionBegin)="begin($event)"> 

     ... 

</ejs-grid> 

 

 

[ts] 

 

    begin(args:any){ 

      if(args.requestType == "save"){ 

        //In "args.data" you will be getting the values of the edited row. Now you can perform validation here. 

      } 

    } 

 

Query 2 : perform the add operation while click the custom toolbar button. 

We suggest you to use the “addRecord” method of Grid to add a record to Grid, when the custom toolbar icon is clicked.  

Documentation : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#addrecord 

 

We also suggest you to refer the below methods of Grid, to perform CRUD operations. 

deleteRecord : https://ej2.syncfusion.com/angular/documentation/grid/api-gridComponent.html#deleterecord 

updateRow : https://ej2.syncfusion.com/documentation/grid/api-edit.html?lang=typescript#updaterow 

 

Please get back to us if you need further assistance. 

Regards, 

Venkatesh Ayothiraman.