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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

128221 Jan 9,2017 02:32 PM UTC Jan 13,2017 10:20 AM UTC Angular 4
loading
Tags: ejGrid
Dina Abdelbary
Asked On January 9, 2017 02:32 PM UTC

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
Replied On 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!

Jayaprakash Kamaraj [Syncfusion]
Replied On 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. 


Dina Abdelbary
Replied On 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`)



Mohammed Farook J [Syncfusion]
Replied On 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   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;