Skip to content

Commit 8ad74ec

Browse files
DiyanDimitrovDiyanDimitrov
authored
Merge pull request #1338 from IgniteUI/ddimitrov/fix-1328
Fix styles in the TreeGrid Child Summaries sample
2 parents 3ed72a6 + 692e341 commit 8ad74ec

File tree

3 files changed

+20
-168
lines changed

3 files changed

+20
-168
lines changed

‎src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.html‎

Lines changed: 18 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -6,46 +6,21 @@
66
<igx-buttongroup [values]="summaryPositions" (onSelect)="selectSummaryPosition($event)"></igx-buttongroup>
77
</div>
88

9-
<div class="grid__wrapper">
10-
<igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="600px" width="100%"
11-
primaryKey="ID" foreignKey="ParentID">
12-
<igx-column #col field="ID" header="Product ID" [sortable]="true">
13-
</igx-column>
14-
<igx-column #col field="Name" header="Product Name" [hasSummary]="true">
15-
<ng-template igxCell let-cell="cell" let-val>
16-
{{ val }}
17-
</ng-template>
18-
<ng-template igxHeader let-col>
19-
<div class="text">{{col.field}}</div>
20-
<igx-icon class="header-icon" color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
21-
</ng-template>
22-
</igx-column>
23-
<igx-column #col field="UnitPrice" header="Price" [filterable]="false" editable="true" dataType="number"
24-
[hasSummary]="true" [summaries]="priceSummary">
25-
<ng-template igxCell let-cell="cell" let-val let-row>
26-
${{ val }}
27-
</ng-template>
28-
<ng-template igxHeader let-col>
29-
<div class="text">Price</div>
30-
<igx-icon class="header-icon" color="{{ col.hasSummary ? '#e41c77' : '' }}" (click)="toggleSummary(col)">functions</igx-icon>
31-
</ng-template>
32-
</igx-column>
33-
<igx-column #col field="Discontinued" header="Discontinued" [dataType]="'boolean'">
34-
<ng-template igxCell let-cell="cell" let-val>
35-
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
36-
<img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
37-
</ng-template>
38-
<ng-template igxHeader let-col>
39-
<div class="text">{{ col.field }}</div>
40-
</ng-template>
41-
</igx-column>
42-
<igx-column #col field="AddedDate" header="Added Date" [dataType]="'date'">
43-
<ng-template igxCell let-cell="cell" let-val let-row>
44-
{{ val | date: 'MMM d, yyyy' }}
45-
</ng-template>
46-
<ng-template igxHeader let-col>
47-
<div class="text">Added Date</div>
48-
</ng-template>
49-
</igx-column>
50-
</igx-tree-grid>
51-
</div>
9+
<igx-tree-grid #treegrid1 [data]="data" [autoGenerate]="false" height="600px" width="100%"
10+
primaryKey="ID" foreignKey="ParentID">
11+
<igx-column #col field="ID" header="Product ID" [sortable]="true">
12+
</igx-column>
13+
<igx-column #col field="Name" header="Product Name" [hasSummary]="true">
14+
</igx-column>
15+
<igx-column #col field="UnitPrice" header="Price" [formatter]="formatCurrency" [filterable]="false" editable="true" dataType="number"
16+
[hasSummary]="true" [summaries]="avgSummary">
17+
</igx-column>
18+
<igx-column #col field="Discontinued" header="Discontinued" [dataType]="'boolean'">
19+
<ng-template igxCell let-cell="cell" let-val>
20+
<img *ngIf="val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />
21+
<img *ngIf="!val" src="assets/images/grid/expired.png" title="Discontinued" alt="Discontinued" />
22+
</ng-template>
23+
</igx-column>
24+
<igx-column #col field="AddedDate" header="Added Date" [dataType]="'date'">
25+
</igx-column>
26+
</igx-tree-grid>

‎src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.scss‎

