Skip to content

Commit 35470ac

Browse files
ChronosSFChronosSF
committed
fix(row-adding): api implementation with tree-grid specifics #9429 
1 parent a95f126 commit 35470ac

File tree

6 files changed

+127
-25
lines changed

6 files changed

+127
-25
lines changed

‎projects/igniteui-angular/src/lib/grids/api.service.ts‎

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,21 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
9696
return this.grid.rowList.find((row) => row.index === rowIndex);
9797
}
9898

99+
/**
100+
* Gets the rowID of the record at the specified data view index
101+
*
102+
* @param index
103+
* @param dataCollection
104+
*/
105+
public get_rec_id_by_index(index: number, dataCollection?: any[]): any {
106+
dataCollection = dataCollection || this.grid.data;
107+
if (index >= 0 && index < this.grid.dataView.length) {
108+
const rec = this.grid.dataView[index];
109+
return this.grid.primaryKey ? rec.data[this.grid.primaryKey] : rec.data;
110+
}
111+
return null;
112+
}
113+
99114
public get_cell_by_key(rowSelector: any, field: string): IgxGridCellComponent {
100115
const row = this.get_row_by_key(rowSelector);
101116
if (row && row.cells) {
@@ -397,8 +412,10 @@ export class GridBaseAPIService<T extends IgxGridBaseDirective & GridType> {
397412
* Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
398413
*
399414
* @param pk
415+
* @param dataCollection
400416
*/
401-
public get_rec_index_by_id(pk: string | number): number {
417+
public get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number {
418+
dataCollection = dataCollection || this.grid.data;
402419
return this.grid.primaryKey ? this.grid.dataView.findIndex(rec => rec[this.grid.primaryKey] === pk) : -1;
403420
}
404421

‎projects/igniteui-angular/src/lib/grids/grid-base.directive.ts‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5992,7 +5992,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
59925992
index = 0;
59935993
} else {
59945994
// find the index of the record with that PK
5995-
index = this.gridAPI.get_rec_index_by_id(rowID);
5995+
index = this.gridAPI.get_rec_index_by_id(rowID, this.dataView);
59965996
rowID = index;
59975997
if (index === -1) {
59985998
console.warn('No row with the specified ID was found.');
@@ -6044,8 +6044,7 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
60446044
if (index === 0) {
60456045
return this.beginAddRowById(null, asChild);
60466046
}
6047-
const record = this.dataView[index - 1];
6048-
return this.beginAddRowById(this.primaryKey ? record[this.primaryKey] : record, asChild);
6047+
return this.beginAddRowById(this.gridAPI.get_rec_id_by_index(index - 1, this.dataView), asChild);
60496048
}
60506049

60516050
protected beginAddRowForIndex(index: number, asChild: boolean = false) {

‎projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-api.service.ts‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -169,6 +169,32 @@ export class IgxTreeGridAPIService extends GridBaseAPIService<IgxTreeGridCompone
169169
return this.grid.records.get(rowID);
170170
}
171171

172+
/**
173+
* Gets the rowID of the record at the specified data view index
174+
*
175+
* @param index
176+
* @param dataCollection
177+
*/
178+
public get_rec_id_by_index(index: number, dataCollection?: any[]): any {
179+
dataCollection = dataCollection || this.grid.data;
180+
if (index >= 0 && index < this.grid.dataView.length) {
181+
const rec = this.grid.dataView[index];
182+
return this.grid.primaryKey ? rec.data[this.grid.primaryKey] : rec.data;
183+
}
184+
return null;
185+
}
186+
187+
/**
188+
* Returns the index of the record in the data view by pk or -1 if not found or primaryKey is not set.
189+
*
190+
* @param pk
191+
* @param dataCollection
192+
*/
193+
public get_rec_index_by_id(pk: string | number, dataCollection?: any[]): number {
194+
dataCollection = dataCollection || this.grid.data;
195+
return this.grid.primaryKey ? this.grid.dataView.findIndex(rec => rec.data[this.grid.primaryKey] === pk) : -1;
196+
}
197+
172198
public addRowToData(data: any, parentRowID?: any) {
173199
if (parentRowID !== undefined && parentRowID !== null) {
174200

‎src/app/tree-grid-add-row/tree-grid-add-row.sample.html‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,33 @@
11
<div>
2-
<igx-tree-grid [pinning]="pinningConfig" #grid [allowFiltering]="true" [data]="data" primaryKey="employeeID" foreignKey="PID"
3-
[width]="'900px'" [height]="'800px'" [rowEditable]="true">
4-
<igx-column *ngFor="let c of columns" [field]="c.field" [dataType]="c.dataType" [header]="c.label"
5-
[pinned]="c.pinned" [movable]="c.movable" [groupable]="false" [resizable]="c.resizable" [width]="c.width"
6-
[sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden"
7-
[minWidth]="c.minWidth" [maxWidth]="c.maxWidth">
8-
</igx-column>
9-
<igx-action-strip #actionstrip>
10-
<igx-grid-pinning-actions></igx-grid-pinning-actions>
11-
<igx-grid-editing-actions [addRow]="true" [addChild]="actionstrip.context?.treeRow.level < 1"></igx-grid-editing-actions>
12-
</igx-action-strip>
13-
</igx-tree-grid>
14-
</div>
2+
<igx-tree-grid [pinning]="pinningConfig" #grid [allowFiltering]="true" [data]="data" primaryKey="employeeID"
3+
foreignKey="PID" [width]="'900px'" [height]="'800px'" [rowEditable]="true">
4+
<igx-column *ngFor="let c of columns" [field]="c.field" [dataType]="c.dataType" [header]="c.label"
5+
[pinned]="c.pinned" [movable]="c.movable" [groupable]="false" [resizable]="c.resizable" [width]="c.width"
6+
[sortable]="true" [filterable]="true" [editable]="true" [hidden]="c.hidden" [minWidth]="c.minWidth"
7+
[maxWidth]="c.maxWidth">
8+
</igx-column>
9+
<igx-action-strip #actionstrip>
10+
<igx-grid-pinning-actions></igx-grid-pinning-actions>
11+
<igx-grid-editing-actions [addRow]="true" [addChild]="actionstrip.context?.treeRow.level < 1">
12+
</igx-grid-editing-actions>
13+
</igx-action-strip>
14+
</igx-tree-grid>
15+
<div class="three-columns">
16+
<div class="column">
17+
<button igxButton="raised" (click)="beginAddRowStart()">Add Row At Start</button>
18+
</div>
19+
<div class="column">
20+
<igx-input-group>
21+
<input igxInput name="index" type="number" #indexInput />
22+
<label igxLabel for="index">Index</label>
23+
</igx-input-group>
24+
<button igxButton="raised" (click)="beginAddRowAtIndex(indexInput.value)">Add Row At Index</button>
25+
</div>
26+
<div class="column">
27+
<igx-input-group>
28+
<input igxInput name="string" type="number" #idInput value="10" />
29+
<label igxLabel for="string">PK</label>
30+
</igx-input-group>
31+
<button igxButton="raised" (click)="beginAddRowById(idInput.value)">Add Row For ID</button>
32+
</div>
33+
</div>

‎src/app/tree-grid-add-row/tree-grid-add-row.sample.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
.three-columns {
2+
display: flex;
3+
width: 900px;
4+
}
5+
6+
.column {
7+
flex-grow: 1;
8+
height: 150px;
9+
display: flex;
10+
flex-direction: column;
11+
justify-content: space-around;
12+
}
13+
14+
.column + .column {
15+
margin-left: 2%;
16+
}

‎src/app/tree-grid-add-row/tree-grid-add-row.sample.ts‎

Lines changed: 33 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
import { Component, OnInit } from '@angular/core';
2-
import { ColumnPinningPosition, RowPinningPosition } from 'igniteui-angular';
1+
import { Component, OnInit, ViewChild } from '@angular/core';
2+
import { ColumnPinningPosition, IgxTreeGridComponent, RowPinningPosition } from 'igniteui-angular';
33

44
@Component({
55
selector: 'app-tree-grid-add-row',
6+
styleUrls: ['tree-grid-add-row.sample.scss'],
67
templateUrl: `tree-grid-add-row.sample.html`
78
})
89
export class TreeGridAddRowSampleComponent implements OnInit {
10+
@ViewChild(IgxTreeGridComponent)
11+
public grid: IgxTreeGridComponent;
12+
913
public result: string;
1014

1115
public data: any[];
@@ -41,8 +45,10 @@ export class TreeGridAddRowSampleComponent implements OnInit {
4145
{ Salary: 2500, employeeID: 3, PID: -1, firstName: 'Steven', lastName: 'Buchanan', Title: 'CTO' },
4246
// sub of ID 0
4347
{ Salary: 2500, employeeID: 4, PID: 0, firstName: 'Janet', lastName: 'Leverling', Title: 'Sales Manager' },
44-
{ Salary: 3500, employeeID: 5, PID: 0, firstName: 'Laura', lastName: 'Callahan',
45-
Title: 'Inside Sales Coordinator' },
48+
{
49+
Salary: 3500, employeeID: 5, PID: 0, firstName: 'Laura', lastName: 'Callahan',
50+
Title: 'Inside Sales Coordinator'
51+
},
4652
{ Salary: 1500, employeeID: 6, PID: 0, firstName: 'Margaret', lastName: 'Peacock', Title: 'Sales Representative' },
4753
{ Salary: 2500, employeeID: 7, PID: 0, firstName: 'Michael', lastName: 'Suyama', Title: 'Sales Representative' },
4854
// sub of ID 4
@@ -61,14 +67,33 @@ export class TreeGridAddRowSampleComponent implements OnInit {
6167
{ Salary: 3500, employeeID: 17, PID: 15, firstName: 'Armand', lastName: 'Ross', Title: 'Product Owner' },
6268
{ Salary: 1500, employeeID: 18, PID: 15, firstName: 'Dane', lastName: 'Rodriquez', Title: 'Team Leader' },
6369
// sub of ID 19
64-
{ Salary: 2500, employeeID: 19, PID: 18, firstName: 'Declan', lastName: 'Lester',
65-
Title: 'Senior Software Developer' },
66-
{ Salary: 3500, employeeID: 20, PID: 18, firstName: 'Bernard', lastName: 'Jarvis',
67-
Title: 'Senior Software Developer' },
70+
{
71+
Salary: 2500, employeeID: 19, PID: 18, firstName: 'Declan', lastName: 'Lester',
72+
Title: 'Senior Software Developer'
73+
},
74+
{
75+
Salary: 3500, employeeID: 20, PID: 18, firstName: 'Bernard', lastName: 'Jarvis',
76+
Title: 'Senior Software Developer'
77+
},
6878
{ Salary: 1500, employeeID: 21, PID: 18, firstName: 'Jason', lastName: 'Clark', Title: 'QA' },
6979
{ Salary: 1500, employeeID: 22, PID: 18, firstName: 'Mark', lastName: 'Young', Title: 'QA' },
7080
// sub of ID 20
7181
{ Salary: 1500, employeeID: 23, PID: 20, firstName: 'Jeremy', lastName: 'Donaldson', Title: 'Software Developer' }
7282
];
7383
}
84+
85+
86+
public beginAddRowAtIndex(index: string) {
87+
const numeric = parseInt(index, 10);
88+
this.grid.beginAddRowByIndex(numeric);
89+
}
90+
91+
public beginAddRowStart() {
92+
this.grid.beginAddRowById(null);
93+
}
94+
95+
public beginAddRowById(string: string) {
96+
const numeric = parseInt(string, 10);
97+
this.grid.beginAddRowById(numeric);
98+
}
7499
}

0 commit comments

Comments
 (0)