Forums Ignite UI for Angular
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Eric Rupp
815
igx-row-island (onRowEdit) (onCellEdit) event
posted

Hello,

I can intercept (onCellEdit) events and (onRowEdit) events on the igx0hierarchical grid just fine but I can't get the edit events to fire for the igx-row-island:

View:

<div class="grid__wrapper">
<div class="sample__header">
<igx-input-group>
<input class="gridSample__filter" igxInput type="text" placeholder="Filter by Salesman" (input)="filter($event.target.value)">
</igx-input-group>
</div>
<igx-hierarchical-grid #hGrid [primaryKey]="'JobInfoID'" (onRowEdit)="onRowEdit($event)" (onCellEdit)="editDone($event)" [autoGenerate]="false" [height]="'1080px'" [width]="'100%'" [rowEditable]="true" [allowFiltering]="true">

<igx-column field="JobInfoID" [hidden]="true"></igx-column>

<igx-column field="JobNumber" [editable]="true"></igx-column>

<igx-column field="PrimarySalesman" [editable]="true"></igx-column>
<igx-column field="JobName" [editable]="true"></igx-column>

<igx-column field="ClientName" [editable]="true"></igx-column>

<igx-column field="StartDate" [editable]="true" [formatter]="dateFormatter" [dataType]="'date'">
<!-- <ng-template igxCellEditor let-cell="cell">
<igx-date-picker igxFocus="true" [(ngModel)]="cell.editValue"></igx-date-picker>
</ng-template> -->
</igx-column>
<igx-column field="Status" [editable]="true"></igx-column>
<igx-column field="GrossBuildingArea" header="G.B.A"></igx-column>
<igx-column field="Total"></igx-column>
<igx-column field="JobInfoID" [editable]="false" header="Actions">
<ng-template igxCell let-cell="cell">
<button igxButton="icon" (click)="editJobInfo()">
<igx-icon class="red-icon" fontSet="material">create</igx-icon>
</button>
<button igxButton="icon" (click)="attachFile(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">attach_file</igx-icon>
</button>
<button igxButton="icon" (click)="downloadAttachment(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">get_app</igx-icon>
</button>
<button igxButton="icon" (click)="editJobInfo(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">cloud_download</igx-icon>
</button>
<button igxButton="icon" (click)="attachFile(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">save</igx-icon>
</button>
<button igxButton="icon" (click)="downloadAttachment(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">assignment</igx-icon>
</button>
<button igxButton="icon" (click)="downloadAttachment(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">thumb_up</igx-icon>
</button>
<button igxButton="icon" (click)="comment(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">comment</igx-icon>
</button>
<button igxButton="icon" (click)="downloadAttachment(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">build</igx-icon>
</button>
<button igxButton="icon" (click)="editJobInfo(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">file_copy</igx-icon>
</button>
<button igxButton="icon" (click)="attachFile(cell.cellID)">
<igx-icon class="red-icon" fontSet="material">cancel</igx-icon>
</button>

</ng-template>
</igx-column>
<igx-row-island [key]="'JobInfoFloors'" [primaryKey]="'JobInfoFloorID'" [autoGenerate]="false" [rowEditable]="true" (onRowEdit)="onRowEdit($event)" (onCellEdit)="editDone($event)" (onGridCreated)="gridCreated($event, 'JobInfoFloorID')" [width]="'100%'">

<igx-column field="JobInfoFloorID" [editable]="true"></igx-column>
--Component Typescript Events:
public onRowEdit(event: IGridEditEventArgs){
//make a call to the edit service
const originalRowObj = event.oldValue;
const updatedRowObj = event.newValue;
const cancelValue = event.cancel;
const rowID = event.rowID;

}

public editDone(event: IGridEditEventArgs){
const value: IgxColumnComponent = event.newValue;
}
  • 29417
    Offline posted

    Hello Eric, 

    Thank you for posting in our forum. 

    Those events trigger only for the particular child grid instances, which you can get on the onGridCreated event of the related row island. You can subscribe to the related child grid events there. For example: 

    <igx-row-island … (onGridCreated)="gridCreated($event)"> 

     

       public gridCreated(event: IGridCreatedEventArgs){

          event.grid.onCellEdit.subscribe(($event) => this.editDone($event));

        }

     

    Let me know if you have any additional questions.

     

    Regards,

    Maya Kirova