Skip to content

Commit 9a99ca0

Browse files
ghiscoding-SEghiscoding-SE
committed
feat(sorting): provide method to apply grid sorting dynamically
1 parent 6952a00 commit 9a99ca0

13 files changed

+132
-44
lines changed

‎src/app/examples/grid-clientside.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ <h2>{{title}}</h2>
1212
<button class="btn btn-default btn-sm" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
1313
Set Filters Dynamically
1414
</button>
15+
<button class="btn btn-default btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
16+
Set Sorting Dynamically
17+
</button>
1518

1619
<angular-slickgrid gridId="grid4" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"
1720
[dataset]="dataset" (onAngularGridCreated)="angularGridReady($event)"

‎src/app/examples/grid-clientside.component.ts

+9-1
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,7 @@ export class GridClientSideComponent implements OnInit {
184184
// use columnDef searchTerms OR use presets as shown below
185185
presets: {
186186
filters: [
187-
{ columnId: 'duration', searchTerms: [10, 220] },
187+
{ columnId: 'duration', searchTerms: [10, 98] },
188188
// { columnId: 'complete', searchTerms: ['5'], operator: '>' },
189189
{ columnId: 'usDateShort', operator: '<', searchTerms: ['4/20/25'] },
190190
// { columnId: 'effort-driven', searchTerms: [true] },
@@ -259,6 +259,14 @@ export class GridClientSideComponent implements OnInit {
259259
]);
260260
}
261261

262+
setSortingDynamically() {
263+
this.angularGrid.sortService.updateSorting([
264+
// orders matter, whichever is first in array will be the first sorted column
265+
{ columnId: 'duration', direction: 'ASC' },
266+
{ columnId: 'start', direction: 'DESC' },
267+
]);
268+
}
269+
262270
refreshMetrics(e, args) {
263271
if (args && args.current >= 0) {
264272
setTimeout(() => {

‎src/app/examples/grid-draggrouping.component.html

+4
Original file line numberDiff line numberDiff line change
@@ -37,9 +37,13 @@ <h2>{{title}}</h2>
3737
<button class="btn btn-default btn-xs" (click)="groupByDurationEffortDriven()">
3838
Group by Duration then Effort-Driven
3939
</button>
40+
|
4041
<button class="btn btn-default btn-xs" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
4142
Set Filters Dynamically
4243
</button>
44+
<button class="btn btn-default btn-xs" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
45+
Set Sorting Dynamically
46+
</button>
4347
</div>
4448
<div class="col-sm-12">
4549
<br>

‎src/app/examples/grid-draggrouping.component.ts

+12-5
Original file line numberDiff line numberDiff line change
@@ -361,16 +361,23 @@ export class GridDraggableGroupingComponent implements OnInit {
361361
return index;
362362
}
363363

364-
toggleDraggableGroupingRow() {
365-
this.clearGrouping();
366-
this.gridObj.setPreHeaderPanelVisibility(!this.gridObj.getOptions().showPreHeaderPanel);
367-
}
368-
369364
setFiltersDynamically() {
370365
// we can Set Filters Dynamically (or different filters) afterward through the FilterService
371366
this.angularGrid.filterService.updateFilters([
372367
{ columnId: 'percentComplete', operator: '>=', searchTerms: ['55'] },
373368
{ columnId: 'cost', operator: '<', searchTerms: ['80'] },
374369
]);
375370
}
371+
372+
setSortingDynamically() {
373+
this.angularGrid.sortService.updateSorting([
374+
// orders matter, whichever is first in array will be the first sorted column
375+
{ columnId: 'percentComplete', direction: 'ASC' },
376+
]);
377+
}
378+
379+
toggleDraggableGroupingRow() {
380+
this.clearGrouping();
381+
this.gridObj.setPreHeaderPanelVisibility(!this.gridObj.getOptions().showPreHeaderPanel);
382+
}
376383
}

‎src/app/examples/grid-graphql.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,9 @@ <h2>{{title}}</h2>
3737
<button class="btn btn-default btn-xs" data-test="goto-last-page" (click)="goToLastPage()">
3838
<i class="fa fa-caret-right fa-lg"></i>
3939
</button>
40+
<button class="btn btn-default btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
41+
Set Sorting Dynamically
42+
</button>
4043
</div>
4144
</div>
4245
<div class="col-sm-7">

‎src/app/examples/grid-graphql.component.ts

+8
Original file line numberDiff line numberDiff line change
@@ -286,6 +286,14 @@ export class GridGraphqlComponent implements OnInit, OnDestroy {
286286
]);
287287
}
288288

289+
setSortingDynamically() {
290+
this.angularGrid.sortService.updateSorting([
291+
// orders matter, whichever is first in array will be the first sorted column
292+
{ columnId: 'billingAddressZip', direction: 'DESC' },
293+
{ columnId: 'company', direction: 'ASC' },
294+
]);
295+
}
296+
289297
switchLanguage() {
290298
this.selectedLanguage = (this.selectedLanguage === 'en') ? 'fr' : 'en';
291299
this.translate.use(this.selectedLanguage);

‎src/app/examples/grid-odata.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,9 @@ <h2>{{title}}</h2>
4949
<button class="btn btn-default btn-xs" data-test="goto-last-page" (click)="goToLastPage()">
5050
<i class="fa fa-caret-right fa-lg"></i>
5151
</button>
52+
<button class="btn btn-default btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
53+
Set Sorting Dynamically
54+
</button>
5255
</div>
5356

5457
<angular-slickgrid gridId="grid5" [columnDefinitions]="columnDefinitions" [gridOptions]="gridOptions"

‎src/app/examples/grid-odata.component.ts

+6
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,12 @@ export class GridOdataComponent implements OnInit {
170170
]);
171171
}
172172

173+
setSortingDynamically() {
174+
this.angularGrid.sortService.updateSorting([
175+
{ columnId: 'name', direction: 'DESC' },
176+
]);
177+
}
178+
173179
/** This function is only here to mock a WebAPI call (since we are using a JSON file for the demo)
174180
* in your case the getCustomer() should be a WebAPI function returning a Promise
175181
*/

‎src/app/examples/grid-range.component.html

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ <h2>{{title}}</h2>
1212
<button class="btn btn-default btn-sm" data-test="set-dynamic-filter" (click)="setFiltersDynamically()">
1313
Set Filters Dynamically
1414
</button>
15+
<button class="btn btn-default btn-sm" data-test="set-dynamic-sorting" (click)="setSortingDynamically()">
16+
Set Sorting Dynamically
17+
</button>
1518
<button class="btn btn-default btn-sm" (click)="switchLanguage()" data-test="language">
1619
<i class="fa fa-language"></i>
1720
Switch Language

‎src/app/examples/grid-range.component.ts

+13-5
Original file line numberDiff line numberDiff line change
@@ -224,11 +224,6 @@ export class GridRangeComponent implements OnInit {
224224
}
225225
}
226226

