Grid refresh issue

[Manu]

Hello, 

I'm trying to refresh the grid with new dataSource (containing new column and content), by calling the refresh method.

However the grid header is not getting refreshed, but the content gets refreshed

Please check the attached sample

https://plnkr.co/edit/Tl6DlKhrkh0ITubMEL5B?p=preview

[Dhivya Rajendran]

Hi Manu, 

Thanks for contacting Syncfusion support, 

We have analyzed your requirement and modified the provided sample using property binding the columns property instead of using column directive. For dynamic column changing, please use property binding instead of column directives. Kindly refer to the below code example and sample for more information. 

[component.html] 

<div class="control-section"> 

    <ejs-grid #grid [dataSource]='data' height='350' [columns] ='fieldName'> 

    </ejs-grid> 

</div> 

Sample: https://plnkr.co/edit/Dz1XLCtfq9leaeLmq5rX?p=preview  

Help Documentation:  https://ej2.syncfusion.com/16.1.32/angular/documentation/grid/api-gridComponent.html#columns 

Please get back to us if you need further assistance. 

Regards, 

R.Dhivya 

[Manu]

In this case, how do I add all the properties for the column (like , headerText, clipMode, textAlign, width etc)

For example:

<e-column field='file_name' headerText='File Name' clipMode='EllipsisWithTooltip' textAlign='Center' width=auto>

[Dhivya Rajendran]

Hi Manu, 

Thanks for your update, 

We have analyzed your requirement and modified the sample. In the below sample, we have created columns collection from field names with width, clipMode, and other specified property also. Then dynamically applied the property to the columns property of grid. Kindly refer to the below code example and sample for more information. 

[component.ts] 

export class DefaultComponent implements OnInit { 

    ngOnInit(): void { 

        this.data = stringData; 

        this.fieldName = Object.keys(stringData[0]); 

    } 

     

    test() { 

        let stringData1 = [ 

         { 

            "OrderID":10248123, 

            "CustomerName":"VINETEEEEL", 

         }]; 

         

        this.fields = ["OrderID", "CustomerName"]; 

        let cols= []; 

        for (var field of this.fields) { 

             cols.push({'field': field, 'headerText': 'File Name', 'width':'auto', 'clipMode': 'EllipsisWithTooltip', 'textAlign':'Center'}); 

        } 

        this.fieldName = cols;           

        this.data = stringData1; 

    } 

Sample : https://plnkr.co/edit/25NbThGrraa7WCX8OPIf?p=preview  

Please get back to us if you need further assistance. 

Regards, 

R.Dhivya 

[Martin]

This works fine, but would never found this in the help.

What property do I use for formatting the content of the cell (see below i need to give it a style depending on the value of the field.?

<e-column headerText="Risk Rating" field="riskLevel" textAlign="center" width="120">

<ng-template #template let-data>

<div class="qr-detail">

<div class="pill-small {{ data.riskLevel | lowercase }}">

{{ data.riskLevel }}</div>

</div>

</ng-template>

</e-column>

[Balaji Sekar]

Hi Manu,  

 

Greetings from syncfusion support 

 

Query : what property should use to format the content of the cell depending on some condition. 

 

To overcome from this requirement, we suggest you to follow the below documentation link. In the documentation, cells are customized in the querycellinfo event. In that event, the customization is given to the cells, based on some condition of the field values. 

 

Documentation link : https://ej2.syncfusion.com/angular/documentation/grid/cell/?no-cache=1#customize-cell-styles 

Api link :   https://ej2.syncfusion.com/angular/documentation/api/grid/?no-cache=1#querycellinfo 

 

 

Please get back to us if you need further assistance 

 

Regards 

Balaji Sekar.