We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

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

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 

4 Replies

DA Dina Abdelbary January 9, 2017 03:09 PM UTC

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!


JK Jayaprakash Kamaraj Syncfusion Team January 10, 2017 01:35 PM UTC

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") 
  } 

 
Regards, 
 
Jayaprakash K. 



DA Dina Abdelbary January 12, 2017 12:10 PM UTC

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`)




MF Mohammed Farook J Syncfusion Team January 13, 2017 10:20 AM UTC

 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. 
 
 
Regards, 
J.Mohammed Farook   


Loader.
Live Chat Icon For mobile
Up arrow icon