Skip to content

Commit 1a2f7b9

Browse files
kacheshmarovakacheshmarova
authored
Merge pull request #3574 from IgniteUI/ganastasov/disabled-summaries-3572
feat(summaries): add disable summaries samples
2 parents 6042681 + a8038c1 commit 1a2f7b9

18 files changed

Lines changed: 1301 additions & 0 deletions

‎src/app/grid/grid-disable-summaries/grid-disable-summaries.component.html‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
<div class="grid-wrapper">
2+
<div class="summaries">
3+
<h5 class="summaries-title">Disable Summaries for Column:</h5>
4+
<ng-container *ngFor="let column of columns; let i = index">
5+
<div class="summary-column-button">
6+
<button
7+
#toggleButton
8+
igxButton="outlined"
9+
(click)="toggle(i)"
10+
>
11+
{{ column.label }} ({{ getCheckedSummariesCount(column.summaries) }})
12+
</button>
13+
<div igxToggle>
14+
<div class="summaries-dropdown">
15+
<div>
16+
<p class="summaries-dropdown-title">
17+
Disabled Summaries
18+
</p>
19+
</div>
20+
21+
<div class="summaries-dropdown-items">
22+
<igx-checkbox
23+
*ngFor="let summary of column.summaries; let i = index"
24+
class="summaries-dropdown-item"
25+
[checked]="summary.checked"
26+
(change)="toggleCheckbox($event, i, column)"
27+
>
28+
{{ summary.summaryLabel }}
29+
</igx-checkbox>
30+
</div>
31+
32+
<div class="summaries-dropdown-buttons">
33+
<button igxButton="flat"
34+
[disabled]="getCheckedSummariesCount(column.summaries) === column.summaries.length"
35+
(click)="checkAllColumns(column)"
36+
>
37+
Disable All
38+
</button>
39+
<button igxButton="flat"
40+
[disabled]="getCheckedSummariesCount(column.summaries) === 0"
41+
(click)="uncheckAllColumns(column)"
42+
>
43+
Enable All
44+
</button>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</ng-container>
50+
</div>
51+
<igx-grid
52+
[igxPreventDocumentScroll]="true"
53+
#grid1
54+
[data]="data"
55+
[autoGenerate]="false"
56+
height="700px"
57+
width="100%"
58+
>
59+
<igx-column
60+
field="ProductID"
61+
header="Product ID"
62+
[hasSummary]="true"
63+
></igx-column>
64+
<igx-column
65+
field="ProductName"
66+
header="Product Name"
67+
[hasSummary]="true"
68+
>
69+
</igx-column>
70+
<igx-column
71+
field="UnitPrice"
72+
header="Unit Price"
73+
dataType="number"
74+
[hasSummary]="true"
75+
>
76+
</igx-column>
77+
<igx-column
78+
field="UnitsInStock"
79+
header="Units In Stock"
80+
dataType="number"
81+
[hasSummary]="true"
82+
[summaries]="unitsInStockSummary"
83+
>
84+
</igx-column>
85+
<igx-column
86+
field="Discontinued"
87+
header="Discontinued"
88+
[dataType]="'boolean'"
89+
[hasSummary]="true"
90+
[summaries]="discontinuedSummary"
91+
>
92+
</igx-column>
93+
<igx-column
94+
field="OrderDate"
95+
header="Order Date"
96+
[dataType]="'date'"
97+
[hasSummary]="true"
98+
>
99+
</igx-column>
100+
</igx-grid>
101+
</div>

‎src/app/grid/grid-disable-summaries/grid-disable-summaries.component.scss‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
.grid-wrapper {
2+
margin: 0 auto;
3+
padding: 16px;
4+
5+
.summaries {
6+
margin-bottom: 1rem;
7+
display: flex;
8+
align-items: center;
9+
flex-wrap: wrap;
10+
11+
&-title {
12+
margin: 0 0 1rem 0;
13+
flex-basis: 100%;
14+
}
15+
16+
.summary-column-button {
17+
margin-right: 1rem;
18+
margin-bottom: 0.5rem;
19+
}
20+
}
21+
}
22+
23+
.summaries-dropdown {
24+
background-color: white;
25+
border: 1px solid #e0e0e0;
26+
border-radius: 8px;
27+
28+
&-title {
29+
color: #40B3FF;
30+
margin: 0.5rem 1.1rem;
31+
}
32+
33+
&-items {
34+
display: flex;
35+
flex-direction: column;
36+
37+
.summaries-dropdown-item {
38+
display: flex;
39+
align-items: center;
40+
padding: 0 1rem;
41+
}
42+
}
43+
44+
&-buttons {
45+
display: flex;
46+
justify-content: space-between;
47+
padding: 0.2rem;
48+
}
49+
}

0 commit comments

Comments
 (0)