CODEWITHSUNDEEP
angulartypescriptkendo-uikendo-grid
Pradip Talaviya
Pradip Talaviya

Reputation: 409

How can Two or more columns sum and display in third column

Seen following image as an mark data i want two columns data sum and generate in new column to display it. How can it possible in Kendo for Angular 4. enter image description here

Upvotes: 3

Views: 1803

Answers (1)

Marius Orha
Marius Orha

Reputation: 670

Create a new computed property for your data model, that will return the sum of the needed properties.

export class DataModel {
    a: number;
    b: number;
    get sum() {
      return this.a + this.b;
    }
}

Then, add a column as you added for the other properties.

Or, use template property provided by Kendo.

Version 1:

columns: [{
            field: "PropA",
            title: "Prop A"
          },
          {
            field: "PropB",
            title: "Prop B"
          },
          {
            field: "Sum",
            template: "{{dataItem.PropA + dataItem.PropB}}"
          }]

Version 2:

    <kendo-grid [data]="gridData">
        <kendo-grid-column field="PropA" title="PropA"></kendo-grid-column>
        <kendo-grid-column field="PropB" title="PropB"></kendo-grid-column>
        <kendo-grid-column field="Sum" title="Sum">
            <ng-template kendoGridCellTemplate let-dataItem>
                 {{dataItem.PropA + dataItem.PropB}}
            </ng-template>
        </kendo-grid-column>
    </kendo-grid>

Upvotes: 4

Related Questions