Lines changed: 0 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,3 @@
1-
.grid-controls {
2-
display: flex;
3-
flex-flow: column nowrap;
4-
justify-content: space-between;
5-
margin: 0 16px 24px;
6-
7-
igx-switch {
8-
margin-top: 24px;
9-
}
10-
11-
}
12-
13-
.grid__wrapper {
14-
margin: 0 16px;
15-
}
16-
17-
.header {
18-
height: 100%;
19-
}
20-
21-
.igx-grid__th .title{
22-
width: 100%;
23-
cursor: auto;
24-
}
25-
26-
@media screen and (max-width: 677px){
27-
28-
[class*=header-icon]{
29-
padding-bottom: 17px;
30-
padding-top: 17px;
31-
font-size: 1.4em;
32-
width: 1.1em;
33-
height: 1.1em;
34-
float: right;
35-
}
36-
[class*=text]{
37-
float:left;
38-
white-space: nowrap;
39-
overflow: hidden;
40-
text-overflow: ellipsis;
41-
width: 50%;
42-
}
43-
}
44-
45-
@media screen and (min-width: 677px){
46-
47-
[class*=header-icon]{
48-
padding-top: 17px;
49-
font-size: 1.4em;
50-
width: 1.1em;
51-
height: 1.1em;
52-
float: right;
53-
}
54-
55-
[class*=text] {
56-
float:left;
57-
white-space: nowrap;
58-
overflow: hidden;
59-
text-overflow: ellipsis;
60-
width: 50%;
61-
}
62-
}
63-
64-
@media screen and (min-width: 992px){
65-
66-
[class*=header-icon] {
67-
padding-top: 17px;
68-
font-size: 1.4em;
69-
width: 1.1em;
70-
height: 1.1em;
71-
float: right;
72-
margin-right: 10px;
73-
cursor: pointer;
74-
}
75-
76-
[class*=text] {
77-
float:left;
78-
white-space: nowrap;
79-
width: 50%;
80-
cursor: auto;
81-
}
82-
}
83-
841
:host {
852
display: block;
863
padding: 8px;

‎src/app/tree-grid/tree-grid-summary2-sample/tree-grid-summary2-sample.component.ts‎

Lines changed: 2 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -31,25 +31,7 @@ class AvgSummary extends IgxSummaryOperand {
3131
}
3232
}
3333

34-
class SumSummary extends IgxSummaryOperand {
35-
36-
constructor() {
37-
super();
38-
}
39-
40-
public operate(data?: any[]): IgxSummaryResult[] {
41-
const result = [];
42-
result.push({
43-
key: "sum",
44-
label: "Sum",
45-
summaryResult: IgxNumberSummaryOperand.sum(data)
46-
});
47-
return result;
48-
}
49-
}
50-
5134
@Component({
52-
encapsulation: ViewEncapsulation.None,
5335
selector: "app-tree-grid-summary2-sample",
5436
styleUrls: ["./tree-grid-summary2-sample.component.scss"],
5537
templateUrl: "./tree-grid-summary2-sample.component.html"
@@ -62,14 +44,11 @@ export class TreeGridSummary2SampleComponent implements OnInit {
6244

6345
public expr: ISortingExpression[];
6446
public avgSummary = AvgSummary;
65-
public sumSummary = SumSummary;
6647
public summaryPositions;
6748
public summaryPosition = GridSummaryPosition.bottom;
6849
public summaryCalcModes;
6950
public summaryCalculationMode = GridSummaryCalculationMode.rootAndChildLevels;
7051

71-
public priceSummary = CustomPriceSummary;
72-
7352
constructor() {
7453
this.data = FOODS_DATA();
7554
this.expr = [
@@ -133,26 +112,7 @@ export class TreeGridSummary2SampleComponent implements OnInit {
133112
this.grid1.summaryCalculationMode = this.summaryCalculationMode;
134113
}
135114

136-
public toggleSummary(column: IgxColumnComponent) {
137-
column.hasSummary = !column.hasSummary;
138-
}
139-
}
140-
141-
export class CustomPriceSummary extends IgxNumberSummaryOperand {
142-
143-
constructor() {
144-
super();
145-
}
146-
147-
public operate(data?: any[]): IgxSummaryResult[] {
148-
const result = [];
149-
result.push(
150-
{
151-
key: "average",
152-
label: "average",
153-
summaryResult: data.length ? IgxNumberSummaryOperand.average(data).toFixed(2) : null
154-
}
155-
);
156-
return result;
115+
public formatCurrency(value: number) {
116+
return "$" + value.toFixed(2);
157117
}
158118
}

0 commit comments

Comments
 (0)