Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add GridExtraService with Highlight and RowSelection, replaced mouse …
…hover highlight with pure CSS.
  • Loading branch information
Ghislain Beaulac authored and Ghislain Beaulac committed Nov 10, 2017
1 parent c72cdb5 commit cc386d2
Show file tree
Hide file tree
Showing 18 changed files with 257 additions and 126 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
Expand Up @@ -9,7 +9,7 @@ indent_size = 4
insert_final_newline = true
trim_trailing_whitespace = true

[*.{js,json,ts}]
[*.{js,json,ts,css,scss}]
indent_style = space
indent_size = 2

Expand Down
25 changes: 19 additions & 6 deletions src/app/examples/grid-editor.component.ts
@@ -1,5 +1,5 @@
import { Component, OnInit } from '@angular/core';
import { Column, Editors, FieldType, Formatter, Formatters, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from './../modules/angular-slickgrid';
import { Column, Editors, FieldType, Formatter, Formatters, GridExtraService, GridExtraUtils, GridOption, OnEventArgs, ResizerService } from './../modules/angular-slickgrid';

@Component({
templateUrl: './grid-editor.component.html'
Expand All @@ -18,7 +18,7 @@ export class GridEditorComponent implements OnInit {
gridObj: any;
dataviewObj: any;

constructor(private resizer: ResizerService) {}
constructor(private gridExtraService: GridExtraService, private resizer: ResizerService) {}

ngOnInit(): void {
this.columnDefinitions = [
Expand All @@ -27,18 +27,25 @@ export class GridEditorComponent implements OnInit {
formatter: Formatters.editIcon,
minWidth: 30,
maxWidth: 30,
/*
// use onCellClick OR grid.onClick.subscribe which you can see down below
onCellClick: (args: OnEventArgs) => {
console.log(args);
}
alert(`Editing: ${args.dataContext.title}`);
}*/
},
{
id: 'delete', field: 'id',
formatter: Formatters.deleteIcon,
minWidth: 30,
maxWidth: 30,
/*
// use onCellClick OR grid.onClick.subscribe which you can see down below
onCellClick: (args: OnEventArgs) => {
console.log(args);
alert(`Deleting: ${args.dataContext.title}`);
}
*/
},
{ id: 'title', name: 'Title', field: 'title', sortable: true, type: FieldType.string, editor: Editors.longText },
{ id: 'duration', name: 'Duration (days)', field: 'duration', sortable: true, type: FieldType.number, editor: Editors.text,
Expand All @@ -54,15 +61,15 @@ export class GridEditorComponent implements OnInit {
];

this.gridOptions = {
asyncEditorLoading: false,
autoEdit: this.isAutoEdit,
autoResize: {
containerId: 'demo-container',
sidePadding: 15
},
editable: true,
enableColumnPicker: true,
enableCellNavigation: true,
asyncEditorLoading: false,
autoEdit: this.isAutoEdit
enableCellNavigation: true
};

// mock a dataset
Expand Down Expand Up @@ -100,6 +107,12 @@ export class GridEditorComponent implements OnInit {
console.log('onClick', args, column);
if (column.columnDef.id === 'edit') {
alert('open a modal window to edit: ' + column.dataContext.title);

// highlight the row, to customize the color, you can change the SASS variable $row-highlight-background-color
this.gridExtraService.highlightRow(args.row, 1500);

// you could also select the row, when using "enableCellNavigation: true", it automatically selects the row
// this.gridExtraService.setSelectedRow(args.row);
} else if (column.columnDef.id === 'delete') {
if (confirm('Are you sure?')) {
this.dataviewObj.deleteItem(column.dataContext.id);
Expand Down
32 changes: 17 additions & 15 deletions src/app/examples/grid-headerbutton.component.ts
Expand Up @@ -47,23 +47,25 @@ export class GridHeaderButtonComponent implements OnInit {
},
enableFiltering: false,
enableCellNavigation: true,
onHeaderButtonCommand: (e, args) => {
const column = args.column;
const button = args.button;
const command = args.command;
headerButtonOptions: {
onCommand: (e, args) => {
const column = args.column;
const button = args.button;
const command = args.command;

if (command === 'toggle-highlight') {
if (button.cssClass === 'fa fa-circle red') {
delete columnsWithHighlightingById[column.id];
button.cssClass = 'fa fa-circle-o red faded';
button.tooltip = 'Highlight negative numbers.';
} else {
columnsWithHighlightingById[column.id] = true;
button.cssClass = 'fa fa-circle red';
button.tooltip = 'Remove highlight.';
}
if (command === 'toggle-highlight') {
if (button.cssClass === 'fa fa-circle red') {
delete columnsWithHighlightingById[column.id];
button.cssClass = 'fa fa-circle-o red faded';
button.tooltip = 'Highlight negative numbers.';
} else {
columnsWithHighlightingById[column.id] = true;
button.cssClass = 'fa fa-circle red';
button.tooltip = 'Remove highlight.';
}

this.gridObj.invalidate();
this.gridObj.invalidate();
}
}
}
};
Expand Down
52 changes: 27 additions & 25 deletions src/app/examples/grid-headermenu.component.ts
Expand Up @@ -87,31 +87,33 @@ export class GridHeaderMenuComponent implements OnInit {
},
enableFiltering: false,
enableCellNavigation: true,
onHeaderMenuCommand: (e, args) => {
if (args.command === 'hide') {
this.controlService.hideColumn(args.column);
this.controlService.autoResizeColumns();
} else if (args.command === 'sort-asc' || args.command === 'sort-desc') {
// get previously sorted columns
// getSortColumns() only returns sortAsc & columnId, we want the entire column definition
const oldSortColumns = this.gridObj.getSortColumns();
const cols = $.map(oldSortColumns, (col) => {
// get the column definition but only keep column which are not equal to our current column
if (col.columnId !== args.column.id) {
return { sortCol: this.columnDefinitions[this.gridObj.getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
}
});
// add to the column array, the column sorted by the header menu
const isSortedAsc = (args.command === 'sort-asc');
cols.push({ sortAsc: isSortedAsc, sortCol: args.column });
// update the this.gridObj sortColumns array which will at the same add the visual sort icon(s) on the UI
const newSortColumns = $.map(cols, (col) => {
return { columnId: col.sortCol.id, sortAsc: col.sortAsc };
});
this.gridObj.setSortColumns(newSortColumns);
this.executeSort(cols);
} else {
alert('Command: ' + args.command);
headerMenuOptions: {
onCommand: (e, args) => {
if (args.command === 'hide') {
this.controlService.hideColumn(args.column);
this.controlService.autoResizeColumns();
} else if (args.command === 'sort-asc' || args.command === 'sort-desc') {
// get previously sorted columns
// getSortColumns() only returns sortAsc & columnId, we want the entire column definition
const oldSortColumns = this.gridObj.getSortColumns();
const cols = $.map(oldSortColumns, (col) => {
// get the column definition but only keep column which are not equal to our current column
if (col.columnId !== args.column.id) {
return { sortCol: this.columnDefinitions[this.gridObj.getColumnIndex(col.columnId)], sortAsc: col.sortAsc };
}
});
// add to the column array, the column sorted by the header menu
const isSortedAsc = (args.command === 'sort-asc');
cols.push({ sortAsc: isSortedAsc, sortCol: args.column });
// update the this.gridObj sortColumns array which will at the same add the visual sort icon(s) on the UI
const newSortColumns = $.map(cols, (col) => {
return { columnId: col.sortCol.id, sortAsc: col.sortAsc };
});
this.gridObj.setSortColumns(newSortColumns);
this.executeSort(cols);
} else {
alert('Command: ' + args.command);
}
}
}
};
Expand Down
26 changes: 13 additions & 13 deletions src/app/examples/grid-menu.component.ts
Expand Up @@ -108,20 +108,20 @@ export class GridMenuComponent implements OnInit {
disabled: true,
command: 'disabled-command'
}
]
},
onGridMenuCommand: (e, args) => {
if (args.command === 'toggle-filter') {
this.gridObj.setHeaderRowVisibility(!this.gridObj.getOptions().showHeaderRow);
} else if (args.command === 'toggle-toppanel') {
this.gridObj.setTopPanelVisibility(!this.gridObj.getOptions().showTopPanel);
} else if (args.command === 'clear-filter') {
this.filterService.clearFilters();
this.dataviewObj.refresh();
} else {
alert('Command: ' + args.command);
],
onCommand: (e, args) => {
if (args.command === 'toggle-filter') {
this.gridObj.setHeaderRowVisibility(!this.gridObj.getOptions().showHeaderRow);
} else if (args.command === 'toggle-toppanel') {
this.gridObj.setTopPanelVisibility(!this.gridObj.getOptions().showTopPanel);
} else if (args.command === 'clear-filter') {
this.filterService.clearFilters();
this.dataviewObj.refresh();
} else {
alert('Command: ' + args.command);
}
}
}
},
};

this.getData();
Expand Down
Expand Up @@ -20,10 +20,11 @@ import 'slickgrid/plugins/slick.headermenu';
import 'slickgrid/plugins/slick.rowmovemanager';
import 'slickgrid/plugins/slick.rowselectionmodel';
import { AfterViewInit, Component, EventEmitter , Injectable, Input, Output, OnInit } from '@angular/core';
import { castToPromise, immutableMerge } from './../services/utilities';
import { castToPromise } from './../services/utilities';
import { GlobalGridOptions } from './../global-grid-options';
import { CellArgs, Column, FormElementType, GridOption } from './../models';
import { ControlAndPluginService, FilterService, GridEventService, SortService, ResizerService } from './../services';
import { ControlAndPluginService, FilterService, GridEventService, GridExtraService, SortService, ResizerService } from './../services';
import $ from 'jquery';

// using external js modules in Angular
declare var Slick: any;
Expand Down Expand Up @@ -72,6 +73,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
constructor(
private controlAndPluginService: ControlAndPluginService,
private gridEventService: GridEventService,
private gridExtraService: GridExtraService,
private filterService: FilterService,
private resizer: ResizerService,
private sortService: SortService
Expand Down Expand Up @@ -105,6 +107,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {

// attach resize ONLY after the dataView is ready
this.attachResizeHook(this.grid, this._gridOptions);

// attach grid extra service
const gridExtraService = this.gridExtraService.init(this.grid, this._dataView);
}

attachDifferentHooks(grid: any, options: GridOption, dataView: any) {
Expand Down Expand Up @@ -141,11 +146,6 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
this.gridEventService.attachOnCellChange(grid, this._gridOptions, dataView);
this.gridEventService.attachOnClick(grid, this._gridOptions, dataView);

// if enable, change background color on mouse over
if (options.enableMouseHoverHighlightRow) {
this.gridEventService.attachOnMouseHover(grid);
}

dataView.onRowCountChanged.subscribe((e: any, args: any) => {
grid.updateRowCount();
grid.render();
Expand Down Expand Up @@ -179,9 +179,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnInit {
if (this.gridOptions.enableFiltering) {
this.gridOptions.showHeaderRow = true;
}
// use an immutable merge to avoid changing properties in GlobalGridOptions when changing route
const options = immutableMerge(GlobalGridOptions, this.gridOptions);
return options;
// use jquery extend to deep merge and avoid immutable properties changed in GlobalGridOptions after route change
return $.extend(true, {}, GlobalGridOptions, this.gridOptions);
}

/** Toggle the filter row displayed on first row */
Expand Down
1 change: 1 addition & 0 deletions src/app/modules/angular-slickgrid/index.ts
Expand Up @@ -45,6 +45,7 @@ export { ControlAndPluginService } from './services/controlAndPlugin.service';
export { FilterService } from './services/filter.service';
export { GridEventService } from './services/gridEvent.service';
export { GraphqlService } from './services/graphql.service';
export { GridExtraService } from './services/gridExtra.service';
export { GridExtraUtils } from './services/gridExtraUtils';
export { GridOdataService } from './services/grid-odata.service';
export { ResizerService } from './services/resizer.service';
Expand Down
Expand Up @@ -9,4 +9,8 @@ export interface GridMenu {
menuWidth?: number;
resizeOnShowHeaderRow?: boolean;
customItems?: CustomGridMenu[];

onBeforeMenuShow?: (e: Event, args: any) => void;
onMenuClose?: (e: Event, args: any) => void;
onCommand?: (e: Event, args: any) => void;
}
Expand Up @@ -40,16 +40,15 @@ export interface GridOption {
headerRowHeight?: number;
headerButtonOptions?: {
buttonCssClass?: string;
onCommand?: (e: Event, args: any) => void;
};
headerMenuOptions?: {
buttonCssClass?: string;
buttonImage?: string;
onCommand?: (e: Event, args: any) => void;
};
multiColumnSort?: boolean;
onBackendEventApi?: BackendEventChanged;
onGridMenuCommand?: (e: Event, args: any) => void;
onHeaderButtonCommand?: (e: Event, args: any) => void;
onHeaderMenuCommand?: (e: Event, args: any) => void;
pagination?: Pagination;
registerPlugins?: any | any[]; // e.g.: Slick.CheckboxSelectColumn
rowHeight?: number;
Expand Down
Expand Up @@ -5,6 +5,7 @@ import { ControlAndPluginService } from '../services/controlAndPlugin.service';
import { Formatters } from './../formatters';
import { FilterService } from './../services/filter.service';
import { GridEventService } from './../services/gridEvent.service';
import { GridExtraService } from '../services/gridExtra.service';
import { GraphqlService } from './../services/graphql.service';
import { OdataService } from './../services/odata.service';
import { ResizerService } from './../services/resizer.service';
Expand All @@ -27,6 +28,7 @@ import { SortService } from './../services/sort.service';
ControlAndPluginService,
GraphqlService,
GridEventService,
GridExtraService,
OdataService,
FilterService,
SortService,
Expand Down
Expand Up @@ -34,11 +34,23 @@ export class ControlAndPluginService {
this.prepareGridMenu(options);

this.gridMenuControl = new Slick.Controls.GridMenu(columnDefinitions, grid, options);
this.gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
if (typeof options.onGridMenuCommand === 'function') {
options.onGridMenuCommand(e, args);
}
});
if (options.gridMenu) {
this.gridMenuControl.onBeforeMenuShow.subscribe((e: Event, args: CellArgs) => {
if (typeof options.gridMenu.onBeforeMenuShow === 'function') {
options.gridMenu.onBeforeMenuShow(e, args);
}
});
this.gridMenuControl.onCommand.subscribe((e: Event, args: CellArgs) => {
if (typeof options.gridMenu.onCommand === 'function') {
options.gridMenu.onCommand(e, args);
}
});
this.gridMenuControl.onMenuClose.subscribe((e: Event, args: CellArgs) => {
if (typeof options.gridMenu.onMenuClose === 'function') {
options.gridMenu.onMenuClose(e, args);
}
});
}
}
if (options.enableAutoTooltip) {
this.autoTooltipPlugin = new Slick.AutoTooltips(options.autoTooltipOptions || {});
Expand All @@ -52,17 +64,17 @@ export class ControlAndPluginService {
this.headerButtonsPlugin = new Slick.Plugins.HeaderButtons(options.headerButtonOptions || {});
grid.registerPlugin(this.headerButtonsPlugin);
this.headerButtonsPlugin.onCommand.subscribe((e: Event, args: CellArgs) => {
if (typeof options.onHeaderButtonCommand === 'function') {
options.onHeaderButtonCommand(e, args);
if (typeof options.headerButtonOptions.onCommand === 'function') {
options.headerButtonOptions.onCommand(e, args);
}
});
}
if (options.enableHeaderMenu) {
this.headerMenuPlugin = new Slick.Plugins.HeaderMenu(options.headerMenuOptions || {});
grid.registerPlugin(this.headerMenuPlugin);
this.headerMenuPlugin.onCommand.subscribe((e: Event, args: CellArgs) => {
if (typeof options.onHeaderMenuCommand === 'function') {
options.onHeaderMenuCommand(e, args);
if (typeof options.headerMenuOptions.onCommand === 'function') {
options.headerMenuOptions.onCommand(e, args);
}
});
}
Expand Down Expand Up @@ -127,7 +139,7 @@ export class ControlAndPluginService {
}
);
}
options.onGridMenuCommand = (e, args) => {
options.gridMenu.onCommand = (e, args) => {
if (args.command === 'toggle-filter') {
this._grid.setHeaderRowVisibility(!this._grid.getOptions().showHeaderRow);
} else if (args.command === 'toggle-toppanel') {
Expand Down

0 comments on commit cc386d2

Please sign in to comment.