ej-grid in child component issues

[Jemmy Lu]

As the subject ,here are the code:

ej.grid.base.ts:

@Component({

    selector: "ej-grid-base",

    template:

    `<ej-grid [dataSource]="dataSource"         

        allowResizing="true" 

        allowSorting="true" 

        allowTextWrap="true" 

        enableTouch="false" 

        allowPaging="true"     

        [locale]="locale">   

        <e-columns>

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

        </e-columns>

     </ej-grid>`

})

export class EjGridComponent implements OnInit {

    locale: string;

    @Input()

    dataSource: any;

    @Input()

    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.

[Thavasianand Sankaranarayanan]

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 

        gridObj.refreshHeader(); 

        gridObj.refreshContent(); 

    } 

 

</script> 

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

    <e-columns> 

         

       ----------------------         

 

    </e-columns> 

</ej-grid> 

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

 

Sample: http://www.syncfusion.com/downloads/support/forum/129210/ze/ejGrid_Vpaging-2078565513 

Regards, 

Thavasianand S. 

[Jemmy Lu]

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.

EDIT-

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!

[Alan Sangeeth S]

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. 

  

Regards,
Alan Sangeeth S 

[shridhar babu]

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

Following sinppet is getting responce using services:

ngOnInit(){

        this.outputopsService.getAll().subscribe(c => {

    

      

  this.headers=c['Headers'];

         

  this.trends=c['DataArr'];

          

         

 

for (var j = 0; j < this.headers.length; j++) {

 

          

  this.headers[j]={field:this.headers[j],headerText:this.headers[j]

};

            

          

    }        

        

});

     

}

 And i'm passing this response to HTML <ej-grid> table:

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

              <e-columns>

                

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

              </e-columns>

                      

            

</ej-grid>

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"],

"DataArr":[

           {

           "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

              }]

[shridhar babu]

Output table Link

[Thavasianand Sankaranarayanan]

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. 

[grid.component.html] 

<ej-grid [allowPaging]="true" [dataSource]="gridData" > 

    <e-columns> 

        <div *ngFor="let item of items"> 

            <e-column [field]="item.field" [headerText]="item.headerText"></e-column> 

        </div>         

    </e-columns> 

</ej-grid> 

 

---------------- 

 

[grid.component.ts] 

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. 

Sample: http://www.syncfusion.com/downloads/support/forum/129210/ze/angular2-seeds-master463025911 

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.

Regards, 

Thavasianand S. 

[shridhar babu]

Problem solved ,Thanks for swift reply

[Thavasianand Sankaranarayanan]

Hi Shridhar, 

We are happy that the problem has been solved. 

 

Please get back to us if you need any further assistance.  

 

Regards, 

Thavasianand S.