Skip to content

Commit

Permalink
feat(tree): demo new excludeChildrenWhenFilteringTree flag
Browse files Browse the repository at this point in the history 
- demo both new flags `autoApproveParentItemWhenTreeColumnIsValid` and `excludeChildrenWhenFilteringTree` (new and will default to false, meaning that all children will be included by default unless this flag is turned on)
  • Loading branch information
@ghiscoding
ghiscoding committed Sep 28, 2021
1 parent cee71c8 commit 7aa3d84
Show file tree
Hide file tree
Showing 5 changed files with 226 additions and 54 deletions.
34 changes: 29 additions & 5 deletions src/app/examples/grid-tree-data-hierarchical.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="container-fluid">
<h2>
<span [innerHTML]="title"></span>
<span class="float-right">
<span class="float-end">
<a style="font-size: 18px"
target="_blank"
href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-tree-data-hierarchical.component.ts">
Expand All @@ -25,26 +25,50 @@ <h2>
<span class="icon mdi mdi-arrow-expand"></span>
<span>Expand All</span>
</button>
<button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-sm">
<button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-sm"
title="console.log of the Flat dataset">
<span>Log Flat Structure</span>
</button>
<button (click)="logHierarchicalStructure()" class="btn btn-outline-secondary btn-sm">
<button (click)="logHierarchicalStructure()" class="btn btn-outline-secondary btn-sm"
title="console.log of the Hierarchical Tree dataset">
<span>Log Hierarchical Structure</span>
</button>
</div>

<div class="col-md-5">
<div class="input-group">
<input type="text" class="form-control search-string" data-test="search-string"
[(ngModel)]="searchString" (ngModelChange)="searchStringChanged()">
placeholder="search value" autocomplete="off" [(ngModel)]="searchString"
(ngModelChange)="searchStringChanged()">
<button class="btn btn-outline-secondary" data-test="clear-search-string" (click)="clearSearch()">
<span class="icon mdi mdi-close-thick"></span>
</button>
</div>
</div>
</div>

<br />
<div>
<label class="checkbox-inline control-label" for="excludeChildWhenFiltering" style="margin-left: 20px">
<input type="checkbox" id="excludeChildWhenFiltering" data-test="exclude-child-when-filtering"
[checked]="isExcludingChildWhenFiltering"
(click)="changeExcludeChildWhenFiltering()">
<span
title="for example if we filter the word 'pop' and we exclude children, then only the folder 'pop' will show up without any content unless we uncheck this flag">
Exclude Children when Filtering Tree
</span>
</label>
<label class="checkbox-inline control-label" for="autoApproveParentItem" style="margin-left: 20px">
<input type="checkbox" id="autoApproveParentItem" data-test="auto-approve-parent-item"
[checked]="isAutoApproveParentItemWhenTreeColumnIsValid"
(click)="changeAutoApproveParentItem()">
<span
title="for example in this demo if we filter with 'music' and size '> 70' nothing will show up unless we have this flag enabled
because none of the files have both criteria at the same time, however the column with the tree 'file' does pass the filter criteria 'music'
and with this flag we tell the lib to skip any other filter(s) as soon as the with the tree (file in this demo) passes its own filter criteria">
Skip Other Filter Criteria when Parent with Tree is valid
</span>
</label>
</div>

<angular-slickgrid gridId="grid29"
[columnDefinitions]="columnDefinitions"
Expand Down
64 changes: 53 additions & 11 deletions src/app/examples/grid-tree-data-hierarchical.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,8 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
gridOptions!: GridOption;
columnDefinitions!: Column[];
datasetHierarchical: any[] = [];
isExcludingChildWhenFiltering = false;
isAutoApproveParentItemWhenTreeColumnIsValid = true;
searchString = '';

constructor() { }
Expand All @@ -59,6 +61,10 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
formatter: Formatters.dateIso, type: FieldType.dateUtc, outputType: FieldType.dateIso, minWidth: 90,
exportWithFormatter: true, filterable: true, filter: { model: Filters.compoundDate }
},
{
id: 'description', name: 'Description', field: 'description', minWidth: 90,
filterable: true, sortable: true,
},
{
id: 'size', name: 'Size', field: 'size', minWidth: 90,
type: FieldType.number, exportWithFormatter: true,
Expand All @@ -74,27 +80,40 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
},
enableAutoSizeColumns: true,
enableAutoResize: true,
enableExport: true,
enableExcelExport: true,
excelExportOptions: {
exportWithFormatter: true,
sanitizeDataExport: true
},
registerExternalResources: [new ExcelExportService()],
enableFiltering: true,
enableTreeData: true, // you must enable this flag for the filtering & sorting to work as expected
multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
treeDataOptions: {
columnId: 'file',
childrenPropName: 'files',
// you can optionally sort by a different column and/or sort direction
excludeChildrenWhenFilteringTree: this.isExcludingChildWhenFiltering, // defaults to false

// skip any other filter criteria(s) if the column holding the Tree (file) passes its own filter criteria
// (e.g. filtering with "Files = music AND Size > 7", the row "Music" and children will only show up when this flag is enabled
// this flag only works with the other flag set to `excludeChildrenWhenFilteringTree: false`
autoApproveParentItemWhenTreeColumnIsValid: this.isAutoApproveParentItemWhenTreeColumnIsValid,

// you can also optionally sort by a different column and/or change sort direction
// initialSort: {
// columnId: 'file',
// direction: 'DESC'
// }
},
multiColumnSort: false, // multi-column sorting is not supported with Tree Data, so you need to disable it
// change header/cell row height for salesforce theme
headerRowHeight: 35,
rowHeight: 33,
showCustomFooter: true,
enableExcelExport: true,
excelExportOptions: { exportWithFormatter: true, sanitizeDataExport: true },
registerExternalResources: [new ExcelExportService()],

