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
Chris Sworen
935
Clicking outside row editing is committing changes...
posted

I'm on IG12.3 and AG 12.3.

I am asking a follow-up to onrowedit default behaviour, since that didn't work for me. I assume I'm doing something wrong, as always, though.

Here is my grid declaration:

    <igx-grid #scenarioList id="scenarioList" displayDensity="compact" [data]="globals.scenarios" [allowFiltering]="true" [allowAdvancedFiltering]="true" [primaryKey]="'id'" width="100%" height="{{height - 132}}px" [rowEditable]="globals.user.isContributor"
        (onCellEditEnter)="cellEditStart($event)" (rowEditDone)="rowEditedDone($event)" [filterMode]="'excelStyleFilter'">
        <igx-paginator [perPage]="25"></igx-paginator>
        <igx-grid-toolbar class="bg-primary">
            <igx-grid-toolbar-title class="text-white"><b>Scenarios</b></igx-grid-toolbar-title>
        </igx-grid-toolbar>
        <ng-template igxRowEditText let-rowChangesCount>
            <span class="error" *ngIf="badName">{{badNameWarning}}</span>
        </ng-template>
        <ng-template igxRowEditActions let-endRowEdit>
            <button igxButton igxRowEditTabStop (click)="endRowEdit(false)">Cancel</button>
            <button igxButton *ngIf="!badName" igxRowEditTabStop (click)="endRowEdit(true)">Done</button>
        </ng-template>

        <igx-column [pinned]="true" field="name" header="Scenario Name" [dataType]="'string'" [resizable]="true" width="12%" [sortable]="true">
            <ng-template igxCellEditor let-cell="cell">
                <igx-input-group type="border">
                    <input igxInput [igxFocus]="true" [(ngModel)]="cell.editValue" (ngModelChange)="modelChange($event, cell, 'name')" displayDensity="compact">
                </igx-input-group>
            </ng-template>
        </igx-column>
        <igx-column field="active" header="Active" [resizable]="true" width="5%" [sortable]="true">
            <ng-template igxCell let-cell="cell">{{cell.value}}</ng-template>
            <ng-template igxCellEditor let-cell="cell" let-value>
                <igx-combo [(ngModel)]="cell.editValue" [data]="activeList" [igxFocus]="true" [overlaySettings]="customOverlaySettings" (selectionChanging)="singleSelection($event)" displayDensity="compact"></igx-combo>
            </ng-template>
        </igx-column>
        <igx-column field="scenarioType" header="Type" [resizable]="true" width="5%" [sortable]="true">
            <ng-template igxCell let-cell="cell">{{cell.value}}</ng-template>
            <ng-template igxCellEditor let-cell="cell" let-value>
                <igx-combo [(ngModel)]="cell.editValue" (ngModelChange)="modelChange($event, cell, 'type')" [data]="types" width="220px" [igxFocus]="true" (selectionChanging)="singleSelection($event)" [overlaySettings]="customOverlaySettings" [displayKey]="'name'" [valueKey]="'name'"></igx-combo>
            </ng-template>
        </igx-column>
        <igx-column field="startWw" header="Start WW" [dataType]="'string'" [resizable]="true" width="5%" [editable]="false" [sortable]="true"></igx-column>
        <igx-column field="endWw" header="End WW" [dataType]="'string'" [resizable]="true" width="5%" [editable]="false" [sortable]="true"></igx-column>
        <igx-column field="families" header="Family(s)" [dataType]="'string'" [resizable]="true" width="7%" [editable]="false" [sortable]="true"></igx-column>
        <igx-column field="facilities" header="Facility(s)" [dataType]="'string'" [resizable]="true" [editable]="false" [sortable]="true"></igx-column>
        <igx-column field="private" header="Private" [dataType]="'boolean'" width="5%" [resizable]="true"></igx-column>
        <igx-column field="locked" header="Locked" [dataType]="'boolean'" width="5%" [resizable]="true"></igx-column>
        <igx-column field="createdBy" header="Creator" [dataType]="'string'" width="5%" [resizable]="true" [editable]="false" [sortable]="true">
            <ng-template igxCell let-value>{{value.replace('sys_nsgplanning', 'SYSTEM') | uppercase}}</ng-template>
        </igx-column>
        <igx-column field="createdDate" header="Created (UTC)" [resizable]="true" width="8%" [editable]="false">
            <ng-template igxCell let-value>{{value | date:'MM/dd/yy hh:mm a'}}</ng-template>
        </igx-column>
        <igx-column field="lastModifiedBy" header="Updated By" [dataType]="'string'" [resizable]="true" width="5%" [editable]="false" [sortable]="true">
            <ng-template igxCell let-value>{{value.replace('sys_nsgplanning', 'SYSTEM') | uppercase}}</ng-template>
        </igx-column>
        <igx-column field="lastModifiedDate" header="Updated (UTC)" [resizable]="true" width="8%" [editable]="false">
            <ng-template igxCell let-value>{{value | date:'MM/dd/yy hh:mm a'}}</ng-template>
        </igx-column>
        <igx-column header="Actions" [filterable]="false" [editable]="false" [resizable]="false" width="330px" [sortable]="false">
            <ng-template igxCell let-cell="cell" let-val>
                <div id="actionButtons">
                    <button [hidden]="cell.row.data.scenarioType !== 'Actual' && (globals.user.isContributor && !cell.row.data.locked && cell.row.data.active === 'Active')" igxButton (click)="goToScenario(cell.row.data.id, cell.row.data.name)">View</button>
                    <button [hidden]="cell.row.data.scenarioType === 'Actual' || !globals.user.isContributor || cell.row.data.locked || cell.row.data.active === 'Archived'" igxButton (click)="goToScenario(cell.row.data.id, cell.row.data.name)">Manage</button>
                    <button [hidden]="cell.row.data.scenarioType === 'Actual' || !globals.user.isContributor || cell.row.data.active === 'Archived'" igxButton (click)="setStartData(cell.row.data); copyScenario.open()">Copy</button>
                    <button [hidden]="cell.row.data.scenarioType === 'Actual' || !globals.user.isContributor || cell.row.data.active === 'Archived'" igxButton (click)="archiveScenario(cell.row.data)">Archive</button>
                    <button [hidden]="cell.row.data.scenarioType === 'Actual' || !globals.user.isContributor || cell.row.data.active === 'Active'" igxButton (click)="activateScenario(cell.row.data)">Activate</button>
                    <button [hidden]="cell.row.data.scenarioType === 'Actual' || !globals.user.isContributor || cell.row.data.locked" igxButton (click)="changeType(cell.row.data)">Type</button>
                    <button [hidden]="cell.row.data.scenarioType === 'Actual' || !globals.user.isAdmin" igxButton (click)="deleteScenario(cell.row.data)">Delete</button>
                </div>
            </ng-template>
        </igx-column>
    </igx-grid>

