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

ej-grid in child component issues

As the subject ,here are the code:


    selector: "ej-grid-base",
    `<ej-grid [dataSource]="dataSource"         
            <e-column *ngFor="let c of columns" field="{{c.field}}" headerText="{{c.headerText}}"></e-column>

export class EjGridComponent implements OnInit {

    locale: string;

    dataSource: any;

    columns: ej.Grid.Column[];

    constructor(private translateService: TranslateService) { }

    ngOnInit(): void {
        this.locale = this.translateService.getDefaultLang();

as above, datasource and columns are input fields from parent,so I can use it otherwhere like:

<ej-grid-base [dataSource]="data" [columns]="gridColumns"></ej-grid-base>

and now I have two problems:

1.change the headerText ,because localized strings are  from ngx-translate because it's async load so I consider change the headerText after the grid is rendered.is this possible?
2.I have a custom filter form in parent component,and when submit the form,refresh the datasource to the grid by doing 

this.data=//some access with ejDatamanager;
$("#Grid").ejGrid("dataSource", this.data);

but I need the id of the grid,I have tried pass id from parent,but it seems doesn't work,I found this article Angularjs - Dynamic dropdown ids working with Selenium Testing 
and yes,the grid auto generates id like "ejControl_0" and I have no ideas how to pass the id to parent component.

Thanks for your patient to read this.

8 Replies

TS Thavasianand Sankaranarayanan Syncfusion Team March 7, 2017 03:53 AM UTC

Hi Jemmy, 

Thanks for contacting Syncfusion support. 

Query 1: Change the headerText after render the Grid. 

We have analyzed your query and we suspect that you want to set the headerText after the grid render.  
In the below code example we have change the headerText of a Grid column in a button click event. 

Refer the below code example. 

<script type="text/javascript"> 
    function click() { 
        var gridObj = $("#Grid").ejGrid('instance'); 
        gridObj.model.columns[0]['headerText'] = "CustomerOrder"; //set the headerText value to the OrderID column 

Query 2 How to get the id of Grid. 

We have analyzed your query and based on your code example you have not set the id for the grid template. So set the id to the Grid. 

Refer the below code example. 

<ej-grid id="Grid" [dataSource]="gridData1" [allowPaging]="true" [editSettings]= "edit" [toolbarSettings]= "tool" (actionComplete)="onActionComplete($event)"> > 

We have prepared a sample and it can be downloadable from the below location. 

Thavasianand S. 

JL Jemmy Lu March 8, 2017 03:43 PM UTC

Thanks for replying,the second question is that I wrap th ej-grid in a child component,so I cant use id because there may more than one grid in same page,would occur different grids with same id,but finally I use ViewChild to get the id auto generated to resolve it.

I want to ask if the grid datasource is two-way biding when use a datamanager? thanks.

finally I find the reason why the datasource not two-way binding because of using the wrong way to execute callback function so the scope is wrong.
and I would say both problems solved.Thanks!

AS Alan Sangeeth S Syncfusion Team March 9, 2017 06:45 AM UTC

Hi Jemmy, 
We are happy to hear that your requirements are achieved. 
Please let us know if you have any other queries. We will be happy to help you. 
Alan Sangeeth S 

SB shridhar babu June 12, 2017 12:00 PM UTC

Sub: facing issue with Dynamic "HeaderText" and "field",

Following sinppet is getting responce using services:

        this.outputopsService.getAll().subscribe(c => {
for (var j = 0; j < this.headers.length; j++) {
 And i'm passing this response to HTML <ej-grid> table:

<ej-grid id="Gridd" #gridd [dataSource]="trends" >

<e-column *ngFor="let c of headers" field="{{c.field}}" headerText="{{c.headerText}}"></e-column>

My actual Json Response is : 

"Headers":["name","Sep 2015","Oct 2015","Nov 2015","Dec 2015","Jan 2016","Feb 2016","Mar 2016","Apr 2016","May 2016",
"Jun 2016","Jul 2016","Aug 2016","Sep 2016"],
           "name": "Malaysia","Sep 2015": 38,"Oct 2015": 35,"Nov 2015": 29,"Dec 2015": 26,"Jan 2016": 49,
"Feb 2016": 43,"Mar 2016": 52,"Apr 2016": 59,"May 2016": 33,"Jun 2016": 35,"Jul 2016": 26,"Aug 2016": 27,
"Sep 2016": 60

SB shridhar babu June 12, 2017 12:02 PM UTC

TS Thavasianand Sankaranarayanan Syncfusion Team June 13, 2017 12:01 PM UTC

Hi Shridhar, 

We have analyzed your query and we suspect that you want to use the *ngFor data attribute in the ej-grid. By setting the field as [field] and denote the *ngFor item as “item.field”(as given in the .ts file) 
Refer the below code example. 


<ej-grid [allowPaging]="true" [dataSource]="gridData" > 
        <div *ngFor="let item of items"> 
            <e-column [field]="item.field" [headerText]="item.headerText"></e-column> 

export class GridComponent { 
    public items = [ 
        { "field": "OrderID", "headerText": "Order ID" }, 
        { "field": "CustomerID", "headerText": "Cutomer" }, 
        { "field": "EmployeeID", "headerText": "Employeemer" } 
    constructor() { 

We have prepared a sample and it can be downloadable from the below location. 

If you still face the same issue then please get back to us with the following details. 

  1. Share the screen shot or video demonstration of the issue.
  2. Share Grid code example.
  3. Share the stack trace, if you facing any script error.
  4. Essential Studio version.
  5. If possible share the sample or reproduce the issue in the attached sample.

Thavasianand S. 

SB shridhar babu June 14, 2017 03:42 AM UTC

Problem solved ,Thanks for swift reply

TS Thavasianand Sankaranarayanan Syncfusion Team June 15, 2017 05:10 AM UTC

Hi Shridhar, 

We are happy that the problem has been solved. 
Please get back to us if you need any further assistance.  
Thavasianand S. 

Live Chat Icon For mobile
Up arrow icon