unable to call a properties or methods of the class on click event of a custome button in grid

[Nirbhay]

Hi,

I tried to access the properties of the class on click event of the custom button in grid. but it is not accessible. can anybody help me out.

The code segment what I have written is mentioned below.

Also let me know how to bind the click event and data with the custom button in grid using rowDataBound event and how would it be fire on button click.

Regards,

Nirbhay

<div>

<ej-grid id="Grid" [dataSource]="gridData" [editSettings]="editSettings" (rowDataBound)="rowDataBound($event)"

(endDelete)="deleteRole($event)" (endAdd)="addRole($event)"

(endEdit)="editRoleGrid($event)">

  <e-columns>

    <e-column field='OrderID' headerText='Order ID' width='120' textAlign="right" isPrimaryKey='true' >e-column>

    <e-column field='CustomerID' headerText='Customer ID' width='120' textAlign="right" >e-column>

    <e-column field='Freight' headerText='Freight' width='120' format='C2' textAlign="right"  >e-column>

    <e-column field='ShipName' headerText='Ship Name' width='170'>e-column>

    <e-column field='ShipCountry' headerText='Ship Country' width='150'>e-column>

    <e-column field='Status' headerText='status' width='150'>e-column>

    <e-column headerText='Manage Records' width='160' [commands]='buttons'>e-column>

  e-columns>

ej-grid>

div>

this.editSettings = { allowEditing: true };

    this.buttons = [{ type: "edit", buttonOptions: { cssClass: "glyphicon glyphicon-pencil" } },

    { type: "delete", buttonOptions: { cssClass: "glyphicon glyphicon-trash" } },

    { type: "save", buttonOptions: { cssClass: 'glyphicon glyphicon-penci' } },

    { type: "cancel", buttonOptions: { cssClass: 'fa fa-file-text-o' } },

      {

      type: "details", buttonOptions: {

        text: "member",

        click: this.onClick(event)

      }

    }];

  }

 

  onClick(e) {alert("onClick");

    console.log("onClic");

}

[Mani Sankar Durai]

Hi Nirbhay, 

Thanks for contacting Syncfusion support.  

We have checked your query and found that you would like to trigger the button click event for the command column in grid.  

Please refer the code example 

 

<ej-grid #grid [dataSource]="gridData" [allowPaging]="true"  [toolbarSettings]="toolbarItems" [query]="querystring" [editSettings]="editSettings"> 

     <e-columns> 

... 

               <e-column headerText="Actions" [commands]="buttons" width="75"></e-column> 

    </e-columns>        

</ej-grid> 

 

[app.component.html] 

public buttons = [{ type: "edit", buttonOptions: { text: "Edit", click: (e: any) => this.onEnable(e), } }, //bound the click event for the command column 

    { type: "delete", buttonOptions: { text: "Delete" } }, 

    { type: "save", buttonOptions: { text: "Save" } }, 

    { type: "cancel", buttonOptions: { text: "Cancel" } } 

    ]; 

    onEnable(e: any) {           //click event for edit button 

        console.log("clicked"); 

    } 

 

 

Refer the documentation link. 

Link: https://help.syncfusion.com/api/angular/grid#members:columns-commands 

 

Sample link: http://www.syncfusion.com/downloads/support/forum/135304/ze/angularcli1174066774 

 

Please let us know if you need further assistance. 

 

 

Regards, 

Manisankar Durai. 

[Nirbhay]

Hi Mani Shanker,

Thankyou very much for replying my query. It really worked for me.

Thanks again

Nirbhay

[Mani Sankar Durai]

Hi Nirbhay, 

We are happy to hear that your problem has been solved.  

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai.