-
-
Notifications
You must be signed in to change notification settings - Fork 19
Sorting
Sorting on the client side is really easy, you simply need to enable sortable
(when not provided, it is considered as disabled) on each columns you want to sort and it will sort as a type string. Oh but wait, sorting as string might not always be ideal, what if we want to sort by number or by date? The answer is to simply pass a type
as shown below.
To use any of them, you need to import FieldType
from Aurelia-Slickgrid
as shown below. Also please note that FieldType.string
is the default and you don't necessarily need to define it, though you could if you wish to see it in your column definition.
import { FieldType } from 'aurelia-slickgrid';
export class Example {
columnDefinitions: Column[];
gridOptions: GridOption;
dataset: any[];
constructor() {
// define the grid options & columns and then create the grid itself
this.defineGrid();
}
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', sortable: true },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number },
{ id: '%', name: '% Complete', field: 'percentComplete', sortable: true, type: FieldType.float},
{ id: 'start', name: 'Start', field: 'start', sortable: true, type: FieldType.dateIso },
{ id: 'finish', name: 'Finish', field: 'finish', sortable: true, type: FieldType.dateIso },
{ id: 'effort-driven', name: 'Effort Driven', field: 'effortDriven', sortable: true }
];
}
}
You can sort complex objects using the dot (.) notation inside the field
property defined in your Columns Definition.
For example, let say that we have this dataset
const dataset = [
{ item: 'HP Desktop', buyer: { id: 1234, address: { street: '123 belleville', zip: 123456 }},
{ item: 'Lenovo Mouse', buyer: { id: 456, address: { street: '456 hollywood blvd', zip: 789123 }}
];
We can now filter the zip code from the buyer's address using this filter:
this.columnDefinitions = [
{
// the zip is a property of a complex object which is under the "buyer" property
// it will use the "field" property to explode (from "." notation) and find the child value
id: 'zip', name: 'ZIP', field: 'buyer.address.zip', sortable: true
// id: 'street', ...
];
If the builtin sort comparer methods are not sufficient for your use case, you could add your own custom Sort Comparer in your Column Definitions as shown below. Note that we are only showing a simple numeric sort, just adjust it to your needs.
this.columnDefinitions = [{
id: 'myField', name: 'My Field',
sorter: (a, b) => a > b ? 1 : -1,
}];
similarly with a complex object
// data = { user: { firstName: 'John', lastName: 'Doe', fullName: 'John Doe' }, address: { zip: 123456 } }};
this.columnDefinitions = [{
id: 'firstName', name: 'First Name', field: 'user.firstName',
sorter: (a, b) => a.fullName > b.fullName ? 1 : -1,
}];
You can update/change the Sorting dynamically (on the fly) via the updateSorting
method from the SortService
. Note that calling this method will override all sorting (sorters) and replace them with the new array of sorters provided. For example, you could update the sorting from a button click or a select dropdown list with predefined filter set.
<button class="btn btn-default btn-sm" data-test="set-dynamic-sorting" click.delegate="setSortingDynamically()">
Set Sorting Dynamically
</button>
<aurelia-slickgrid grid-id="grid1"
columnDefinitions.bind="columnDefinitions"
gridOptions.bind="gridOptions"
dataset.bind="dataset"
on-aurelia-grid-created.delegate="aureliaGridReady($event.detail)">
</aurelia-slickgrid>
export class Example {
aureliaGrid: AureliaGridInstance;
aureliaGridReady(aureliaGrid: AureliaGridInstance) {
this.aureliaGrid = aureliaGrid;
}
setSortingDynamically() {
this.aureliaGrid.sortService.updateSorting([
// orders matter, whichever is first in array will be the first sorted column
{ columnId: 'duration', direction: 'ASC' },
{ columnId: 'start', direction: 'DESC' },
]);
}
}
The updateSorting
method has 2 extra arguments:
- 2nd argument, defaults to true, is to emit a sort changed event (the GridStateService uses this event)
- optional and defaults to true
updateSorting([], true)
- optional and defaults to true
- 3rd argument is to trigger a backend query (when using a Backend Service like OData/GraphQL), this could be useful when using updateFilters & updateSorting and you wish to only send the backend query once.
- optional and defaults to true
updateSorting([], true, true)
- optional and defaults to true
What if you a field that you only know which field to query only at run time and depending on the item object (dataContext
)?
We can defined a queryFieldNameGetterFn
callback that will be executed on each row when Filtering and/or Sorting.
queryFieldNameGetterFn: (dataContext) => {
// do your logic and return the field name will be queried
// for example let say that we query "profitRatio" when we have a profit else we query "lossRatio"
return dataContext.profit > 0 ? 'profitRatio' : 'lossRatio';
},
Contents
- Aurelia-Slickgrid Wiki
- Installation
- Styling
- Interfaces/Models
- Testing Patterns
- Column Functionalities
- Global Grid Options
- Localization
- Events
- Grid Functionalities
- Auto-Resize / Resizer Service
- Resize by Cell Content
- Add/Delete/Update or Highlight item
- Dynamically Change Row CSS Classes
- Column Picker
- Composite Editor Modal
- Context Menu
- Custom Tooltip
- Excel Copy Buffer
- Export to Excel
- Export to File (CSV/Txt)
- Grid Menu
- Grid State & Presets
- Grouping & Aggregators
- Header Menu & Header Buttons
- Header Title Grouping
- Pinning (frozen) of Columns/Rows
- Row Colspan
- Row Detail
- Row Selection
- Tree Data Grid
- SlickGrid & DataView objects
- Addons (controls/plugins)
- Backend Services