1. Home
  2. Forum
  3. Angular - EJ 2
  4. get the button click event

get the button click event

Hi,
I have used this grid in which I am having add in the toolbar, now when I click on add it opens a dialogue which contains all the declared columns
as fields, now I want to have the click event of this (save button) so that I can call my custom function on it, from where I can get this. Please help


3 Replies
RS Rajapandiyan Settu Syncfusion Team March 23, 2020 04:42 AM UTC

Hi RakhiS, 
 
Greetings from syncfusion support. 
 
Query :  I want to have the click event of this (save button) so that I can call my custom function on it, from where I can get this. 
 
From your query we could see that you need to bind a click event for the save button in the Add Dialog.  In the actionComplete ( requestType is add ) event, we can able to get dialog element in its arguments. By using this dialog element we have get the button (SAVE) element and added a click event for that. Please refer the below code example and sample for more information. 
 
App.component.html 
 
<ejs-grid #grid [dataSource]='data' [editSettings]='editSettings' [toolbar]='toolbar' height='273px'  
(actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)"> 
-------- 
</ejs-grid> 
 
App.component.ts 
 
export class AppComponent { 
 
  @ViewChild('grid') public grid: GridComponent; 
     public data: object[]; 
    public editSettings: EditSettingsModel; 
    public toolbar: ToolbarItems[]; 
 
    ngOnInit(): void { 
        this.data = hierarchyOrderdata; 
        this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' }; 
        this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel']; 
    } 
    actionBegin(args){ 
    } 
    actionComplete(args){ 
      if(args.dialog && args.requestType == 'add'){ 
// get the buttons in the add dialog 
        var buttons = args.dialog.element.getElementsByClassName("e-footer-content")[0].getElementsByTagName('button'); 
        for (var i=0; i<buttons.length; i++){ 
          if(buttons[i].innerText == 'SAVE'){ 
//  binding a click event to the save button 
            buttons[i].addEventListener('click',function(args){ 
              console.log("here you can bind you custom code for save button click") 
              }); 
          } 
        } 
      } 
    } 
} 
 
 
 
 
 
Please get back to us if you need further assistance on this. 
 
Regards, 
Rajapandiyan S.    


RA RakhiS March 23, 2020 07:55 AM UTC

How can I customize the fields in the dialogue opening on the Add click. Like I want to add another two checkboxes and want to display only one field. Please help to achieve this.

RS Rajapandiyan Settu Syncfusion Team March 24, 2020 10:24 AM UTC

Hi RakhiS, 

Thanks for your update. 
 
Query :  How can I customize the fields in the dialogue opening on the Add click. Like I want to add another two checkboxes and want to display only one field. Please help to achieve this 

Based on your requirement we could see that you need to add a custom element in the edit dialog. You can achieve your requirement by using the editTemplate. In which we can able to add a custom element in the edit dialog and save these edited data in the grid dataSource. Please refer the below sample and documentation for more information. 

App.component.html 

<div class="control-section"> 
    <ejs-grid [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings' [editSettings]='editSettings'  
[toolbar]='toolbar' (actionBegin)='actionBegin($event)' (actionComplete)='actionComplete($event)'> 
        <e-columns> 
---------- 
        </e-columns> 
        <ng-template #editSettingsTemplate let-data> 
-------- 
        </ng-template> 
    </ejs-grid> 
</div> 


App.component.ts 
 
export class AppComponent { 
------- 

    public ngOnInit(): void { 
------- 
    } 

    createFormGroup(data: IOrderModel): FormGroup { 
// binding the rowdata to the form element  
        return new FormGroup({ 
            OrderID: new FormControl(data.OrderID, Validators.required), 
            OrderDate: new FormControl(data.OrderDate, this.dateValidator()), 
            CustomerID: new FormControl(data.CustomerID, Validators.required), 
            Freight: new FormControl(data.Freight), 
            ShipAddress: new FormControl(data.ShipAddress), 
            ShipCity: new FormControl(data.ShipCity), 
            ShipCountry: new FormControl(data.ShipCountry), 
            Verified1: new FormControl(data.Verified1), 
            Verified2: new FormControl(data.Verified2) 

        }); 
    } 

    dateValidator() { 
        return (control: FormControl): null | Object  => { 
            return control.value && control.value.getFullYear && 
            (1900 <= control.value.getFullYear() && control.value.getFullYear() <=  2099) ? null : { OrderDate: { value : control.value}}; 
        } 
    } 

    actionBegin(args: SaveEventArgs): void { 
        if (args.requestType === 'beginEdit' || args.requestType === 'add') { 
            this.submitClicked = false; 
// passing the row data to the form element  
            this.orderForm = this.createFormGroup(args.rowData); 
        } 
        if (args.requestType === 'save') { 
            this.submitClicked = true; 
            if (this.orderForm.valid) { 
// saving the edited data into the grid datasource 
                args.data = this.orderForm.value; 
            } else { 
                args.cancel = true; 
            } 
        } 
    } 

    actionComplete(args: DialogEditEventArgs): void { 
        if ((args.requestType === 'beginEdit' || args.requestType === 'add')) { 
            if (Browser.isDevice) { 
                args.dialog.height = window.innerHeight - 90 + 'px'; 
                (<Dialog>args.dialog).dataBind(); 
            } 
            // Set initial Focus 
            if (args.requestType === 'beginEdit') { 
                (args.form.elements.namedItem('CustomerID') as HTMLInputElement).focus(); 
            } else if (args.requestType === 'add') { 
                (args.form.elements.namedItem('OrderID') as HTMLInputElement).focus(); 
            } 
        } 
    } 

    get OrderID(): AbstractControl  { return this.orderForm.get('OrderID'); } 

    get CustomerName(): AbstractControl { return this.orderForm.get('CustomerName'); } 

    get OrderDate(): AbstractControl { return this.orderForm.get('OrderDate'); } 

} 

export interface IOrderModel { 
    OrderID?: number; 
    CustomerID?: string; 
    ShipCity?: string; 
    OrderDate?: Date; 
    Freight?: number; 
    ShipCountry?: string; 
    ShipAddress?: string; 
    Verified1 : boolean; 
    Verified2 : boolean; 
} 






Please get back to us if you need further assistance on this. 

Regards, 
Rajapandiyan S.              


Loader.
Up arrow icon