Skip to content
This repository was archived by the owner on Jun 1, 2025. It is now read-only.

Commit 1f768a5

Browse files
ghiscodingghiscoding
committed
feat(plugin): new Row Based Editing
1 parent ef08c0f commit 1f768a5

16 files changed

+700
-217
lines changed

‎package.json

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -50,13 +50,13 @@
5050
},
5151
"dependencies": {
5252
"@ngx-translate/core": "^15.0.0",
53-
"@slickgrid-universal/common": "~4.2.0",
54-
"@slickgrid-universal/custom-footer-component": "~4.2.0",
55-
"@slickgrid-universal/empty-warning-component": "~4.2.0",
56-
"@slickgrid-universal/event-pub-sub": "~4.2.0",
57-
"@slickgrid-universal/pagination-component": "~4.2.0",
58-
"@slickgrid-universal/row-detail-view-plugin": "~4.2.0",
59-
"@slickgrid-universal/rxjs-observable": "~4.2.0",
53+
"@slickgrid-universal/common": "~4.3.0",
54+
"@slickgrid-universal/custom-footer-component": "~4.3.0",
55+
"@slickgrid-universal/empty-warning-component": "~4.3.0",
56+
"@slickgrid-universal/event-pub-sub": "~4.3.0",
57+
"@slickgrid-universal/pagination-component": "~4.3.0",
58+
"@slickgrid-universal/row-detail-view-plugin": "~4.3.0",
59+
"@slickgrid-universal/rxjs-observable": "~4.3.0",
6060
"dequal": "^2.0.3",
6161
"dompurify": "^3.0.8",
6262
"rxjs": "^7.8.1",
@@ -65,11 +65,11 @@
6565
"devDependencies": {
6666
"@4tw/cypress-drag-drop": "^2.2.5",
6767
"@angular-devkit/build-angular": "^17.1.0",
68-
"@angular-eslint/builder": "^17.2.0",
69-
"@angular-eslint/eslint-plugin": "^17.2.0",
70-
"@angular-eslint/eslint-plugin-template": "^17.2.0",
71-
"@angular-eslint/schematics": "^17.2.0",
72-
"@angular-eslint/template-parser": "^17.2.0",
68+
"@angular-eslint/builder": "^17.2.1",
69+
"@angular-eslint/eslint-plugin": "^17.2.1",
70+
"@angular-eslint/eslint-plugin-template": "^17.2.1",
71+
"@angular-eslint/schematics": "^17.2.1",
72+
"@angular-eslint/template-parser": "^17.2.1",
7373
"@angular/animations": "^17.1.0",
7474
"@angular/cli": "^17.1.0",
7575
"@angular/common": "^17.1.0",
@@ -87,12 +87,12 @@
8787
"@ngx-translate/http-loader": "^8.0.0",
8888
"@popperjs/core": "^2.11.8",
8989
"@release-it/conventional-changelog": "^8.0.1",
90-
"@slickgrid-universal/composite-editor-component": "~4.2.0",
91-
"@slickgrid-universal/custom-tooltip-plugin": "~4.2.0",
92-
"@slickgrid-universal/excel-export": "~4.2.0",
93-
"@slickgrid-universal/graphql": "~4.2.0",
94-
"@slickgrid-universal/odata": "~4.2.0",
95-
"@slickgrid-universal/text-export": "~4.2.0",
90+
"@slickgrid-universal/composite-editor-component": "~4.3.0",
91+
"@slickgrid-universal/custom-tooltip-plugin": "~4.3.0",
92+
"@slickgrid-universal/excel-export": "~4.3.0",
93+
"@slickgrid-universal/graphql": "~4.3.0",
94+
"@slickgrid-universal/odata": "~4.3.0",
95+
"@slickgrid-universal/text-export": "~4.3.0",
9696
"@types/dompurify": "^3.0.5",
9797
"@types/flatpickr": "^3.1.2",
9898
"@types/fnando__sparkline": "^0.3.7",

‎src/app/app-routing.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { GridAddItemComponent } from './examples/grid-additem.component';
33
import { GridAngularComponent } from './examples/grid-angular.component';
44
import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
55
import { GridBasicComponent } from './examples/grid-basic.component';
6+
import { GridBaseRowEditingComponent } from './examples/grid-base-row-editing.component';
67
import { GridClientSideComponent } from './examples/grid-clientside.component';
78
import { GridColspanComponent } from './examples/grid-colspan.component';
89
import { GridCompositeEditorComponent } from './examples/grid-composite-editor.component';
@@ -42,6 +43,7 @@ const routes: Routes = [
4243
{ path: 'home', component: HomeComponent },
4344
{ path: 'angular-components', component: GridAngularComponent },
4445
{ path: 'additem', component: GridAddItemComponent },
46+
{ path: 'base-row-editing', component: GridBaseRowEditingComponent },
4547
{ path: 'autoheight', component: GridAutoHeightComponent },
4648
{ path: 'basic', component: GridBasicComponent },
4749
{ path: 'colspan', component: GridColspanComponent },

‎src/app/app.component.html

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -153,6 +153,11 @@
153153
34- Custom header & footer templates
154154
</a>
155155
</li>
156+
<li class="nav-item">
157+
<a class="nav-link" routerLinkActive="active" [routerLink]="['/base-row-editing']">
158+
35- Row Based Editing
159+
</a>
160+
</li>
156161
</ul>
157162
</section>
158163

‎src/app/app.module.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import { EditorNgSelectComponent } from './examples/editor-ng-select.component';
1515
import { FilterNgSelectComponent } from './examples/filter-ng-select.component';
1616
import { GridAddItemComponent } from './examples/grid-additem.component';
1717
import { GridAutoHeightComponent } from './examples/grid-autoheight.component';
18+
import { GridBaseRowEditingComponent } from './examples/grid-base-row-editing.component';
1819
import { GridBasicComponent } from './examples/grid-basic.component';
1920
import { GridClientSideComponent } from './examples/grid-clientside.component';
2021
import { GridColspanComponent } from './examples/grid-colspan.component';
@@ -97,6 +98,7 @@ export function appInitializerFactory(translate: TranslateService, injector: Inj
9798
GridAddItemComponent,
9899
GridAngularComponent,
99100
GridAutoHeightComponent,
101+
GridBaseRowEditingComponent,
100102
GridBasicComponent,
101103
GridClientSideComponent,
102104
GridColspanComponent,

‎src/app/examples/grid-base-row-editing.component.html

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<h2>
2+
Example 35: Row Based Editing
3+
<span class="float-end">
4+
<a style="font-size: 18px"
5+
target="_blank"
6+
href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-base-row-editing.component.ts">
7+
<span class="fa fa-link"></span> code
8+
</a>
9+
</span>
10+
</h2>
11+
12+
<div class="subtitle">
13+
<ul>
14+
<li>
15+
The Row Based Edit plugin allows you to edit either a single or multiple
16+
specific rows at a time, while disabling the rest of the grid rows.
17+
</li>
18+
<li>
19+
Editedable rows, as well as modified cells are highlighted with a
20+
different color, which you can customize using css variables (see
21+
<a
22+
target="_blank"
23+
href="https://github.com/ghiscoding/Angular-Slickgrid/blob/master/src/app/examples/grid-base-row-editing.component.scss"
24+
>
25+
grid-base-row-editing.component.scss </a
26+
>)
27+
</li>
28+
<li>
29+
Modifications are kept track of and if the cancel button is pressed, all
30+
modifications are rolled back.
31+
</li>
32+
<li>
33+
If the save button is pressed, a custom "onBeforeRowUpdated" callback is called, which you can use to save the data with your backend.<br />
34+
The callback needs to return a Promise&lt;boolean&gt; and if the promise resolves to true, then the row will be updated, otherwise it will be cancelled and stays in edit mode.
35+
You can try out the later by defining a Duration value <b>larger than 40</b>.
36+
<br />
37+
<small><span class="has-text-danger">NOTE:</span> You can also combine this with e.g. Batch Editing like shown <a href="#/example30">in Example 30</a></small>
38+
</li>
39+
<li>
40+
This example additionally uses the ExcelCopyBuffer Plugin, which you can see also in Slickgrid-Universal
41+
<a href="https://ghiscoding.github.io/slickgrid-universal/#/example19">example 19</a>.
42+
The example defines a rule that pastes in the first column are prohibited. In combination with the Row Based Editing Plugin though, this rule gets enhanced with the fact
43+
that only the edited rows are allowed to be pasted into, while still respecting the original rule.
44+
</li>
45+
</ul>
46+
</div>
47+
48+
<section>
49+
<div class="row mb-4">
50+
<div class="col-sm-8">
51+
<button
52+
class="btn btn-outline-secondary btn-sm"
53+
data-test="single-multi-toggle"
54+
(click)="toggleSingleMultiRowEdit()"
55+
>
56+
Toggle Single/Multi Row Edit
57+
</button>
58+
<button class="btn btn-outline-secondary btn-sm" data-test="toggle-language" (click)="switchLanguage()">
59+
<i class="fa fa-language"></i>
60+
Switch Language
61+
</button>
62+
<b>Locale:</b> <span style="font-style: italic" data-test="selected-locale">{{selectedLanguage + '.json'}}</span>
63+
</div>
64+
65+
<div class="col-sm-4" [class]="statusClass">
66+
<strong>Status: </strong>
67+
<span data-test="fetch-result" [textContent]="fetchResult"></span>
68+
</div>
69+
</div>
70+
</section>
71+
72+
<angular-slickgrid gridId="grid35"
73+
[columnDefinitions]="columnDefinitions"
74+
[gridOptions]="gridOptions"
75+
[dataset]="dataset"
76+
(onAngularGridCreated)="angularGridReady($event.detail)">
77+
</angular-slickgrid>

‎src/app/examples/grid-base-row-editing.component.scss

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
:root {
2+
// turn on/off the following variables to see the difference in styling
3+
4+
// --slick-row-based-edit-editmode-bgcolor: rgb(82, 235, 158);
5+
// --slick-row-based-edit-editmode-hover-bgcolor: cyan;
6+
// --slick-row-based-edit-unsaved-cell-bgcolor: rgb(190, 114, 127);
7+
// --slick-row-based-edit-editmode-active-bgcolor: rgb(82, 235, 158);
8+
// --slick-row-based-edit-editmode-active-hover-bgcolor: cyan;
9+
}
10+
11+
.alert {
12+
padding: 8px;
13+
margin-bottom: 10px
14+
}
15+
16+
.status-container {
17+
min-height: 50px;
18+
}

0 commit comments

Comments
 (0)