add sorting indicator (#15542)

This commit is contained in:
Alan Ren
2021-05-20 17:07:18 -07:00
committed by GitHub
parent 555e6a10e9
commit a5db46b961
2 changed files with 17 additions and 2 deletions

View File

@@ -142,6 +142,15 @@ export class HeaderFilter<T extends Slick.SlickData> {
// the the filter button has already being added to the header // the the filter button has already being added to the header
return; return;
} }
// The default sorting feature is triggered by clicking on the column header, but that is conflicting with query editor grid,
// For query editor grid when column header is clicked, the entire column will be selected.
// If the column is not defined as sortable because of the above reason, we will add the sort indicator here.
if (column.sortable !== true) {
args.node.classList.add('slick-header-sortable');
append(args.node, $('span.slick-sort-indicator'));
}
args.node.classList.add('slick-header-with-filter'); args.node.classList.add('slick-header-with-filter');
const $el = jQuery(`<button tabindex="-1" aria-label="${ShowFilterText}" title="${ShowFilterText}"></button>`) const $el = jQuery(`<button tabindex="-1" aria-label="${ShowFilterText}" title="${ShowFilterText}"></button>`)
.addClass('slick-header-menubutton') .addClass('slick-header-menubutton')
@@ -478,6 +487,9 @@ export class HeaderFilter<T extends Slick.SlickData> {
private async handleMenuItemClick(command: HeaderFilterCommands, columnDef: Slick.Column<T>) { private async handleMenuItemClick(command: HeaderFilterCommands, columnDef: Slick.Column<T>) {
this.hideMenu(); this.hideMenu();
const dataView = this.grid.getData(); const dataView = this.grid.getData();
if (command === 'sort-asc' || command === 'sort-desc') {
this.grid.setSortColumn(columnDef.id, command === 'sort-asc');
}
if (instanceOfIDisposableDataProvider<T>(dataView) && (command === 'sort-asc' || command === 'sort-desc')) { if (instanceOfIDisposableDataProvider<T>(dataView) && (command === 'sort-asc' || command === 'sort-desc')) {
await dataView.sort({ await dataView.sort({
grid: this.grid, grid: this.grid,

View File

@@ -625,11 +625,14 @@ export abstract class GridTableBase<T> extends Disposable implements IView {
} }
if (this.state.sortState) { if (this.state.sortState) {
const sortAsc = this.state.sortState.sortAsc;
const sortCol = this.columns.find((column) => column.field === this.state.sortState.field);
this.table.grid.setSortColumn(sortCol.id, sortAsc);
await this.dataProvider.sort({ await this.dataProvider.sort({
multiColumnSort: false, multiColumnSort: false,
grid: this.table.grid, grid: this.table.grid,
sortAsc: this.state.sortState.sortAsc, sortAsc: sortAsc,
sortCol: this.columns.find((column) => column.field === this.state.sortState.field) sortCol: sortCol
}); });
} }