// we can also preset collapsed items via Grid Presets (parentId: 4 => is the "pdf" folder)
presets: {
treeData: { toggledItems: [{ itemId: 4, isCollapsed: true }] },
},
// use Material Design SVG icons
contextMenu: {
iconCollapseAllGroupsCommand: 'mdi mdi-arrow-collapse',
Expand Down Expand Up @@ -132,6 +151,22 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
this.dataViewObj = angularGrid.dataView;
}

changeAutoApproveParentItem() {
this.isAutoApproveParentItemWhenTreeColumnIsValid = !this.isAutoApproveParentItemWhenTreeColumnIsValid;
this.gridOptions.treeDataOptions!.autoApproveParentItemWhenTreeColumnIsValid = this.isAutoApproveParentItemWhenTreeColumnIsValid;
this.angularGrid.slickGrid.setOptions(this.gridOptions);
this.angularGrid.filterService.refreshTreeDataFilters();
return true;
}

changeExcludeChildWhenFiltering() {
this.isExcludingChildWhenFiltering = !this.isExcludingChildWhenFiltering;
this.gridOptions.treeDataOptions!.excludeChildrenWhenFilteringTree = this.isExcludingChildWhenFiltering;
this.angularGrid.slickGrid.setOptions(this.gridOptions);
this.angularGrid.filterService.refreshTreeDataFilters();
return true;
}

clearSearch() {
this.searchString = '';
this.updateFilter();
Expand Down Expand Up @@ -202,7 +237,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
id: newId,
file: `pop-${newId}.mp3`,
dateModified: new Date(),
size: Math.round(Math.random() * 100),
size: Math.floor(Math.random() * 100) + 50,
});

