ejGrid events can not use "this." inside command event method

[Dina Abdelbary]

Hi,

I m using an ejGrid , with a column command

"<e-column e-headertext="ُOpen" [commands]="openCommand" e-isunbound=true e-textalign="center" width="30"></e-column>"

and in component

"this.openCommand = [{

      type: "open", buttonOptions: {

        text: "Open Report",

        width: "100",

        click: this.onOpenReportClick,

      }

    }];

onOpenReportClick(event) {

    this.navigate();

  }

navigate() {

    //var obj = $("#webReportGrid").ejGrid("instance");

    //this.selectedReport = obj.getSelectedRecords()[0];

    this.router.navigate(['/webReport', 2, 'report']);

  }

"

the error is that "this.navigate is not a function", and so on using anything inside the component can not be understood inside the event method, so how can i use methods and variables in the component inside the command event method?

Thanks 

[Dina Abdelbary]

and also how can i add columns to the grid dynamically in angular2?

i ve used " 

var gridObj = $("#gridData").ejGrid("instance");

gridObj.Columns("CustomerID", "add"); 

and 

$("#gridData").ejGrid("columns","CustomerID", "add");

"

with no success!

[Jayaprakash Kamaraj]

Hi Dina, 

 

Thank you for contacting Syncfusion support. 

 

Query 1: the error is that "this.navigate is not a function", and so on using anything inside the component can not be understood inside the event method, so how can i use methods and variables in the component inside the command event method? 

 

We have analyzed your requirement and found that the cause of issue is command button click event not bind to the Command Column .So, to overcome this problem we suggest you to use .bind(this) in command button click event. Please refer to the below code example. 

public openCommand = [{ 

      type: "Detail", buttonOptions: { 

        text: "Open Report", 

        width: "100", 

        click: this.onOpenReportClick.bind(this), 

      } 

    }]; 

onOpenReportClick(e: any) { 

this.navigate(); 

  } 

Query 2: how can i add columns to the grid dynamically in angular2? 

 

We have analyzed your code example and found that you have used method name as Columns instead of columns in Grid. So, we suggest you to use obj.columns(). Please refer to the below code example and sample 

 

  clicked(event) { 

    var obj = $("#gridData").ejGrid("instance"); 

    obj.columns("ShipCity","add") 

  } 

Sample: http://www.syncfusion.com/downloads/support/forum/128221/ze/ejGrid_Vpaging-1937995097 

 

Regards, 

 

Jayaprakash K. 

[Dina Abdelbary]

Thanks for your reply,

According to first issue i have used .bind(this) and it is working good.

and according to add grid columns it worked good when i called it in ngAfterViewInit().

so now how can i set these properties in added column? (`columns name`, `display name`, `order`, `width` and `columntype`)

[Mohammed Farook J]

 Hi Dina,  

 

We have validated your requirement and please find the code example for grid column definitions. 

 

 

     

    function addColumns(args) { 

 

        var newColumn = { field: "ShipName", headerText: "Ship Name", width: 100 } 

        var obj = $("#Grid").ejGrid("instance") 

        var gridColumns = obj.model.columns.push(newColumn); 

        obj.columns(gridColumns); 

    } 

 

 

 

Please find UG documentation  for the grid column properties. 

 

UG : https://help.syncfusion.com/api/js/ejgrid#members:columns 

 

Regards, 

J.Mohammed Farook