column template dynamically

[Ameet]

I have some columns that have formulas stored in the database. The formulas are brought from the database. How can I assign it to either valueAccessor or template?

My code somewhat like this -

{ field: 'PY3YearAvgTotalHrs', headerText: 'Total Hrs', minWidth: 75, format: "#,###;(#,###);-0" },

            {

              field: 'PY3YearAvgTotalProd', headerText: 'Total Prod', minWidth: 75, format: "#,###;(#,###);-0"

            },

            {

              field: 'PY3YearAvgTotalOrig', headerText: 'Total Orig', minWidth: 75, type: "number", format: "#,###;(#,###);-0"

            },

            {

              headerText: 'Total Testing', minWidth: 75, type: "number", format: "#,###;(#,###);-0", template: "<span>{{:PY3YearAvgTotalOrig + :PY3YearAvgTotalProd}}</span>"

            }

Your help is greatly appreciated.

Thanks,

Ameet

[Venkatesh Ayothi Raman]

  

Hi Ameet, 

 

 

Thanks for using Syncfusion products. 

 

As from your query, we suspect that would you like to calculate the two columns value using column template feature. We went through your code example and found that template syntax is wrong. Please refer to the following code example, 

 

Solution for rendered the columns in ts like in your code example, 

 

[ts file] 

 

this.cols = [. .  . 

            { 

              headerText: 'Total Testing', minWidth: 75, type: "number",  template: "${format(data)}"}]; 

 

(window as expression).format = (value: any) => { 

   

    return value.Freight + value.OrderID; 

}; 

 

interface expression extends Window { 

    format?: Function; 

} 

 

 

 

Sample: https://stackblitz.com/edit/angular-q5dbtg-p44zts?file=sorting.component.ts 

 

 

Angular way: 

<ejs-grid #grid [dataSource]='data'> 

        <e-columns> 

            <e-column headerText='Employee Image' width='150' textAlign='Center'> 

                <ng-template #template let-data> 

                    {{data.EmployeeID + data.EmployeeID }} 

                                </ng-template> 

            </e-column> 

             ..  . 

        </e-columns> 

 

    </ejs-grid> 

 

 

 

Sample: https://stackblitz.com/edit/angular-aunfj6?file=columntemplate.html 

 

Another way: using valueAccessor function 

 

We can customize the grid display value using ValueAccessor property instead of column template feature. Please refer to the following code example, sample and Help documentation, 

Code example: 

 

<ejs-grid #grid class="sortingenabled" [dataSource]='data' allowPaging='true' [pageSettings]='pageSettings'> 

        <e-columns> 

             

            <e-column field='Freight' headerText='Freight + OrderID' width='170' [valueAccessor]='valueAccess'></e-column> 

              .. .             

        </e-columns> 

    </ejs-grid> 

 

 

 

[ts file] 

public valueAccess = (field: string, data: Object, column: Object) => { 

        return (data as any).Freight + (data as any).OrderID; 

    } 

 

 

Sample: https://stackblitz.com/edit/angular-q5dbtg-bfgbpy?file=sorting.component.ts 

 

 

Help documentation: https://ej2.syncfusion.com/angular/documentation/grid/columns.html#expression-column 

https://ej2.syncfusion.com/angular/documentation/grid/columns.html#display-array-type-columns 

 

 

Regards, 

Venkatesh Ayothiraman.