// overwrite hierarchical dataset which will also trigger a grid sort and rendering
Expand Down Expand Up @@ -238,7 +273,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
{ id: 18, file: 'something.txt', dateModified: '2015-03-03T03:50:00.123Z', size: 90 },
{
id: 21, file: 'documents', files: [
{ id: 2, file: 'txt', files: [{ id: 3, file: 'todo.txt', dateModified: '2015-05-12T14:50:00.123Z', size: 0.7, }] },
{ id: 2, file: 'txt', files: [{ id: 3, file: 'todo.txt', description: 'things to do someday maybe', dateModified: '2015-05-12T14:50:00.123Z', size: 0.7, }] },
{
id: 4, file: 'pdf', files: [
{ id: 22, file: 'map2.pdf', dateModified: '2015-07-21T08:22:00.123Z', size: 2.9, },
Expand All @@ -248,7 +283,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
]
},
{ id: 9, file: 'misc', files: [{ id: 10, file: 'todo.txt', dateModified: '2015-02-26T16:50:00.123Z', size: 0.4, }] },
{ id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3, }] },
{ id: 7, file: 'xls', files: [{ id: 8, file: 'compilation.xls', description: 'movie compilation', dateModified: '2014-10-02T14:50:00.123Z', size: 2.3, }] },
]
},
{
Expand All @@ -257,13 +292,20 @@ export class GridTreeDataHierarchicalComponent implements OnInit {
{ id: 16, file: 'rock', files: [{ id: 17, file: 'soft.mp3', dateModified: '2015-05-13T13:50:00Z', size: 98, }] },
{
id: 14, file: 'pop', files: [
{ id: 15, file: 'theme.mp3', dateModified: '2015-03-01T17:05:00Z', size: 47, },
{ id: 25, file: 'song.mp3', dateModified: '2016-10-04T06:33:44Z', size: 6.3, }
{ id: 15, file: 'theme.mp3', description: 'Movie Theme Song', dateModified: '2015-03-01T17:05:00Z', size: 47, },
{ id: 25, file: 'song.mp3', description: 'it is a song...', dateModified: '2016-10-04T06:33:44Z', size: 6.3, }
]
},
]
}]
},
{
id: 26, file: 'recipes', description: 'Cake Recipes', dateModified: '2012-03-05T12:44:00.123Z', files: [
{ id: 29, file: 'cheesecake', description: 'strawberry cheesecake', dateModified: '2012-04-04T13:52:00.123Z', size: 0.2 },
{ id: 30, file: 'chocolate-cake', description: 'tasty sweet chocolate cake', dateModified: '2012-05-05T09:22:00.123Z', size: 0.2 },
{ id: 31, file: 'coffee-cake', description: 'chocolate coffee cake', dateModified: '2012-01-01T08:08:48.123Z', size: 0.2 },
]
},
];
}
}
8 changes: 5 additions & 3 deletions src/app/examples/grid-tree-data-parent-child.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
<div class="container-fluid">
<h2>
<span [innerHTML]="title"></span>
<span class="float-right">
<span class="float-end">
<a style="font-size: 18px"
target="_blank"
href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-tree-data-parent-child.component.ts">
Expand Down Expand Up @@ -71,10 +71,12 @@ <h2>
<button (click)="logTreeDataToggledItems()" class="btn btn-outline-secondary btn-sm">
<span>Log Tree Toggled Items</span>
</button>
<button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-sm">
<button (click)="logFlatStructure()" class="btn btn-outline-secondary btn-sm"
title="console.log of the Flat dataset">
<span>Log Flat Structure</span>
</button>
<button (click)="logHierarchicalStructure()" class="btn btn-outline-secondary btn-sm">
<button (click)="logHierarchicalStructure()" class="btn btn-outline-secondary btn-sm"
title="console.log of the Hierarchical Tree dataset">
<span>Log Hierarchical Structure</span>
</button>
<button (click)="dynamicallyChangeFilter()" class="btn btn-outline-secondary btn-sm">
Expand Down
14 changes: 7 additions & 7 deletions src/app/modules/angular-slickgrid/components/angular-slickgrid.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -233,9 +233,9 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {

// when a hierarchical dataset is set afterward, we can reset the flat dataset and call a tree data sort that will overwrite the flat dataset
if (newHierarchicalDataset && this.slickGrid && this.sortService?.processTreeDataInitialSort) {
this.dataView.setItems([], this.gridOptions.datasetIdPropertyName);
this.dataView.setItems([], this.gridOptions.datasetIdPropertyName ?? 'id');
this.sortService.processTreeDataInitialSort();
this.sortTreeDataset([]);

// we also need to reset/refresh the Tree Data filters because if we inserted new item(s) then it might not show up without doing this refresh
// however we need 1 cpu cycle before having the DataView refreshed, so we need to wrap this check in a setTimeout
setTimeout(() => {
Expand All @@ -244,9 +244,8 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {
this.filterService.refreshTreeDataFilters();
}
});
this._isDatasetHierarchicalInitialized = true;
}

this._isDatasetHierarchicalInitialized = true;
}

get elementRef(): ElementRef {
Expand Down Expand Up @@ -575,14 +574,15 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {

// user could show a custom footer with the data metrics (dataset length and last updated timestamp)
if (!this.gridOptions.enablePagination && this.gridOptions.showCustomFooter && this.gridOptions.customFooterOptions && this.gridContainerElement) {
this.slickFooter = new SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this.translaterService);
this.slickFooter = new SlickFooterComponent(this.slickGrid, this.gridOptions.customFooterOptions, this._eventPubSubService, this.translaterService);
this.slickFooter.renderFooter(this.gridContainerElement);
}

if (!this.customDataView && this.dataView) {
// load the data in the DataView (unless it's a hierarchical dataset, if so it will be loaded after the initial tree sort)
const initialDataset = this.gridOptions?.enableTreeData ? this.sortTreeDataset(this._dataset) : this._dataset;
this.dataView.beginUpdate();
this.dataView.setItems(initialDataset || [], this.gridOptions.datasetIdPropertyName);
this.dataView.setItems(initialDataset || [], this.gridOptions.datasetIdPropertyName ?? 'id');
this.dataView.endUpdate();

// if you don't want the items that are not visible (due to being filtered out or being on a different page)
Expand Down Expand Up @@ -711,7 +711,7 @@ export class AngularSlickgridComponent implements AfterViewInit, OnDestroy {
}

if (Array.isArray(dataset) && this.slickGrid && this.dataView?.setItems) {
this.dataView.setItems(dataset, this.gridOptions.datasetIdPropertyName);
this.dataView.setItems(dataset, this.gridOptions.datasetIdPropertyName ?? 'id');
if (!this.gridOptions.backendServiceApi && !this.gridOptions.enableTreeData) {
this.dataView.reSort();
}
Expand Down
Loading

0 comments on commit 7aa3d84

Please sign in to comment.