227-
switchLanguage() {
228-
const nextLocale = (this.selectedLanguage === 'en') ? 'fr' : 'en';
229-
this.translate.use(nextLocale).subscribe(() => this.selectedLanguage = nextLocale);
230-
}
231-
232227
setFiltersDynamically() {
233228
const presetLowestDay = moment().add(-5, 'days').format('YYYY-MM-DD');
234229
const presetHighestDay = moment().add(25, 'days').format('YYYY-MM-DD');
@@ -240,4 +235,17 @@ export class GridRangeComponent implements OnInit {
240235
{ columnId: 'finish', operator: 'RangeInclusive', searchTerms: [presetLowestDay, presetHighestDay] },
241236
]);
242237
}
238+
239+
setSortingDynamically() {
240+
this.angularGrid.sortService.updateSorting([
241+
// orders matter, whichever is first in array will be the first sorted column
242+
{ columnId: 'start', direction: 'DESC' },
243+
{ columnId: 'complete', direction: 'ASC' },
244+
]);
245+
}
246+
247+
switchLanguage() {
248+
const nextLocale = (this.selectedLanguage === 'en') ? 'fr' : 'en';
249+
this.translate.use(nextLocale).subscribe(() => this.selectedLanguage = nextLocale);
250+
}
243251
}

‎src/app/modules/angular-slickgrid/services/__tests__/filter.service.spec.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -936,7 +936,7 @@ describe('FilterService', () => {
936936
service.bindLocalOnFilter(gridStub, dataViewStub);
937937
service.updateFilters([{ columnId: 'firstName', searchTerms: ['John'] }]);
938938
} catch (e) {
939-
expect(e.toString()).toContain('[Angular-Slickgrid] in order to use "updateFilters" method, you need to have Filters defined in your grid');
939+
expect(e.toString()).toContain('[Angular-Slickgrid] in order to use "updateFilters" method, you need to have Filterable Columns defined in your grid');
940940
done();
941941
}
942942
});

‎src/app/modules/angular-slickgrid/services/filter.service.ts

