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,
After investigating this further, I determined that addRowCell template is not applied to the Data Type column because another template is added to this column.
Additionally, what I could suggest is checking if the value of the cell component is undefined and if there is a template applied to the cell and setting the cell value to the column field.
public beginAddRow() {
this.grid1.beginAddRowByIndex(2);
this.grid1.getRowByIndex(2).cells.forEach((cell) => {
if (cell.column.bodyTemplate && !cell.value) {
cell.value = cell.column.field;
}
});
Furthermore, in a method bound to the rowEditExit event the value of the cell would be set back to undefined if the value equals the filed name.
public rowEditExit(evt) {
if (evt.isAddRow && evt.newValue?.OrderDate === 'OrderDate') {
evt.newValue.OrderDate = undefined;
I have prepared a sample, demonstrating the described behavior. Please test it on your side and let me know if you need any further information regarding this matter.
Regards, Monika Kirkova, Infragistics
While this solution may work, it's a bit of a hack in my opinion. I shouldn't have to modify any values to be able to tell if a row is a new row or not. I should be able to determine that through the igxCell directive. What would be ideal is being able to say something like: cell.row.isAddRow, and be able to render different information based on that.
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.
Hello Michael ,
I am glad that you find the suggestion helpful.
Thank you for using Infragistics components.
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>