Skip to content

Commit 9605579

Browse files
hanastasovhanastasov
authored
Merge pull request #2992 from IgniteUI/kdragieva/grid-sorting-sample
Add sorting options in grid/tree grid samples
2 parents 78f4469 + 3d35516 commit 9605579

File tree

6 files changed

+78
-55
lines changed

6 files changed

+78
-55
lines changed

‎src/app/grid/grid-sorting-sample/grid-sorting-sample.component.html

Lines changed: 21 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,37 @@
11
<div class="grid__wrapper">
2-
<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
3-
(sortingDone)="removeSorting($event)">
2+
<igx-grid igxPreventDocumentScroll #grid1 [data]="data" [autoGenerate]="false" height="500px" width="100%" sortable="true" [sortingOptions]="sortingOptions">
43
<igx-grid-toolbar>
4+
<button class="button-opitions" igxButton="raised" (click)="grid1.sortingExpressions = []">
5+
Clear Sorting
6+
</button>
7+
8+
<button class="button-opitions" igxButton="raised" (click)="grid1.groupingExpressions = []">
9+
Clear Grouped columns
10+
</button>
511
<igx-grid-toolbar-actions>
6-
<igx-select [(ngModel)]="currentSortingType" (selectionChanging)="sortTypeSelection($event)">
7-
<label igxLabel>Select Sorting Type</label>
8-
<igx-select-item *ngFor="let type of sortingTypes" [value]="type.value">
9-
{{type.name}}
10-
</igx-select-item>
11-
</igx-select>
12+
<igx-select (closed)="grid1.sortingExpressions = []">
13+
<label igxLabel>Select Sorting Type</label>
14+
<igx-select-item (click)="sortingOptions = type.toLocaleLowerCase() ==='single' ? {mode: 'single'} : {mode: 'multiple'}" *ngFor="let type of sortingTypes" [value]="type">
15+
{{type}}
16+
</igx-select-item>
17+
</igx-select>
1218
</igx-grid-toolbar-actions>
13-
1419
</igx-grid-toolbar>
15-
<igx-column field="OrderID" header="Order ID">
20+
21+
<igx-column field="OrderID" header="Order ID" [groupable]="true" sortable="true">
1622
</igx-column>
17-
<igx-column field="CategoryName" header="Category Name" [dataType]="'string'" sortable="true">
23+
<igx-column field="CategoryName" header="Category Name" [dataType]="'string'" [groupable]="true" sortable="true">
1824
</igx-column>
19-
<igx-column field="CompanyName" header="Company Name" [dataType]="'string'" sortable="true">
25+
<igx-column field="CompanyName" header="Company Name" [dataType]="'string'" [groupable]="true" sortable="true">
2026
</igx-column>
21-
<igx-column field="ShipCountry" header="Ship Country" [dataType]="'string'" sortable="true">
27+
<igx-column field="ShipCountry" header="Ship Country" [dataType]="'string'" [groupable]="true" sortable="true">
2228
</igx-column>
23-
<igx-column field="SaleAmount" header="Sale Amount" dataType="number" sortable="true">
29+
<igx-column field="SaleAmount" header="Sale Amount" dataType="number" [groupable]="true" sortable="true">
2430
<ng-template igxCell let-cell="cell" let-val let-row>
2531
${{val}}
2632
</ng-template>
2733
</igx-column>
28-
<igx-column field="ShippedDate" header="Shipped Date" [dataType]="'date'" [formatter]="formatDate"
29-
sortable="true">
34+
<igx-column field="ShippedDate" header="Shipped Date" [dataType]="'date'" [formatter]="formatDate" sortable="true">
3035
</igx-column>
3136
</igx-grid>
3237
</div>

‎src/app/grid/grid-sorting-sample/grid-sorting-sample.component.scss

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,11 @@
22
margin: 0 auto;
33
padding: 16px;
44
}
5+
6+
.igx-grid-toolbar ::ng-deep {
7+
.igx-grid-toolbar__custom-content {
8+
display: flex;
9+
flex-direction: row;
10+
justify-content: flex-start;
11+
}
12+
}