+5-4
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,8 @@
11
import { Injectable } from '@angular/core';
2+
import { Subject } from 'rxjs';
3+
import * as isequal_ from 'lodash.isequal';
4+
const isequal = isequal_; // patch to fix rollup to work
5+
26
import {
37
Column,
48
ColumnFilter,
@@ -23,9 +27,6 @@ import { getDescendantProperty } from './utilities';
2327
import { FilterConditions } from './../filter-conditions';
2428
import { FilterFactory } from '../filters/filterFactory';
2529
import { SharedService } from './shared.service';
26-
import { Subject } from 'rxjs';
27-
import * as isequal_ from 'lodash.isequal';
28-
const isequal = isequal_; // patch to fix rollup to work
2930

3031
// using external non-typed js libraries
3132
declare var Slick: any;
@@ -476,7 +477,7 @@ export class FilterService {
476477

477478
updateFilters(filters: CurrentFilter[]) {
478479
if (!this._filtersMetadata || this._filtersMetadata.length === 0 || !this._gridOptions || !this._gridOptions.enableFiltering) {
479-
throw new Error('[Angular-Slickgrid] in order to use "updateFilters" method, you need to have Filters defined in your grid and "enableFiltering" set in your Grid Options');
480+
throw new Error('[Angular-Slickgrid] in order to use "updateFilters" method, you need to have Filterable Columns defined in your grid and "enableFiltering" set in your Grid Options');
480481
}
481482

482483
if (Array.isArray(filters)) {

‎src/app/modules/angular-slickgrid/services/sort.service.ts

+62-28
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { Subject } from 'rxjs';
2+
13
import {
24
Column,
35
ColumnSort,
@@ -10,10 +12,9 @@ import {
1012
SortDirectionNumber,
1113
SortDirectionString,
1214
} from './../models/index';
13-
import { executeBackendCallback } from './backend-utilities';
15+
import { executeBackendCallback, refreshBackendDataset } from './backend-utilities';
1416
import { getDescendantProperty } from './utilities';
1517
import { sortByFieldType } from '../sorters/sorterUtilities';
16-
import { Subject } from 'rxjs';
1718

1819
// using external non-typed js libraries
1920
declare var Slick: any;
@@ -188,32 +189,9 @@ export class SortService {
188189
* @param dataView
189190
*/
190191
loadLocalGridPresets(grid: any, dataView: any) {
191-
const sortCols: ColumnSort[] = [];
192-
this._currentLocalSorters = []; // reset current local sorters
193-
if (this._gridOptions && this._gridOptions.presets && this._gridOptions.presets.sorters) {
194-
const sorters = this._gridOptions.presets.sorters;
195-
196-
sorters.forEach((presetSorting: CurrentSorter) => {
197-
const gridColumn = this._columnDefinitions.find((col: Column) => col.id === presetSorting.columnId);
198-
if (gridColumn) {
199-
sortCols.push({
200-
columnId: gridColumn.id,
201-
sortAsc: ((presetSorting.direction.toUpperCase() === SortDirection.ASC) ? true : false),
202-
sortCol: gridColumn
203-
});
204-
205-
// keep current sorters
206-
this._currentLocalSorters.push({
207-
columnId: gridColumn.id + '',
208-
direction: presetSorting.direction.toUpperCase() as SortDirectionString
209-
});
210-
}
211-
});
212-
213-
if (sortCols.length > 0) {
214-
this.onLocalSortChanged(grid, dataView, sortCols);
215-
grid.setSortColumns(sortCols); // use this to add sort icon(s) in UI
216-
}
192+
const sorters = this._gridOptions && this._gridOptions.presets && this._gridOptions.presets.sorters;
193+
if (Array.isArray(sorters)) {
194+
this.loadGridSorting(sorters);
217195
}
218196
}
219197

@@ -288,4 +266,60 @@ export class SortService {
288266
}
289267
return SortDirectionNumber.neutral;
290268
}
269+
270+
updateSorting(sorters: CurrentSorter[]) {
271+
if (!this._gridOptions || !this._gridOptions.enableSorting) {
272+
throw new Error('[Angular-Slickgrid] in order to use "updateSorting" method, you need to have Sortable Columns defined in your grid and "enableSorting" set in your Grid Options');
273+
}
274+
275+
const backendApi = this._gridOptions && this._gridOptions.backendServiceApi;
276+
277+
if (backendApi) {
278+
const backendApiService = backendApi && backendApi.service;
279+
if (backendApiService) {
280+
backendApiService.updateSorters(undefined, sorters);
281+
refreshBackendDataset(this._gridOptions);
282+
this.emitSortChanged(EmitterType.remote);
283+
}
284+
} else {
285+
this.loadGridSorting(sorters);
286+
this.emitSortChanged(EmitterType.local);
287+
}
288+
}
289+
290+
// --
291+
// private functions
292+
// -------------------
293+
294+
/** Load a defined Sort into the grid */
295+
private loadGridSorting(sorters: CurrentSorter[]): ColumnSort[] {
296+
this._currentLocalSorters = []; // reset current local sorters
297+
const sortCols: ColumnSort[] = [];
298+
299+
if (Array.isArray(sorters)) {
300+
sorters.forEach((presetSorting: CurrentSorter) => {
301+
const gridColumn = this._columnDefinitions.find((col: Column) => col.id === presetSorting.columnId);
302+
if (gridColumn) {
303+
sortCols.push({
304+
columnId: gridColumn.id,
305+
sortAsc: ((presetSorting.direction.toUpperCase() === SortDirection.ASC) ? true : false),
306+
sortCol: gridColumn
307+
});
308+
309+
// keep current sorters
310+
this._currentLocalSorters.push({
311+
columnId: gridColumn.id + '',
312+
direction: presetSorting.direction.toUpperCase() as SortDirectionString
313+
});
314+
}
315+
});
316+
}
317+
318+
if (sortCols.length > 0) {
319+
this.onLocalSortChanged(this._grid, this._dataView, sortCols);
320+
this._grid.setSortColumns(sortCols); // use this to add sort icon(s) in UI
321+
}
322+
323+
return sortCols;
324+
}
291325
}

0 commit comments

Comments
 (0)