Skip to content

Commit

Permalink
feat!: upgrade to Angular-Slickgrid 8.12.1
Browse files Browse the repository at this point in the history
  • Loading branch information
@ghiscoding
ghiscoding committed Jan 25, 2025
1 parent cdbf7d0 commit c063193
Show file tree
Hide file tree
Showing 12 changed files with 522 additions and 222 deletions.
18 changes: 9 additions & 9 deletions bootstrap5-demo-with-locales/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,13 +22,13 @@
"@angular/router": "^18.2.13",
"@formkit/tempo": "^0.1.2",
"@ng-select/ng-select": "^13.9.1",
"@slickgrid-universal/composite-editor-component": "^5.12.0",
"@slickgrid-universal/custom-tooltip-plugin": "^5.12.0",
"@slickgrid-universal/excel-export": "^5.12.0",
"@slickgrid-universal/graphql": "^5.12.0",
"@slickgrid-universal/odata": "^5.12.0",
"@slickgrid-universal/text-export": "^5.12.0",
"angular-slickgrid": "^8.12.0",
"@slickgrid-universal/composite-editor-component": "^5.12.1",
"@slickgrid-universal/custom-tooltip-plugin": "^5.12.1",
"@slickgrid-universal/excel-export": "^5.12.1",
"@slickgrid-universal/graphql": "^5.12.1",
"@slickgrid-universal/odata": "^5.12.1",
"@slickgrid-universal/text-export": "^5.12.1",
"angular-slickgrid": "^8.12.1",
"bootstrap": "^5.3.3",
"custom-event-polyfill": "^1.0.7",
"dompurify": "^3.2.3",
Expand All @@ -53,9 +53,9 @@
"@ngx-translate/core": "^15.0.0",
"@popperjs/core": "^2.11.8",
"@types/fnando__sparkline": "^0.3.7",
"@types/node": "^22.10.7",
"@types/node": "^22.10.10",
"angular-eslint": "^18.4.3",
"eslint": "^9.18.0",
"eslint": "^9.19.0",
"eslint-plugin-n": "^17.15.1",
"sass": "^1.83.4",
"ts-node": "^10.9.2",
Expand Down
1 change: 1 addition & 0 deletions bootstrap5-demo-with-locales/src/app/examples/grid-tree-data-hierarchical.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ export class GridTreeDataHierarchicalComponent implements OnInit {

this.gridOptions = {
autoResize: {
autoHeight: false,
container: '#demo-container',
rightPadding: 10
},
Expand Down
3 changes: 3 additions & 0 deletions bootstrap5-demo-with-locales/src/app/examples/grid43.component.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,9 @@ <h2>
>Toggle Editing: <span id="isEditable" class="text-italic">{{ isEditable }}</span></span
>
</button>
<button class="btn btn-outline-secondary btn-sm btn-icon mx-1" data-test="export-excel-btn" (click)="exportToExcel()">
<i class="mdi mdi-file-excel-outline text-success"></i> Export to Excel
</button>

<angular-slickgrid
gridId="grid43"
Expand Down
7 changes: 6 additions & 1 deletion bootstrap5-demo-with-locales/src/app/examples/grid43.component.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { ExcelExportService } from '@slickgrid-universal/excel-export';
})
export class Grid43Component implements OnInit {
columnDefinitions: Column[] = [];
excelExportService = new ExcelExportService();
angularGrid!: AngularGridInstance;
gridOptions!: GridOption;
dataset: any[] = [];
Expand Down Expand Up @@ -152,7 +153,7 @@ export class Grid43Component implements OnInit {
enableColumnReorder: true,
enableCellRowSpan: true,
enableExcelExport: true,
externalResources: [new ExcelExportService()],
externalResources: [this.excelExportService],
enableExcelCopyBuffer: true,
autoEdit: true,
editable: false,
Expand All @@ -171,6 +172,10 @@ export class Grid43Component implements OnInit {
};
}

exportToExcel() {
this.excelExportService.exportToExcel({ filename: 'export', format: 'xlsx' });
}

navigateDown() {
this.angularGrid?.slickGrid?.navigateDown();
}
Expand Down
179 changes: 160 additions & 19 deletions bootstrap5-demo-with-locales/src/app/examples/grid44.component.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,10 @@
import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { ExcelExportService } from '@slickgrid-universal/excel-export';
import { AngularGridInstance, Column, Formatter, GridOption, type ItemMetadata } from 'angular-slickgrid';

const rowCellValueFormatter: Formatter = (row, cell, value) => {
return `<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
};
const rowCellValueFormatter: Formatter = (row, cell, value) =>
`<div class="cellValue">${value.toFixed(2)}</div><div class="valueComment">${row}.${cell}</div>`;
const rowCellValueExportFormatter: Formatter = (_row, _cell, value) => value.toFixed(2);

@Component({
styleUrls: ['grid44.component.scss'],
Expand Down Expand Up @@ -75,60 +76,198 @@ export class Grid44Component implements OnInit {
defineGrid() {
this.columnDefinitions = [
{ id: 'title', name: 'Title', field: 'title', minWidth: 80 },
{ id: 'revenueGrowth', name: 'Revenue Growth', field: 'revenueGrowth', formatter: rowCellValueFormatter, minWidth: 120 },
{
id: 'revenueGrowth',
name: 'Revenue Growth',
field: 'revenueGrowth',
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
minWidth: 120,
},
{
id: 'pricingPolicy',
name: 'Pricing Policy',
field: 'pricingPolicy',
minWidth: 110,
sortable: true,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'policyIndex',
name: 'Policy Index',
field: 'policyIndex',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'expenseControl',
name: 'Expense Control',
field: 'expenseControl',
minWidth: 110,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'excessCash',
name: 'Excess Cash',
field: 'excessCash',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'netTradeCycle',
name: 'Net Trade Cycle',
field: 'netTradeCycle',
minWidth: 110,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'costCapital',
name: 'Cost of Capital',
field: 'costCapital',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'revenueGrowth2',
name: 'Revenue Growth',
field: 'revenueGrowth2',
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
minWidth: 120,
},
{ id: 'policyIndex', name: 'Policy Index', field: 'policyIndex', minWidth: 100, formatter: rowCellValueFormatter },
{ id: 'expenseControl', name: 'Expense Control', field: 'expenseControl', minWidth: 110, formatter: rowCellValueFormatter },
{ id: 'excessCash', name: 'Excess Cash', field: 'excessCash', minWidth: 100, formatter: rowCellValueFormatter },
{ id: 'netTradeCycle', name: 'Net Trade Cycle', field: 'netTradeCycle', minWidth: 110, formatter: rowCellValueFormatter },
{ id: 'costCapital', name: 'Cost of Capital', field: 'costCapital', minWidth: 100, formatter: rowCellValueFormatter },
{ id: 'revenueGrowth2', name: 'Revenue Growth', field: 'revenueGrowth2', formatter: rowCellValueFormatter, minWidth: 120 },
{
id: 'pricingPolicy2',
name: 'Pricing Policy',
field: 'pricingPolicy2',
minWidth: 110,
sortable: true,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'policyIndex2',
name: 'Policy Index',
field: 'policyIndex2',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{ id: 'policyIndex2', name: 'Policy Index', field: 'policyIndex2', minWidth: 100, formatter: rowCellValueFormatter },
{
id: 'expenseControl2',
name: 'Expense Control',
field: 'expenseControl2',
minWidth: 110,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'excessCash2',
name: 'Excess Cash',
field: 'excessCash2',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'netTradeCycle2',
name: 'Net Trade Cycle',
field: 'netTradeCycle2',
minWidth: 110,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'costCapital2',
name: 'Cost of Capital',
field: 'costCapital2',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'revenueGrowth3',
name: 'Revenue Growth',
field: 'revenueGrowth3',
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
minWidth: 120,
},
{ id: 'excessCash2', name: 'Excess Cash', field: 'excessCash2', minWidth: 100, formatter: rowCellValueFormatter },
{ id: 'netTradeCycle2', name: 'Net Trade Cycle', field: 'netTradeCycle2', minWidth: 110, formatter: rowCellValueFormatter },
{ id: 'costCapital2', name: 'Cost of Capital', field: 'costCapital2', minWidth: 100, formatter: rowCellValueFormatter },
{ id: 'revenueGrowth3', name: 'Revenue Growth', field: 'revenueGrowth3', formatter: rowCellValueFormatter, minWidth: 120 },
{
id: 'pricingPolicy3',
name: 'Pricing Policy',
field: 'pricingPolicy3',
minWidth: 110,
sortable: true,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'policyIndex3',
name: 'Policy Index',
field: 'policyIndex3',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{ id: 'policyIndex3', name: 'Policy Index', field: 'policyIndex3', minWidth: 100, formatter: rowCellValueFormatter },
{
id: 'expenseControl3',
name: 'Expense Control',
field: 'expenseControl3',
minWidth: 110,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'excessCash3',
name: 'Excess Cash',
field: 'excessCash3',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'netTradeCycle3',
name: 'Net Trade Cycle',
field: 'netTradeCycle3',
minWidth: 110,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{
id: 'costCapital3',
name: 'Cost of Capital',
field: 'costCapital3',
minWidth: 100,
exportCustomFormatter: rowCellValueExportFormatter,
formatter: rowCellValueFormatter,
type: 'number',
},
{ id: 'excessCash3', name: 'Excess Cash', field: 'excessCash3', minWidth: 100, formatter: rowCellValueFormatter },
{ id: 'netTradeCycle3', name: 'Net Trade Cycle', field: 'netTradeCycle3', minWidth: 110, formatter: rowCellValueFormatter },
{ id: 'costCapital3', name: 'Cost of Capital', field: 'costCapital3', minWidth: 100, formatter: rowCellValueFormatter },
];

this.gridOptions = {
Expand All @@ -143,6 +282,8 @@ export class Grid44Component implements OnInit {
getRowMetadata: (item: any, row: number) => this.renderDifferentColspan(item, row),
},
},
enableExcelExport: true,
externalResources: [new ExcelExportService()],
rowTopOffsetRenderType: 'top', // rowspan doesn't render well with 'transform', default is 'top'
};
}
Expand Down
Loading

0 comments on commit c063193

Please sign in to comment.