‎src/app/grid/grid-sorting-sample/grid-sorting-sample.component.ts

Lines changed: 5 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,8 @@
11
/* eslint-disable @typescript-eslint/naming-convention */
22
import { Component, OnInit, ViewChild } from '@angular/core';
3-
import { DefaultSortingStrategy, IgxGridComponent, IgxSelectComponent, SortingDirection } from 'igniteui-angular';
3+
import { DefaultSortingStrategy, IgxGridComponent, ISortingOptions, SortingDirection } from 'igniteui-angular';
44
import { DATA } from '../../data/localData';
55

6-
// eslint-disable-next-line no-shadow
7-
enum TYPE {
8-
SINGLE = 'single',
9-
MULTI = 'multiple'
10-
}
116
@Component({
127
selector: 'app-grid-sample',
138
styleUrls: ['./grid-sorting-sample.component.scss'],
@@ -17,16 +12,12 @@ enum TYPE {
1712
export class SortingSampleComponent implements OnInit {
1813
@ViewChild('grid1', { read: IgxGridComponent, static: true })
1914
public grid1: IgxGridComponent;
20-
21-
@ViewChild(IgxSelectComponent)
22-
public igxSelect: IgxSelectComponent;
23-
2415
public data: any[];
25-
public sortingTypes = [{ name: 'Multiple Sort', value: TYPE.MULTI }, { name: 'Single Sort', value: TYPE.SINGLE }];
26-
public currentSortingType: TYPE = TYPE.SINGLE;
16+
public sortingTypes = ['SINGLE', 'MULTIPLE'];
17+
public sortingOptions: ISortingOptions = {mode: 'multiple'};
18+
19+
constructor() { }
2720

28-
constructor() {
29-
}
3021
public ngOnInit(): void {
3122
this.data = DATA;
3223
this.grid1.sortingExpressions = [
@@ -40,18 +31,4 @@ export class SortingSampleComponent implements OnInit {
4031
public formatDate(val: Date) {
4132
return new Intl.DateTimeFormat('en-US').format(val);
4233
}
43-
44-
public removeSorting($event) {
45-
if (this.currentSortingType === TYPE.SINGLE) {
46-
this.grid1.columns.forEach((col) => {
47-
if (!(col.field === $event.fieldName)) {
48-
this.grid1.clearSort(col.field);
49-
}
50-
});
51-
}
52-
}
53-
54-
public sortTypeSelection(event) {
55-
this.grid1.clearSort();
56-
}
5734
}

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

Lines changed: 30 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,43 @@
11
<div class="grid__wrapper" (window:click)="disableContextMenu()">
22
<igx-tree-grid igxPreventDocumentScroll #treegrid1 [data]="data" [autoGenerate]="false" height="500px" width="100%"
3-
primaryKey="ID" foreignKey="ParentID" (contextMenu)="rightClick($event)">
4-
<igx-column field="ID" header="Product ID" [sortable]="true">
3+
primaryKey="ID" foreignKey="ParentID" (contextMenu)="rightClick($event)" [sortingOptions]="sortingOptions">
4+
<igx-grid-toolbar>
5+
<button class="button-opitions" igxButton="raised" (click)="treegrid1.sortingExpressions = []">
6+
Clear Sorting
7+
</button>
8+
9+
<button class="button-opitions" igxButton="raised" (click)="groupArea.expressions = []">
10+
Clear Grouped columns
11+
</button>
12+
<igx-grid-toolbar-actions>
13+
<igx-select (selectionChanging)="treegrid1.sortingExpressions = []">
14+
<label igxLabel>Select Sorting Type</label>
15+
<igx-select-item (click)="sortingOptions = type.toLocaleLowerCase() ==='single' ? {mode: 'single'} : {mode: 'multiple'}" *ngFor="let type of sortingTypes" [value]="type">
16+
{{type}}
17+
</igx-select-item>
18+
</igx-select>
19+
</igx-grid-toolbar-actions>
20+
</igx-grid-toolbar>
21+
22+
<igx-tree-grid-group-by-area
23+
#groupArea
24+
[grid]="treegrid1"
25+
[hideGroupedColumns]="true">
26+
</igx-tree-grid-group-by-area>
27+
28+
<igx-column field="ID" header="Product ID" [groupable]="true" [sortable]="true">
529
</igx-column>
6-
<igx-column field="Name" header="Product Name" [dataType]="'string'" [sortable]="true">
30+
<igx-column field="Name" header="Product Name" [dataType]="'string'" [groupable]="true" [sortable]="true">
731
</igx-column>
8-
<igx-column field="UnitPrice" header="Unit Price" dataType="number" [sortable]="true">
32+
<igx-column field="UnitPrice" header="Unit Price" dataType="number" [groupable]="true" [sortable]="true">
933
<ng-template igxCell let-cell="cell" let-val>
1034
<span *ngIf="cell.row.data.UnitPrice === 0">-</span>
1135
<span *ngIf="cell.row.data.UnitPrice !== 0">${{val}}</span>
1236
</ng-template>
1337
</igx-column>
14-
<igx-column field="AddedDate" header="Added Date" [dataType]="'date'" [formatter]="formatDate" [sortable]="true">
38+
<igx-column field="AddedDate" header="Added Date" [dataType]="'date'" [formatter]="formatDate" [groupable]="true" [sortable]="true">
1539
</igx-column>
16-
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [sortable]="true">
40+
<igx-column field="Discontinued" header="Discontinued" [dataType]="'boolean'" [groupable]="true" [sortable]="true">
1741
<ng-template igxCell let-cell="cell" let-val>
1842
<span *ngIf="cell.row.data.UnitPrice === 0">-</span>
1943
<img *ngIf="cell.row.data.UnitPrice !== 0 && val" src="assets/images/grid/active.png" title="Continued" alt="Continued" />

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

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,11 @@
22
margin: 0 16px;
33
padding-top: 16px;
44
}
5+
6+
.igx-grid-toolbar ::ng-deep {
7+
.igx-grid-toolbar__custom-content {
8+
display: flex;
9+
flex-direction: row;
10+
justify-content: flex-start;
11+
}
12+
}

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

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Component, OnInit, ViewChild } from '@angular/core';
2-
import { DefaultSortingStrategy, IgxTreeGridComponent, SortingDirection } from 'igniteui-angular';
2+
import { DefaultSortingStrategy, IgxTreeGridComponent, ISortingOptions, SortingDirection } from 'igniteui-angular';
33
import { FOODS_DATA } from '../data/foods';
44

55
@Component({
@@ -12,14 +12,15 @@ export class TreeGridSortingSampleComponent implements OnInit {
1212
@ViewChild('treegrid1', { read: IgxTreeGridComponent, static: true })
1313
public treegrid1: IgxTreeGridComponent;
1414
public data: any[];
15-
1615
public contextmenu = false;
1716
public contextmenuX = 0;
1817
public contextmenuY = 0;
1918
public clickedCell = null;
19+
public sortingOptions: ISortingOptions = {mode: 'multiple'};
20+
public sortingTypes = ['SINGLE', 'MULTIPLE'];
21+
22+
constructor() { }
2023

21-
constructor() {
22-
}
2324
public ngOnInit(): void {
2425
this.data = FOODS_DATA();
2526
this.treegrid1.sortingExpressions = [
@@ -42,5 +43,5 @@ export class TreeGridSortingSampleComponent implements OnInit {
4243

4344
public disableContextMenu() {
4445
this.contextmenu = false;
45-
}
46+
}
4647
}

0 commit comments

Comments
 (0)