I am currently adding using the beginAddRowByIndex function, and one thing I noticed is that when I add a row with the following columns, a placeholder value (header text) is shown in the entityId and description columns, but not the dataType column.
<igx-column field="entityId" header="Property Id" [sortable]="true"></igx-column> <igx-column field="description" header="Description" [sortable]="true"></igx-column> <igx-column field="dataType" header="Data type" [sortable]="true"> <ng-template igxCell let-val let-cell="cell">{{val | lookup: dataTypesLookup}}</ng-template> </igx-column>
After digging through the cell.component.html file, I noticed that in the #addRowCell template, it's using a property called isEmptyAddRowCell to conditionally render the cell value, or the header. Given an ng-template with the igxCell directive, is there any way to determine the following:
Hello Michael ,
I am glad that you find the suggestion helpful.
Thank you for using Infragistics components.
Regards, Monika Kirkova, Infragistics
Option 1 should work decently for now, and I will create a feature request to get a isAddRow property added to cell.row. Thanks for the help.
Hello,
I have been looking into your question and after an investigation, I could say that cell.row returns a RowType which currently does not provide a property or method like the required one.
In order to achieve your requirement and display the column type or some other value if the row is currently added, I could suggest two approaches:
@Pipe({ name: 'modifyCell' }) export class ModifyCell implements PipeTransform { transform(cell: any): any { var value = cell.value; if ( (Array.from(cell.grid.dataRowList)[cell.row.index] as any)?.addRowUI && (cell.value === undefined || cell.value === null) ) { value = cell.column.dataType.toString(); } return value; } }
A sample that demonstrates this approach could be found here.
<ng-template igxCell let-val let-cell="cell"> <div *ngIf=" cell.grid.allRows().length > cell.grid.data.length && (cell.value === undefined || cell.value === null); else cellTmp " > {{ cell.column.dataType.toString() }} </div> <ng-template #cellTmp> <div> {{ val }} </div> </ng-template> </ng-template>
Please keep in mind that both suggestions are workarounds and they are not fully tested, so it is possible to have some side effects depending on your scenario.
Having this in mind, what I could suggest in order to include such functionality out of the box is to submit a new feature request in our GitHub repository here. Any concerns or questions that you have can be directly addressed in the issue, which will give you the opportunity to directly communicate with our development team.
Let me know if I may be of any further assistance.
Sincerely,
Teodosia Hristodorova
Associate Software Developer
I understand that I can access isAddRow via that event, however, that's not what I'm trying to do at all. What I'm trying to do is something like this, in order to mimic what's in the cell.component.html from the GitHub, and conditionally render things in the HTML based on something like this (please note that I KNOW that cell.row.isAddRow does not exist, but I need something LIKE it. I'm asking if there's ANYTHING on the cell template variable that can help me deduce if the row is a new row):
<igx-column field="entityId" header="Property Id" [sortable]="true"></igx-column> <igx-column field="description" header="Description" [sortable]="true"></igx-column> <igx-column field="dataType" header="Data type" [sortable]="true"> <ng-template igxCell let-val let-cell="cell"> {{ cell.row.isAddRow && !val ? cell.column.header : (val | lookup: dataTypesLookup) }} </ng-template> </igx-column>
Hello Michael,
It could be determined if the currently edited row is a newly added row by accessing the event arguments of the rowEditEnter event. The event would be emitted after beginAddRowByIndex method is called:
<igx-grid . . . (rowEditEnter)="rowEditEnter($event)">
public rowEditEnter(evt) {
if(evt.isAddRow) {
. . .
}
Additionally, the rowData could be accessed from the event arguments and could be modified based on the application logic.
Please let me know if you need any further information regarding this matter.