igxCell isAddRow

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. 

	{{val | lookup: dataTypesLookup}}

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:

1. If the cell.row is a new row, aka, isAddRow. I see some stuff in the codebase like let-row, but that yields undefined for me.
2. Is there a way to get access to the parent IgxGridCellComponent component, so that the its properties like isEmptyAddRowCell and template can be used?

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.

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.

Regards,
Monika Kirkova,
Infragistics

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):

	
		{{ cell.row.isAddRow && !val ? cell.column.header : (val | lookup: dataTypesLookup) }}
	

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:

1. Using custom pipe where as argument could be passed the cell. Into the pipe's transform method via the cell parameter, you could access the entire grid as well as the cell row. In order to be able to determine whether a row is newly added we should access the IgxGridRowComponent which has such property called addRowUI instead of the RowType. This could be done using the grid's dataRowList collection which will return all rows currently rendered into the view as IgxGridRowComponents, so we will be able to determine whether the row is newly added and with empty cell values and render the desired text:

@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.

2. In order to achieve your requirement entirely through the markup what I could suggest is to compare the length of grid's allRows() collection which will return all rows + the curenty added and the grid's data where the row would not be included before adding it:

 
          

            {{ cell.column.dataType.toString() }}
          
          
            

              {{ val }}
            
          
        

A sample that demonstrates this approach could be found here.

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

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 Michael ,

I am glad that you find the suggestion helpful.

Thank you for using Infragistics components.

Regards,
Monika Kirkova,
Infragistics