Here is my code for rowEdit and cellEdit:

  @ViewChild('scenarioList', { static: false, read: IgxGridComponent }) public scenarioList: IgxGridComponent;

  cellEditStart(e:any) {
    if (e.rowData.scenarioType == 'Actual' || (!this.globals.user.isAdmin && e.rowData.locked) || (!this.globals.user.isContributor)) { e.cancel = true; }
    const row = e && e.cellID ? this.scenarioList.getRowByIndex(e.cellID.rowIndex) : null;
    if (!row || !row.inEditMode) { this.scenarioList.endEdit(false); }
  };

  async rowEditedDone(e:IGridEditDoneEventArgs) {
    this.editingScenario = e.oldValue;
    this.updateScenario(e.newValue);
  };

The cancel button works fine, but when moving to a cell in a different row while editing, it commits the changes rather than discarding them.

Aside from committing changes users don't want, it's also incorrectly reporting the type of a scenario (comparing against the new row selected, rather than the original row being edited).

Parents
No Data
Reply
  • 1560
    Offline posted

    Hello,


    I have been looking into your question, however, the thread you mentioned is from a year ago, the attached sample there uses igniteui-angular version 9 and after that, we introduce a lot of changes in the grid editing behavior as well as changes into the event names (e.g. onCellEditEnter is renamed to cellEditEnter).


    More about all changes could be found in our release notes here.


    I have prepared a sample that demonstrates how such behavior could be achieved using the rowEdit event which is cancelable and fires just before a row in edit mode's value is committed.


    In the event handler, based on the target, you could cancel the event and call the grid's endEdit method with a 'false' flag in order to prevent changes to be committed.

    public rowEdit(event) {
    if (event.event.target.tagName === 'IGX-GRID-CELL') {
      event.cancel = true;
      Promise.resolve().then(() => {
        this.grid1.endEdit(false);
      });
    }
  }


    Here could be found my sample for your reference. Please test it on your side and let me know if I may be of any further assistance.


    Sincerely,
    Teodosia Hristodorova
    Software Developer

Children
No Data