diff --git a/README.md b/README.md
index a4e73ff1e..a13d5078e 100644
--- a/README.md
+++ b/README.md
@@ -104,7 +104,7 @@ npm run test:watch
- [ ] Services
- [x] Collection
- [ ] Excel Export (**separate package**)
- - [ ] Export Text (**separate package?!**)
+ - [ ] Export Text (**separate package**)
- [x] Extension
- [x] Filter
- [ ] GraphQL (**separate package**)
@@ -122,10 +122,10 @@ npm run test:watch
- [x] Jest Debugger
- [ ] Add Multiple Example Demos with Vanilla implementation
- [ ] Add GitHub Demo website
- - [ ] Add Cypress E2E tests
- [ ] Add CI/CD (CircleCI or GitHub Actions)
- [ ] Add Jest Unit tests
- - [ ] Build and run on every PR
+ - [ ] Add Cypress E2E tests
- [ ] Add Code Coverage (codecov)
+ - [ ] Build and run on every PR
- [ ] Remove any Deprecated code
- [ ] Create a Migration Guide
diff --git a/packages/vanilla-bundle-examples/src/examples/example01.ts b/packages/vanilla-bundle-examples/src/examples/example01.ts
index 9cfe2cb5c..2dee0af01 100644
--- a/packages/vanilla-bundle-examples/src/examples/example01.ts
+++ b/packages/vanilla-bundle-examples/src/examples/example01.ts
@@ -1,4 +1,4 @@
-import { Editors, FieldType, GroupTotalFormatters, Formatters, OperatorType, GridOption } from '@slickgrid-universal/common';
+import { Column, Editors, FieldType, GroupTotalFormatters, Formatters, OperatorType, GridOption } from '@slickgrid-universal/common';
import { Slicker } from '@slickgrid-universal/vanilla-bundle';
const actionFormatter = (row, cell, value, columnDef, dataContext) => {
@@ -21,7 +21,7 @@ const myCustomTitleValidator = (value, args) => {
export class Example1 {
gridClass;
gridClassName;
- columnDefinitions;
+ columnDefinitions: Column[];
gridOptions: GridOption;
dataset;
dataviewObj: any;
diff --git a/packages/vanilla-bundle-examples/src/examples/example02.ts b/packages/vanilla-bundle-examples/src/examples/example02.ts
index ebb299014..5ba5f0314 100644
--- a/packages/vanilla-bundle-examples/src/examples/example02.ts
+++ b/packages/vanilla-bundle-examples/src/examples/example02.ts
@@ -1,4 +1,4 @@
-import { Aggregators, FieldType, Sorters, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common';
+import { Aggregators, Column, FieldType, Sorters, SortDirectionNumber, Grouping, GroupTotalFormatters, Formatters, GridOption } from '@slickgrid-universal/common';
import { Slicker } from '@slickgrid-universal/vanilla-bundle';
const actionFormatter = (row, cell, value, columnDef, dataContext) => {
@@ -21,7 +21,7 @@ const myCustomTitleValidator = (value, args) => {
export class Example2 {
gridClass;
gridClassName;
- columnDefinitions;
+ columnDefinitions: Column[];
gridOptions: GridOption;
dataset;
dataviewObj: any;
diff --git a/packages/vanilla-bundle-examples/src/examples/example04.ts b/packages/vanilla-bundle-examples/src/examples/example04.ts
index 290638946..6083cc6a2 100644
--- a/packages/vanilla-bundle-examples/src/examples/example04.ts
+++ b/packages/vanilla-bundle-examples/src/examples/example04.ts
@@ -1,4 +1,4 @@
-import { GridOption } from '@slickgrid-universal/common';
+import { Column, GridOption } from '@slickgrid-universal/common';
import { Slicker } from '@slickgrid-universal/vanilla-bundle';
import './example04.scss';
@@ -6,9 +6,9 @@ export class Example4 {
gridClass;
gridClassName;
_commandQueue = [];
- columnDefinitions;
+ columnDefinitions: Column[];
gridOptions: GridOption;
- dataset;
+ dataset: any[];
dataViewObj: any;
gridObj: any;
commandQueue = [];
@@ -40,29 +40,21 @@ export class Example4 {
initializeGrid() {
this.columnDefinitions = [
- { id: "title", name: "Title", field: "title", width: 220, cssClass: "cell-title", filterable: true, formatter: this.taskNameFormatter.bind(this), editor: Slicker.Editors.text },
- { id: "duration", name: "Duration", field: "duration", editor: Slicker.Editors.text, minWidth: 90 },
- { id: "%", name: "% Complete", field: "percentComplete", width: 120, resizable: false, formatter: Slicker.Formatters.percentCompleteBar, editor: Slicker.Editors.slider },
- { id: "start", name: "Start", field: "start", minWidth: 60 },
- { id: "finish", name: "Finish", field: "finish", minWidth: 60 },
+ { id: 'title', name: 'Title', field: 'title', width: 220, cssClass: 'cell-title', filterable: true, formatter: this.taskNameFormatter.bind(this) },
+ { id: 'duration', name: 'Duration', field: 'duration', minWidth: 90 },
+ { id: '%', name: '% Complete', field: 'percentComplete', width: 120, resizable: false, formatter: Slicker.Formatters.percentCompleteBar },
+ { id: 'start', name: 'Start', field: 'start', minWidth: 60 },
+ { id: 'finish', name: 'Finish', field: 'finish', minWidth: 60 },
{
- id: "effort-driven", name: "Effort Driven", width: 80, minWidth: 20, maxWidth: 80, cssClass: "cell-effort-driven", field: "effortDriven",
- formatter: Slicker.Formatters.checkmarkMaterial, editor: Slicker.Editors.checkbox, cannotTriggerInsert: true
+ id: 'effort-driven', name: 'Effort Driven', width: 80, minWidth: 20, maxWidth: 80, cssClass: 'cell-effort-driven', field: 'effortDriven',
+ formatter: Slicker.Formatters.checkmarkMaterial, cannotTriggerInsert: true
}
];
this.gridOptions = {
- autoEdit: true, // true single click (false for double-click)
- autoCommitEdit: true,
- asyncEditorLoading: false,
- editable: true,
autoResize: {
container: '.demo-container',
},
- dataView: {
- inlineFilters: false
- },
- // enableFiltering: true,
enableAutoSizeColumns: true,
enableAutoResize: true,
// enableCellNavigation: true,
@@ -99,7 +91,7 @@ export class Example4 {
taskNameFormatter(row, cell, value, columnDef, dataContext) {
if (value == null || value == undefined || dataContext === undefined) { return ''; }
-
+ console.log('formatter collased', dataContext?._collapsed)
value = value.replace(/&/g, '&').replace(//g, '>');
const spacer = ``;
const idx = this.dataViewObj.getIdxById(dataContext.id);
@@ -109,9 +101,8 @@ export class Example4 {
} else {
return `${spacer} ${value}`;
}
- } else {
- return `${spacer} ${value}`;
}
+ return `${spacer} ${value}`;
}
myFilter(item) {
@@ -119,17 +110,18 @@ export class Example4 {
// return false;
// }
- if (this.searchString != "" && item["title"].indexOf(this.searchString) == -1) {
+ if (this.searchString != '' && item['title'].indexOf(this.searchString) == -1) {
return false;
}
if (item.parent != null) {
- var parent = this.dataset[item.parent];
+ var parent = this.dataset.find(itm => itm.id === `id_${+(item.parent)}`);
while (parent) {
- if (parent._collapsed || /*(parent["percentComplete"] < percentCompleteThreshold) ||*/ (this.searchString != "" && parent["title"].indexOf(this.searchString) == -1)) {
+ if (parent._collapsed || /*(parent["percentComplete"] < percentCompleteThreshold) ||*/ (this.searchString != '' && parent['title'].indexOf(this.searchString) == -1)) {
return false;
}
- parent = this.dataset[parent.parent];
+ var parentId = parent.parent !== null ? `id_${parent.parent}` : null;
+ parent = this.dataset.find(itm2 => itm2.id === parentId);
}
}
return true;
@@ -220,10 +212,10 @@ export class Example4 {
console.log(nextOutsideItemIdx, this.dataset[nextOutsideItemIdx])
const newItem = {
- id,
+ id: 'id_' + id,
parent: parentItemFound.id.replace('id_', ''),
indent: newIndent,
- title: `Task${id}`,
+ title: `Task ${id}`,
duration: '1 day',
percentComplete: 0,
start: '01/01/2009',
@@ -237,18 +229,11 @@ export class Example4 {
handleOnClick(event: any) {
const eventDetail = event?.detail;
const args = event?.detail?.args;
- console.log(eventDetail)
- console.log('onclick', $(eventDetail.eventData.target), $(eventDetail.eventData).hasClass("toggle"))
- if ($(eventDetail.eventData.target).hasClass("toggle")) {
+
+ if ($(eventDetail?.eventData?.target).hasClass('toggle')) {
var item = this.dataViewObj.getItem(args.row);
- console.log(item)
if (item) {
- if (!item._collapsed) {
- item._collapsed = true;
- } else {
- item._collapsed = false;
- }
-
+ item._collapsed = !item._collapsed ? true : false;
this.dataViewObj.updateItem(item.id, item);
}
event.stopImmediatePropagation();
@@ -316,15 +301,15 @@ export class Example4 {
parent = null;
}
- d["id"] = "id_" + i;
- d["indent"] = indent;
- d["parent"] = parent;
- d["title"] = "Task " + i;
- d["duration"] = "5 days";
- d["percentComplete"] = Math.round(Math.random() * 100);
- d["start"] = "01/01/2009";
- d["finish"] = "01/05/2009";
- d["effortDriven"] = (i % 5 == 0);
+ d['id'] = 'id_' + i;
+ d['indent'] = indent;
+ d['parent'] = parent;
+ d['title'] = 'Task ' + i;
+ d['duration'] = '5 days';
+ d['percentComplete'] = Math.round(Math.random() * 100);
+ d['start'] = '01/01/2009';
+ d['finish'] = '01/05/2009';
+ d['effortDriven'] = (i % 5 == 0);
}
return data;
}