From 2d08078e7b984b7fbe83392557616d7d5fb57a34 Mon Sep 17 00:00:00 2001 From: ghiscoding Date: Tue, 18 Mar 2025 20:46:36 -0400 Subject: [PATCH] chore: add subtitle toggle to all examples --- docs/grid-functionalities/row-detail.md | 1 - src/app/examples/grid-additem.component.html | 10 +++++++++- src/app/examples/grid-additem.component.ts | 1 + src/app/examples/grid-angular.component.html | 10 +++++++++- src/app/examples/grid-angular.component.ts | 1 + .../examples/grid-autoheight.component.html | 10 +++++++++- src/app/examples/grid-autoheight.component.ts | 1 + .../grid-base-row-editing.component.html | 10 +++++++++- .../grid-base-row-editing.component.ts | 1 + src/app/examples/grid-basic.component.html | 10 +++++++++- src/app/examples/grid-basic.component.ts | 1 + .../examples/grid-clientside.component.html | 10 +++++++++- src/app/examples/grid-clientside.component.ts | 1 + src/app/examples/grid-colspan.component.html | 10 +++++++++- src/app/examples/grid-colspan.component.ts | 1 + .../grid-composite-editor.component.html | 19 ++++++++++++++----- .../grid-composite-editor.component.ts | 1 + .../examples/grid-contextmenu.component.html | 16 ++++++++++++---- .../examples/grid-contextmenu.component.ts | 1 + .../examples/grid-custom-pager.component.ts | 1 + .../grid-custom-pagination.component.html | 10 +++++++++- .../grid-custom-pagination.component.ts | 1 + .../grid-custom-tooltip.component.html | 10 +++++++++- .../examples/grid-custom-tooltip.component.ts | 1 + .../examples/grid-drag-recycle.component.html | 12 ++++++++++-- .../examples/grid-drag-recycle.component.ts | 1 + .../examples/grid-draggrouping.component.html | 19 ++++++++++++++----- .../examples/grid-draggrouping.component.ts | 1 + src/app/examples/grid-editor.component.html | 10 +++++++++- src/app/examples/grid-editor.component.ts | 1 + .../grid-excel-formula.component.html | 11 ++++++++++- .../examples/grid-excel-formula.component.ts | 1 + .../grid-footer-totals.component.html | 18 +++++++++++++----- .../examples/grid-footer-totals.component.ts | 1 + .../examples/grid-formatter.component.html | 10 +++++++++- src/app/examples/grid-formatter.component.ts | 1 + src/app/examples/grid-frozen.component.html | 10 +++++++++- src/app/examples/grid-frozen.component.ts | 1 + .../grid-graphql-nopage.component.html | 10 +++++++++- .../examples/grid-graphql-nopage.component.ts | 1 + src/app/examples/grid-graphql.component.html | 10 +++++++++- src/app/examples/grid-graphql.component.ts | 1 + src/app/examples/grid-grouping.component.html | 10 +++++++++- src/app/examples/grid-grouping.component.ts | 1 + .../grid-header-footer.component.html | 10 +++++++++- .../examples/grid-header-footer.component.ts | 1 + .../examples/grid-headerbutton.component.html | 10 +++++++++- .../examples/grid-headerbutton.component.ts | 1 + .../examples/grid-headermenu.component.html | 10 +++++++++- src/app/examples/grid-headermenu.component.ts | 1 + .../grid-infinite-graphql.component.html | 12 ++++++++++-- .../grid-infinite-graphql.component.ts | 1 + .../grid-infinite-json.component.html | 12 ++++++++++-- .../examples/grid-infinite-json.component.ts | 1 + .../grid-infinite-odata.component.html | 12 ++++++++++-- .../examples/grid-infinite-odata.component.ts | 1 + .../examples/grid-localization.component.html | 10 +++++++++- .../examples/grid-localization.component.ts | 1 + src/app/examples/grid-menu.component.html | 10 +++++++++- src/app/examples/grid-menu.component.ts | 1 + src/app/examples/grid-odata.component.html | 11 ++++++++++- src/app/examples/grid-odata.component.ts | 1 + src/app/examples/grid-range.component.html | 10 +++++++++- src/app/examples/grid-range.component.ts | 1 + .../grid-resize-by-content.component.html | 10 +++++++++- .../grid-resize-by-content.component.ts | 1 + .../examples/grid-rowdetail.component.html | 18 +++++++++++++----- src/app/examples/grid-rowdetail.component.ts | 1 + src/app/examples/grid-rowmove.component.html | 10 +++++++++- src/app/examples/grid-rowmove.component.ts | 1 + .../examples/grid-rowselection.component.html | 10 +++++++++- .../examples/grid-rowselection.component.ts | 1 + src/app/examples/grid-state.component.html | 10 +++++++++- src/app/examples/grid-state.component.ts | 1 + src/app/examples/grid-tabs.component.html | 10 +++++++++- src/app/examples/grid-tabs.component.ts | 1 + src/app/examples/grid-trading.component.html | 19 ++++++++++++++----- src/app/examples/grid-trading.component.ts | 1 + ...grid-tree-data-hierarchical.component.html | 10 +++++++++- .../grid-tree-data-hierarchical.component.ts | 1 + ...grid-tree-data-parent-child.component.html | 10 +++++++++- .../grid-tree-data-parent-child.component.ts | 1 + src/app/examples/grid18.component.html | 4 ++-- src/app/examples/grid18.component.ts | 8 +------- src/app/examples/grid43.component.html | 6 +++--- src/app/examples/grid43.component.ts | 8 +------- src/app/examples/grid44.component.html | 4 ++-- src/app/examples/grid44.component.ts | 8 +------- src/app/examples/grid45.component.html | 6 +++--- src/app/examples/grid45.component.ts | 9 +-------- .../swt-common-grid-test.component.html | 2 +- .../swt-common-grid-test.component.ts | 1 + src/app/examples/swt-common-grid.component.ts | 1 + 93 files changed, 450 insertions(+), 108 deletions(-) diff --git a/docs/grid-functionalities/row-detail.md b/docs/grid-functionalities/row-detail.md index d2f57c7c4..676b165b3 100644 --- a/docs/grid-functionalities/row-detail.md +++ b/docs/grid-functionalities/row-detail.md @@ -408,7 +408,6 @@ export class MainGridComponent implements OnInit { gridOptions!: GridOption; angularGrid!: AngularGridInstance; dataset: Distributor[] = []; - showSubTitle = true; get rowDetailInstance(): SlickRowDetailView { return this.angularGrid.extensions.rowDetailView?.instance || {}; diff --git a/src/app/examples/grid-additem.component.html b/src/app/examples/grid-additem.component.html index 8cd049fa1..93e479868 100644 --- a/src/app/examples/grid-additem.component.html +++ b/src/app/examples/grid-additem.component.html @@ -10,8 +10,16 @@

code +

-
+
diff --git a/src/app/examples/grid-additem.component.ts b/src/app/examples/grid-additem.component.ts index 3a301b3e8..36e502d73 100644 --- a/src/app/examples/grid-additem.component.ts +++ b/src/app/examples/grid-additem.component.ts @@ -44,6 +44,7 @@ export class GridAddItemComponent implements OnInit { dataView!: SlickDataView; columnDefinitions: Column[] = []; gridOptions!: GridOption; + hideSubTitle = false; dataset: any[]; updatedObject: any; diff --git a/src/app/examples/grid-angular.component.html b/src/app/examples/grid-angular.component.html index bf802da56..bd1dd498d 100644 --- a/src/app/examples/grid-angular.component.html +++ b/src/app/examples/grid-angular.component.html @@ -10,8 +10,16 @@

code +

-
+
diff --git a/src/app/examples/grid-angular.component.ts b/src/app/examples/grid-angular.component.ts index 2f3b61d1d..6b844c745 100644 --- a/src/app/examples/grid-angular.component.ts +++ b/src/app/examples/grid-angular.component.ts @@ -59,6 +59,7 @@ export class GridAngularComponent implements OnInit { dataset!: any[]; gridObj: any; isAutoEdit = true; + hideSubTitle = false; alertWarning: any; updatedObject: any; selectedLanguage = 'en'; diff --git a/src/app/examples/grid-autoheight.component.html b/src/app/examples/grid-autoheight.component.html index ece380624..a5c68d4d4 100644 --- a/src/app/examples/grid-autoheight.component.html +++ b/src/app/examples/grid-autoheight.component.html @@ -10,8 +10,16 @@

code +

-
+
diff --git a/src/app/examples/grid-autoheight.component.ts b/src/app/examples/grid-autoheight.component.ts index 457be09a0..e0f8c6ea5 100644 --- a/src/app/examples/grid-autoheight.component.ts +++ b/src/app/examples/grid-autoheight.component.ts @@ -36,6 +36,7 @@ export class GridAutoHeightComponent implements OnInit { selectedOperator = '='; searchValue = ''; selectedColumn?: Column; + hideSubTitle = false; ngOnInit() { this.prepareGrid(); diff --git a/src/app/examples/grid-base-row-editing.component.html b/src/app/examples/grid-base-row-editing.component.html index b9e836e6b..5373f83a8 100644 --- a/src/app/examples/grid-base-row-editing.component.html +++ b/src/app/examples/grid-base-row-editing.component.html @@ -9,9 +9,17 @@

code +

-
+
  • The Row Based Edit plugin allows you to edit either a single or multiple specific rows at a time, while disabling the rest diff --git a/src/app/examples/grid-base-row-editing.component.ts b/src/app/examples/grid-base-row-editing.component.ts index 5be2e9874..01ecc5955 100644 --- a/src/app/examples/grid-base-row-editing.component.ts +++ b/src/app/examples/grid-base-row-editing.component.ts @@ -23,6 +23,7 @@ export class GridBaseRowEditingComponent implements OnInit { fetchResult = ''; statusClass = 'alert alert-light'; statusStyle = 'display: none'; + hideSubTitle = false; constructor(private translate: TranslateService) { // always start with English for Cypress E2E tests to be consistent diff --git a/src/app/examples/grid-basic.component.html b/src/app/examples/grid-basic.component.html index 55bd53439..922d3326d 100644 --- a/src/app/examples/grid-basic.component.html +++ b/src/app/examples/grid-basic.component.html @@ -10,8 +10,16 @@

    code +

    -
    +

    diff --git a/src/app/examples/grid-basic.component.ts b/src/app/examples/grid-basic.component.ts index c824c9d81..06eff9125 100644 --- a/src/app/examples/grid-basic.component.ts +++ b/src/app/examples/grid-basic.component.ts @@ -24,6 +24,7 @@ export class GridBasicComponent implements OnDestroy, OnInit { gridOptions2!: GridOption; dataset1!: any[]; dataset2!: any[]; + hideSubTitle = false; ngOnInit(): void { this.prepareGrid(); diff --git a/src/app/examples/grid-clientside.component.html b/src/app/examples/grid-clientside.component.html index 5d8055b40..8d87d5a93 100644 --- a/src/app/examples/grid-clientside.component.html +++ b/src/app/examples/grid-clientside.component.html @@ -10,8 +10,16 @@

    code +

    -
    +

    diff --git a/src/app/examples/grid-clientside.component.ts b/src/app/examples/grid-clientside.component.ts index 7a208a622..776091a95 100644 --- a/src/app/examples/grid-clientside.component.ts +++ b/src/app/examples/grid-clientside.component.ts @@ -56,6 +56,7 @@ export class GridClientSideComponent implements OnInit { gridOptions!: GridOption; dataset!: any[]; metrics!: Metrics; + hideSubTitle = false; constructor( private http: HttpClient, diff --git a/src/app/examples/grid-colspan.component.html b/src/app/examples/grid-colspan.component.html index 69631ad3e..0fcb3fb2b 100644 --- a/src/app/examples/grid-colspan.component.html +++ b/src/app/examples/grid-colspan.component.html @@ -10,8 +10,16 @@

    code +

    -
    +

    Grid 1 (with Header Grouping & Colspan)

    diff --git a/src/app/examples/grid-colspan.component.ts b/src/app/examples/grid-colspan.component.ts index eeda7f61e..17a78553d 100644 --- a/src/app/examples/grid-colspan.component.ts +++ b/src/app/examples/grid-colspan.component.ts @@ -28,6 +28,7 @@ export class GridColspanComponent implements OnInit { gridOptions2!: GridOption; dataset1: any[] = []; dataset2: any[] = []; + hideSubTitle = false; ngOnInit(): void { this.prepareGrid1(); diff --git a/src/app/examples/grid-composite-editor.component.html b/src/app/examples/grid-composite-editor.component.html index 1212fc7a1..3f6013f8b 100644 --- a/src/app/examples/grid-composite-editor.component.html +++ b/src/app/examples/grid-composite-editor.component.html @@ -1,10 +1,7 @@

    {{ title }} - + code + +

    -
    +
    diff --git a/src/app/examples/grid-composite-editor.component.ts b/src/app/examples/grid-composite-editor.component.ts index 317753df1..724ea841e 100644 --- a/src/app/examples/grid-composite-editor.component.ts +++ b/src/app/examples/grid-composite-editor.component.ts @@ -104,6 +104,7 @@ export class GridCompositeEditorComponent implements OnDestroy, OnInit { isCompositeDisabled = false; isMassSelectionDisabled = true; cellCssStyleQueue: string[] = []; + hideSubTitle = false; complexityLevelList = [ { value: 0, label: 'Very Simple' }, { value: 1, label: 'Simple' }, diff --git a/src/app/examples/grid-contextmenu.component.html b/src/app/examples/grid-contextmenu.component.html index 0a9a8e559..4dd79ef2f 100644 --- a/src/app/examples/grid-contextmenu.component.html +++ b/src/app/examples/grid-contextmenu.component.html @@ -1,9 +1,6 @@

    {{ title }} - code + +

    -
    +
    diff --git a/src/app/examples/grid-contextmenu.component.ts b/src/app/examples/grid-contextmenu.component.ts index 3c36debfe..3ab0dea40 100644 --- a/src/app/examples/grid-contextmenu.component.ts +++ b/src/app/examples/grid-contextmenu.component.ts @@ -97,6 +97,7 @@ export class GridContextMenuComponent implements OnInit, OnDestroy { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset!: any[]; + hideSubTitle = false; selectedLanguage: string; constructor(private translate: TranslateService) { diff --git a/src/app/examples/grid-custom-pager.component.ts b/src/app/examples/grid-custom-pager.component.ts index a4a6e8899..a42a2f8fe 100644 --- a/src/app/examples/grid-custom-pager.component.ts +++ b/src/app/examples/grid-custom-pager.component.ts @@ -21,6 +21,7 @@ export class CustomPagerComponent implements BasePaginationComponent { protected _paginationService!: PaginationService; protected _pubSubService!: PubSubService; currentPagination = {} as PaginationMetadata; + hideSubTitle = false; constructor(protected readonly elm: ElementRef) {} diff --git a/src/app/examples/grid-custom-pagination.component.html b/src/app/examples/grid-custom-pagination.component.html index 814db3a03..b2ed8550f 100644 --- a/src/app/examples/grid-custom-pagination.component.html +++ b/src/app/examples/grid-custom-pagination.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    You can create a Custom Pagination by passing an Angular Custom Component and it must implements BasePaginationComponent. Any of the pagination controls could be moved anywhere on the page (for example we purposely moved the page size away from the rest of the pagination elements). diff --git a/src/app/examples/grid-custom-pagination.component.ts b/src/app/examples/grid-custom-pagination.component.ts index 19e852987..9583161e7 100644 --- a/src/app/examples/grid-custom-pagination.component.ts +++ b/src/app/examples/grid-custom-pagination.component.ts @@ -31,6 +31,7 @@ export class GridCustomPaginationComponent implements OnInit { dataset: any[] = []; paginationPosition: 'bottom' | 'top' = 'top'; angularGrid!: AngularGridInstance; + hideSubTitle = false; constructor(protected readonly angularUtilService: AngularUtilService) {} diff --git a/src/app/examples/grid-custom-tooltip.component.html b/src/app/examples/grid-custom-tooltip.component.html index 197d6d507..2e43b13ab 100644 --- a/src/app/examples/grid-custom-tooltip.component.html +++ b/src/app/examples/grid-custom-tooltip.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-custom-tooltip.component.ts b/src/app/examples/grid-custom-tooltip.component.ts index 09b9a6807..2e30dec54 100644 --- a/src/app/examples/grid-custom-tooltip.component.ts +++ b/src/app/examples/grid-custom-tooltip.component.ts @@ -41,6 +41,7 @@ export class GridCustomTooltipComponent implements OnInit { gridOptions!: GridOption; dataset!: any[]; serverApiDelay = 500; + hideSubTitle = false; ngOnInit(): void { this.initializeGrid(); diff --git a/src/app/examples/grid-drag-recycle.component.html b/src/app/examples/grid-drag-recycle.component.html index c04ef7ee9..7615dbcd3 100644 --- a/src/app/examples/grid-drag-recycle.component.html +++ b/src/app/examples/grid-drag-recycle.component.html @@ -10,15 +10,23 @@

    code +

    -
    +
    • Click to select, Ctrl-click to toggle selection(s).
    • Drag one or more rows by the handle icon (1st column) to reorder.
    • Drag one or more rows by selection (2nd or 3rd column) and drag to the recycle bin to delete.
    -
    +
    diff --git a/src/app/examples/grid-drag-recycle.component.ts b/src/app/examples/grid-drag-recycle.component.ts index e9fa4f834..0caf08c3e 100644 --- a/src/app/examples/grid-drag-recycle.component.ts +++ b/src/app/examples/grid-drag-recycle.component.ts @@ -21,6 +21,7 @@ export class GridDragRecycleComponent implements OnInit { dragHelper?: HTMLElement; dragRows: number[] = []; dragMode = ''; + hideSubTitle = false; ngOnInit(): void { this.defineGrids(); diff --git a/src/app/examples/grid-draggrouping.component.html b/src/app/examples/grid-draggrouping.component.html index fe5fd6a88..b503cca23 100644 --- a/src/app/examples/grid-draggrouping.component.html +++ b/src/app/examples/grid-draggrouping.component.html @@ -1,10 +1,7 @@

    {{ title }} - + code + +

    -
    +
    diff --git a/src/app/examples/grid-draggrouping.component.ts b/src/app/examples/grid-draggrouping.component.ts index 02f9e7266..b900ff467 100644 --- a/src/app/examples/grid-draggrouping.component.ts +++ b/src/app/examples/grid-draggrouping.component.ts @@ -48,6 +48,7 @@ export class GridDraggableGroupingComponent implements OnInit, OnDestroy { durationOrderByCount = false; gridObj: any; gridOptions!: GridOption; + hideSubTitle = false; processing = false; selectedGroupingFields: Array = ['', '', '']; excelExportService = new ExcelExportService(); diff --git a/src/app/examples/grid-editor.component.html b/src/app/examples/grid-editor.component.html index 64a207877..5ba0181c1 100644 --- a/src/app/examples/grid-editor.component.html +++ b/src/app/examples/grid-editor.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-editor.component.ts b/src/app/examples/grid-editor.component.ts index a7f903732..12b2bb1f0 100644 --- a/src/app/examples/grid-editor.component.ts +++ b/src/app/examples/grid-editor.component.ts @@ -90,6 +90,7 @@ export class GridEditorComponent implements OnInit { gridOptions!: GridOption; dataset!: any[]; gridObj: any; + hideSubTitle = false; isAutoEdit = true; alertWarning: any; updatedObject: any; diff --git a/src/app/examples/grid-excel-formula.component.html b/src/app/examples/grid-excel-formula.component.html index 974524b89..9ff117438 100644 --- a/src/app/examples/grid-excel-formula.component.html +++ b/src/app/examples/grid-excel-formula.component.html @@ -10,8 +10,17 @@

    code +

    -
    + +
    Grid with Excel Formulas (

    {{ title }} - code + +

    -
    +
    code +

    -
    +
    -
    +
    diff --git a/src/app/examples/grid-frozen.component.ts b/src/app/examples/grid-frozen.component.ts index 9a229c9a4..a8c770605 100644 --- a/src/app/examples/grid-frozen.component.ts +++ b/src/app/examples/grid-frozen.component.ts @@ -35,6 +35,7 @@ export class GridFrozenComponent implements OnInit, OnDestroy { dataset!: any[]; frozenColumnCount = 2; frozenRowCount = 3; + hideSubTitle = false; isFrozenBottom = false; gridObj: any; slickEventHandler: any; diff --git a/src/app/examples/grid-graphql-nopage.component.html b/src/app/examples/grid-graphql-nopage.component.html index 3c59e418a..cb4e9fb86 100644 --- a/src/app/examples/grid-graphql-nopage.component.html +++ b/src/app/examples/grid-graphql-nopage.component.html @@ -10,9 +10,17 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-graphql-nopage.component.ts b/src/app/examples/grid-graphql-nopage.component.ts index fb9d4d673..8be1ccf98 100644 --- a/src/app/examples/grid-graphql-nopage.component.ts +++ b/src/app/examples/grid-graphql-nopage.component.ts @@ -54,6 +54,7 @@ export class GridGraphqlWithoutPaginationComponent implements OnInit { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset = []; + hideSubTitle = false; metrics!: Metrics; graphqlQuery = ''; diff --git a/src/app/examples/grid-graphql.component.html b/src/app/examples/grid-graphql.component.html index e4c4b98a9..3d2e34070 100644 --- a/src/app/examples/grid-graphql.component.html +++ b/src/app/examples/grid-graphql.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-graphql.component.ts b/src/app/examples/grid-graphql.component.ts index 53864ff3a..309716ad9 100644 --- a/src/app/examples/grid-graphql.component.ts +++ b/src/app/examples/grid-graphql.component.ts @@ -51,6 +51,7 @@ export class GridGraphqlComponent implements OnInit, OnDestroy { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset = []; + hideSubTitle = false; metrics!: Metrics; isWithCursor = false; diff --git a/src/app/examples/grid-grouping.component.html b/src/app/examples/grid-grouping.component.html index ec4197969..42846646e 100644 --- a/src/app/examples/grid-grouping.component.html +++ b/src/app/examples/grid-grouping.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-grouping.component.ts b/src/app/examples/grid-grouping.component.ts index 2d3990c3c..b3c10fdb1 100644 --- a/src/app/examples/grid-grouping.component.ts +++ b/src/app/examples/grid-grouping.component.ts @@ -38,6 +38,7 @@ export class GridGroupingComponent implements OnInit { dataset!: any[]; gridObj: any; dataviewObj: any; + hideSubTitle = false; processing = false; excelExportService = new ExcelExportService(); textExportService = new TextExportService(); diff --git a/src/app/examples/grid-header-footer.component.html b/src/app/examples/grid-header-footer.component.html index 1494e139f..61a6bbd08 100644 --- a/src/app/examples/grid-header-footer.component.html +++ b/src/app/examples/grid-header-footer.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-header-footer.component.ts b/src/app/examples/grid-header-footer.component.ts index 9d877e675..1cfaee989 100644 --- a/src/app/examples/grid-header-footer.component.ts +++ b/src/app/examples/grid-header-footer.component.ts @@ -31,6 +31,7 @@ export class GridHeaderFooterComponent implements OnInit { columnDefinitions: Column[] = []; gridOptions!: GridOption; dataset!: any[]; + hideSubTitle = false; ngOnInit(): void { this.columnDefinitions = [ diff --git a/src/app/examples/grid-headerbutton.component.html b/src/app/examples/grid-headerbutton.component.html index 4a7fed8b4..773d9b98a 100644 --- a/src/app/examples/grid-headerbutton.component.html +++ b/src/app/examples/grid-headerbutton.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    Grid 1
    code + -
    +
    -
    +
    • Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In @@ -36,7 +44,7 @@
    -
    +
    diff --git a/src/app/examples/grid-infinite-graphql.component.ts b/src/app/examples/grid-infinite-graphql.component.ts index 8936cafa7..c304b7dcb 100644 --- a/src/app/examples/grid-infinite-graphql.component.ts +++ b/src/app/examples/grid-infinite-graphql.component.ts @@ -39,6 +39,7 @@ export class GridInfiniteGraphqlComponent implements OnInit, OnDestroy { metrics!: Partial; tagDataClass = ''; graphqlQuery = '...'; + hideSubTitle = false; processing = false; selectedLanguage: string; status = { text: 'processing...', class: 'alert alert-danger' }; diff --git a/src/app/examples/grid-infinite-json.component.html b/src/app/examples/grid-infinite-json.component.html index bdb2b2b20..dd30b638b 100644 --- a/src/app/examples/grid-infinite-json.component.html +++ b/src/app/examples/grid-infinite-json.component.html @@ -10,9 +10,17 @@

    code +

    -
    +
    • Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In @@ -23,7 +31,7 @@
      because since we keep appending data, we always have to start from index zero (no offset).
    -
    +
    diff --git a/src/app/examples/grid-infinite-json.component.ts b/src/app/examples/grid-infinite-json.component.ts index f47479d8b..d043bc3ac 100644 --- a/src/app/examples/grid-infinite-json.component.ts +++ b/src/app/examples/grid-infinite-json.component.ts @@ -23,6 +23,7 @@ export class GridInfiniteJsonComponent implements OnInit { angularGrid!: AngularGridInstance; columnDefinitions!: Column[]; dataset: any[] = []; + hideSubTitle = false; gridOptions!: GridOption; metrics!: Partial; shouldResetOnSort = false; diff --git a/src/app/examples/grid-infinite-odata.component.html b/src/app/examples/grid-infinite-odata.component.html index 9467dc718..344ea1c04 100644 --- a/src/app/examples/grid-infinite-odata.component.html +++ b/src/app/examples/grid-infinite-odata.component.html @@ -10,9 +10,17 @@

    code +

    -
    +
    • Infinite scrolling allows the grid to lazy-load rows from the server when reaching the scroll bottom (end) position. In @@ -36,7 +44,7 @@
    -
    +
    diff --git a/src/app/examples/grid-infinite-odata.component.ts b/src/app/examples/grid-infinite-odata.component.ts index e9492f31d..04b9024f5 100644 --- a/src/app/examples/grid-infinite-odata.component.ts +++ b/src/app/examples/grid-infinite-odata.component.ts @@ -29,6 +29,7 @@ export class GridInfiniteOdataComponent implements OnInit { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset: any[] = []; + hideSubTitle = false; isPageErrorTest = false; metrics!: Partial; tagDataClass = ''; diff --git a/src/app/examples/grid-localization.component.html b/src/app/examples/grid-localization.component.html index 571d19767..fa80c0a00 100644 --- a/src/app/examples/grid-localization.component.html +++ b/src/app/examples/grid-localization.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-localization.component.ts b/src/app/examples/grid-localization.component.ts index 53b7438cf..7605bf737 100644 --- a/src/app/examples/grid-localization.component.ts +++ b/src/app/examples/grid-localization.component.ts @@ -64,6 +64,7 @@ export class GridLocalizationComponent implements OnInit, OnDestroy { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset!: any[]; + hideSubTitle = false; selectedLanguage: string; duplicateTitleHeaderCount = 1; gridObj: any; diff --git a/src/app/examples/grid-menu.component.html b/src/app/examples/grid-menu.component.html index 6cc967214..ff088a481 100644 --- a/src/app/examples/grid-menu.component.html +++ b/src/app/examples/grid-menu.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    +
    -
    +
    diff --git a/src/app/examples/grid-odata.component.ts b/src/app/examples/grid-odata.component.ts index e25161778..94d6270f8 100644 --- a/src/app/examples/grid-odata.component.ts +++ b/src/app/examples/grid-odata.component.ts @@ -47,6 +47,7 @@ export class GridOdataComponent implements OnInit { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset = []; + hideSubTitle = false; metrics!: Metrics; paginationOptions!: Pagination; diff --git a/src/app/examples/grid-range.component.html b/src/app/examples/grid-range.component.html index 9b5e62fe2..c92951f28 100644 --- a/src/app/examples/grid-range.component.html +++ b/src/app/examples/grid-range.component.html @@ -10,8 +10,16 @@

    code +

    -
    +

    diff --git a/src/app/examples/grid-range.component.ts b/src/app/examples/grid-range.component.ts index ba0f15454..7b96bc7cf 100644 --- a/src/app/examples/grid-range.component.ts +++ b/src/app/examples/grid-range.component.ts @@ -63,6 +63,7 @@ export class GridRangeComponent implements OnInit, OnDestroy { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset!: any[]; + hideSubTitle = false; selectedLanguage: string; metrics!: Metrics; filterList = [ diff --git a/src/app/examples/grid-resize-by-content.component.html b/src/app/examples/grid-resize-by-content.component.html index 691a69d2d..7e31ca314 100644 --- a/src/app/examples/grid-resize-by-content.component.html +++ b/src/app/examples/grid-resize-by-content.component.html @@ -10,8 +10,16 @@

    code +

    -
    +

    Container Width (950px)

    diff --git a/src/app/examples/grid-resize-by-content.component.ts b/src/app/examples/grid-resize-by-content.component.ts index b7e265f7a..755d8ef2e 100644 --- a/src/app/examples/grid-resize-by-content.component.ts +++ b/src/app/examples/grid-resize-by-content.component.ts @@ -80,6 +80,7 @@ export class GridResizeByContentComponent implements OnInit { dataset: any[] = []; editQueue: any[] = []; editedItems: any = {}; + hideSubTitle = false; isUsingDefaultResize = false; isGridEditable = true; isMassSelectionDisabled = true; diff --git a/src/app/examples/grid-rowdetail.component.html b/src/app/examples/grid-rowdetail.component.html index a320a4576..cabd69220 100644 --- a/src/app/examples/grid-rowdetail.component.html +++ b/src/app/examples/grid-rowdetail.component.html @@ -1,10 +1,6 @@

    {{ title }} - code + +

    -
    +
    diff --git a/src/app/examples/grid-rowdetail.component.ts b/src/app/examples/grid-rowdetail.component.ts index 3c35101d9..3a4fbe525 100644 --- a/src/app/examples/grid-rowdetail.component.ts +++ b/src/app/examples/grid-rowdetail.component.ts @@ -35,6 +35,7 @@ export class GridRowDetailComponent implements OnDestroy, OnInit { gridOptions!: GridOption; dataset: any[] = []; detailViewRowCount = 9; + hideSubTitle = false; flashAlertType = 'info'; message = ''; serverWaitDelay = FAKE_SERVER_DELAY; diff --git a/src/app/examples/grid-rowmove.component.html b/src/app/examples/grid-rowmove.component.html index 19f2401ac..2daa37c2c 100644 --- a/src/app/examples/grid-rowmove.component.html +++ b/src/app/examples/grid-rowmove.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-rowmove.component.ts b/src/app/examples/grid-rowmove.component.ts index 6afe8d2a8..91cb42414 100644 --- a/src/app/examples/grid-rowmove.component.ts +++ b/src/app/examples/grid-rowmove.component.ts @@ -35,6 +35,7 @@ export class GridRowMoveComponent implements OnInit { columnDefinitions!: Column[]; gridOptions!: GridOption; dataset!: any[]; + hideSubTitle = false; angularGridReady(angularGrid: AngularGridInstance) { this.angularGrid = angularGrid; diff --git a/src/app/examples/grid-rowselection.component.html b/src/app/examples/grid-rowselection.component.html index ca603a87d..7892d133e 100644 --- a/src/app/examples/grid-rowselection.component.html +++ b/src/app/examples/grid-rowselection.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    diff --git a/src/app/examples/grid-rowselection.component.ts b/src/app/examples/grid-rowselection.component.ts index b03f1f4a6..a1a7c6f88 100644 --- a/src/app/examples/grid-rowselection.component.ts +++ b/src/app/examples/grid-rowselection.component.ts @@ -36,6 +36,7 @@ export class GridRowSelectionComponent implements OnInit { dataset2!: any[]; gridObj1!: any; gridObj2!: any; + hideSubTitle = false; isGrid2WithPagination = true; selectedTitles = ''; selectedTitle = ''; diff --git a/src/app/examples/grid-state.component.html b/src/app/examples/grid-state.component.html index 6758adc2f..f2121b38c 100644 --- a/src/app/examples/grid-state.component.html +++ b/src/app/examples/grid-state.component.html @@ -10,8 +10,16 @@

    code +

    -
    +
    -
    +
    diff --git a/src/app/examples/grid-tabs.component.ts b/src/app/examples/grid-tabs.component.ts index b51f90050..eab6e1c15 100644 --- a/src/app/examples/grid-tabs.component.ts +++ b/src/app/examples/grid-tabs.component.ts @@ -23,6 +23,7 @@ export class GridTabsComponent implements OnInit { gridOptions2!: GridOption; dataset1!: any[]; dataset2!: any[]; + hideSubTitle = false; constructor(private http: HttpClient) {} diff --git a/src/app/examples/grid-trading.component.html b/src/app/examples/grid-trading.component.html index ba81465c5..d7b8d81a9 100644 --- a/src/app/examples/grid-trading.component.html +++ b/src/app/examples/grid-trading.component.html @@ -1,10 +1,7 @@

    {{ title }} - + code + +

    -
    +
    diff --git a/src/app/examples/grid-trading.component.ts b/src/app/examples/grid-trading.component.ts index 4e54a6984..63df5f235 100644 --- a/src/app/examples/grid-trading.component.ts +++ b/src/app/examples/grid-trading.component.ts @@ -92,6 +92,7 @@ export class GridTradingComponent implements OnDestroy, OnInit {
`; angularGrid!: AngularGridInstance; gridOptions!: GridOption; + hideSubTitle = false; columnDefinitions: Column[] = []; dataset: any[] = []; isFullScreen = false; diff --git a/src/app/examples/grid-tree-data-hierarchical.component.html b/src/app/examples/grid-tree-data-hierarchical.component.html index 501d6ba7b..895a47f3b 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.html +++ b/src/app/examples/grid-tree-data-hierarchical.component.html @@ -10,8 +10,16 @@

code +

-
+
diff --git a/src/app/examples/grid-tree-data-hierarchical.component.ts b/src/app/examples/grid-tree-data-hierarchical.component.ts index c2669cd2b..b5323ef4c 100644 --- a/src/app/examples/grid-tree-data-hierarchical.component.ts +++ b/src/app/examples/grid-tree-data-hierarchical.component.ts @@ -36,6 +36,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit { gridOptions!: GridOption; columnDefinitions!: Column[]; datasetHierarchical: any[] = []; + hideSubTitle = false; isExcludingChildWhenFiltering = false; isAutoApproveParentItemWhenTreeColumnIsValid = true; isAutoRecalcTotalsOnFilterChange = false; diff --git a/src/app/examples/grid-tree-data-parent-child.component.html b/src/app/examples/grid-tree-data-parent-child.component.html index 353b43f3b..6425ab352 100644 --- a/src/app/examples/grid-tree-data-parent-child.component.html +++ b/src/app/examples/grid-tree-data-parent-child.component.html @@ -10,8 +10,16 @@

code +

-
+
diff --git a/src/app/examples/grid-tree-data-parent-child.component.ts b/src/app/examples/grid-tree-data-parent-child.component.ts index 187cd9ecb..cdde118ca 100644 --- a/src/app/examples/grid-tree-data-parent-child.component.ts +++ b/src/app/examples/grid-tree-data-parent-child.component.ts @@ -39,6 +39,7 @@ export class GridTreeDataParentChildComponent implements OnInit { columnDefinitions!: Column[]; dataset!: any[]; loadingClass = ''; + hideSubTitle = false; isLargeDataset = false; hasNoExpandCollapseChanged = true; treeToggleItems: TreeToggledItem[] = []; diff --git a/src/app/examples/grid18.component.html b/src/app/examples/grid18.component.html index 46df1682d..37b0569d6 100644 --- a/src/app/examples/grid18.component.html +++ b/src/app/examples/grid18.component.html @@ -14,13 +14,13 @@

class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" - (click)="toggleSubTitle()" + (click)="hideSubTitle = !hideSubTitle" >

-
+
Allow creating a grid dynamically by importing an external CSV or Excel file. This script demo will read the CSV file and will consider the first row as the column header and create the column definitions accordingly, while the next few rows will be considered the dataset. Note that this example is demoing a CSV file import but in your application you could easily implemnt diff --git a/src/app/examples/grid18.component.ts b/src/app/examples/grid18.component.ts index cedf27094..7258bac2c 100644 --- a/src/app/examples/grid18.component.ts +++ b/src/app/examples/grid18.component.ts @@ -14,7 +14,7 @@ export class Grid18Component { gridOptions!: GridOption; dataset: any[] = []; gridCreated = false; - showSubTitle = true; + hideSubTitle = false; uploadFileRef = ''; templateUrl = `${sampleDataRoot}/users.csv`; @@ -99,10 +99,4 @@ export class Grid18Component { this.gridCreated = true; this.cd.detectChanges(); } - - toggleSubTitle() { - this.showSubTitle = !this.showSubTitle; - const action = this.showSubTitle ? 'remove' : 'add'; - document.querySelector('.subtitle')?.classList[action]('hidden'); - } } diff --git a/src/app/examples/grid43.component.html b/src/app/examples/grid43.component.html index 43a8c29ee..c0825bd09 100644 --- a/src/app/examples/grid43.component.html +++ b/src/app/examples/grid43.component.html @@ -11,16 +11,16 @@

-
+

NOTES: rowspan is an opt-in feature, because of its small perf hit (it needs to loop through all row metadatas to map all rowspan), and requires the enableCellRowSpan grid option to be enabled to work properly. diff --git a/src/app/examples/grid43.component.ts b/src/app/examples/grid43.component.ts index 26462377a..9235c85ca 100644 --- a/src/app/examples/grid43.component.ts +++ b/src/app/examples/grid43.component.ts @@ -14,8 +14,8 @@ export class Grid43Component implements OnInit { gridOptions!: GridOption; dataset: any[] = []; isEditable = false; + hideSubTitle = false; showEmployeeId = true; - showSubTitle = true; metadata: ItemMetadata | Record = { // 10001: Davolio 0: { @@ -445,10 +445,4 @@ export class Grid43Component implements OnInit { this.angularGrid.slickGrid.remapAllColumnsRowSpan(); this.angularGrid.slickGrid.invalidate(); } - - toggleSubTitle() { - this.showSubTitle = !this.showSubTitle; - const action = this.showSubTitle ? 'remove' : 'add'; - document.querySelector('.subtitle')?.classList[action]('hidden'); - } } diff --git a/src/app/examples/grid44.component.html b/src/app/examples/grid44.component.html index 098476849..a4d3e9544 100644 --- a/src/app/examples/grid44.component.html +++ b/src/app/examples/grid44.component.html @@ -14,13 +14,13 @@

class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" - (click)="toggleSubTitle()" + (click)="hideSubTitle = !hideSubTitle" >

-
+

This page demonstrates colspan & rowspan using DataView with item metadata. Note: colspan & rowspan are rendered via row/cell indexes, any operations that could change these diff --git a/src/app/examples/grid44.component.ts b/src/app/examples/grid44.component.ts index acb2e1778..b9a2c9c5f 100644 --- a/src/app/examples/grid44.component.ts +++ b/src/app/examples/grid44.component.ts @@ -17,7 +17,7 @@ export class Grid44Component implements OnInit { angularGrid!: AngularGridInstance; dataLn: number | string = 'loading...'; dataset: any[] = []; - showSubTitle = true; + hideSubTitle = false; scrollToRow = 100; metadata: Record = { 0: { @@ -371,10 +371,4 @@ export class Grid44Component implements OnInit { this.angularGrid.slickGrid?.scrollRowToTop(this.scrollToRow); return false; } - - toggleSubTitle() { - this.showSubTitle = !this.showSubTitle; - const action = this.showSubTitle ? 'remove' : 'add'; - document.querySelector('.subtitle')?.classList[action]('hidden'); - } } diff --git a/src/app/examples/grid45.component.html b/src/app/examples/grid45.component.html index 693b4f79e..75d247174 100644 --- a/src/app/examples/grid45.component.html +++ b/src/app/examples/grid45.component.html @@ -14,17 +14,17 @@

class="ms-2 btn btn-outline-secondary btn-sm btn-icon" type="button" data-test="toggle-subtitle" - (click)="toggleSubTitle()" + (click)="hideSubTitle = !hideSubTitle" > -

-
+
Add functionality to show extra information with a Row Detail View, (('#demo-container')!.dataset.bsTheme = 'light'; } } - - toggleSubTitle() { - this.showSubTitle = !this.showSubTitle; - const action = this.showSubTitle ? 'remove' : 'add'; - document.querySelector('.subtitle')?.classList[action]('hidden'); - this.angularGrid.resizerService?.resizeGrid(1); - } } diff --git a/src/app/examples/swt-common-grid-test.component.html b/src/app/examples/swt-common-grid-test.component.html index e5078952c..cd5bac4ec 100644 --- a/src/app/examples/swt-common-grid-test.component.html +++ b/src/app/examples/swt-common-grid-test.component.html @@ -11,7 +11,7 @@

-
+
diff --git a/src/app/examples/swt-common-grid-test.component.ts b/src/app/examples/swt-common-grid-test.component.ts index 656511f79..79305630f 100644 --- a/src/app/examples/swt-common-grid-test.component.ts +++ b/src/app/examples/swt-common-grid-test.component.ts @@ -20,6 +20,7 @@ export class SwtCommonGridTestComponent implements OnInit, AfterViewInit { subTitle = `A simple component to show that it is possible to create a custom Backend Service for any other backend querying, the example below is for Oracle.`; testurl = 'http://127.0.0.1:8080/grid!display.do?'; currentUrl = this.testurl; + hideSubTitle = false; @ViewChild('commonGrid1', { static: true }) commonGrid!: SwtCommonGridComponent; @ViewChild('commonGridPag1', { static: true }) commonGridPag!: SwtCommonGridPaginationComponent; diff --git a/src/app/examples/swt-common-grid.component.ts b/src/app/examples/swt-common-grid.component.ts index 9811e07ac..773a79f6b 100644 --- a/src/app/examples/swt-common-grid.component.ts +++ b/src/app/examples/swt-common-grid.component.ts @@ -66,6 +66,7 @@ export class SwtCommonGridComponent implements OnInit, AfterViewInit, BackendSer dataset!: any[]; gridObj: any; dataviewObj: any; + hideSubTitle = false; isAutoEdit = false; updatedObject: any; isMultiSelect = true;