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
220
Igx-grid: Batch editing on igx-select
posted

Hello, I have an igx grid with Excel filtering and batch editing active. One of the columns contains an igx-select from which the user can select a value.

When I filter this column (that contains an igx-select element), then change a value from the shown filtered list, and then undo those changes, the new value I selected from the igx-select list is not reverted, but assigned to a different row. And I only want to undo the changes.

When I edit a value of another column (that does not have a igx-select) the value is set up correctly. and the undo action also works fine. So I assume the problem is in the igx-select. Is it possible to use the igx-select on a filtered list and to undo the changed value correctly?

Here are my redo and undo buttons

  <div class="buttons-wrapper">

      <button igxButton style="margin-top: 40px; margin-left: 0px;" [disabled]="!grid1.transactions.canUndo" (click)="undo()">
        <igx-icon>undo</igx-icon>
      </button>

      <button igxButton style="margin-left: 0px;" [disabled]="!grid1.transactions.canRedo" (click)="redo()">
        <igx-icon>redo</igx-icon>
      </button>
    </div>
 

This is my igx-grid:

<igx-grid igxPreventDocumentScroll
            #grid1
            igxOverlayOutlet
            [height]="'97%'"
            width="99%"
            [pinnedColumnsText]="'pinned'"
            [batchEditing]="true"
            [autoGenerate]='false'
            [data]="sqlData"
            [primaryKey]="'lot'"
            [showToolbar]="true"
            [allowFiltering]="true"
            [columnHiding]="true"
            [rowHeight]="20"
            filterMode="excelStyleFilter"
            (cellEditDone)="cellEditDoneHandler($event)"
            (activeNodeChange)="handleChange()"
            [clipboardOptions]="copyOptions">

    <igx-column width="120px" field="department" dataType="string" header="Department" [resizable]="true" [editable]="false" [sortable]="true" [movable]="true" [cellClasses]="greenRowLotClass">
      <ng-template igxCell let-cell="cell" let-val>
        <div [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']">

          <igx-select #selectDepartment
                      placeholder="Wähle Abteilung"
                      [overlaySettings]="overlaySettings"
                      [ngClass]="[cell.row.deleted?'upfont' : 'drop-down-grid']"
                      [(ngModel)]="cell.value">
            <igx-select-item style="font-size: 12px;" *ngFor="let item of dropDownDepartmentAdmin" [value]="item">
              {{ item }}
            </igx-select-item>
          </igx-select>

        </div>
      </ng-template>

      <ng-template igxCell let-cell="cell">
        <div [ngClass]="[cell.row.deleted?'upfont' : 'text-cell']">{{cell.value}}</div>
        <button class="action-button" [ngClass]="[cell.row.deleted?'grey-button-deleted-row' : 'black-button-edit-cell']" igxButton="icon" [disabled]="cell.row.deleted" (click)="editSelectedData(cell.id.rowID,cell.column.field, cell.value)">
          <igx-icon class="action-icon">edit</igx-icon>
        </button>
      </ng-template>
    </igx-column>

  </igx-grid>
 

And here are my undo and redo functions in the .ts file:

  public undo() {
    this.grid1.endEdit(true);
    this.grid1.transactions.undo();
  }

  public redo() {
    this.grid1.endEdit(true);
    this.grid1.transactions.redo();
  }

I hope you can help me. Thank you.

Parents
No Data
Reply
  • 400
    Offline posted

    Hello Silvia,

    Thank you for following up.

    On grid initialization, the undo and commit buttons are disabled. When changes are made to the grid, a given cell or row is edited, then the undo button becomes active when checking if the transaction service for batch editing of the grid can revert the change made, with canUndo accessor, as the disable property of the button is set to check [disabled]="! grid.transactions.canUndo".

    <button
          igxButton
          [disabled]="!grid.transactions.canUndo"
          (click)="undo()" >
       Undo
    </button>

    In the same way, when editing a given cell or row, the commit button becomes active to save the changes made by checking through the transaction service for batch editing of the grid whether there have been changes made to the grid, with getAggregatedChanges method, as the disable property of the button is set to check [disabled]=" grid.transactions.getAggregatedChanges(false).length < 1".

    <button
        igxButton
        [disabled]="grid.transactions.getAggregatedChanges(false).length < 1"
        (click)="commit()">
          Commit
        </button>

    When you make a change on the cell that is the template with the igx-select component, you can see that the undo and commit buttons become active as described in the scenarios and it is possible to perform the given action as you can see here:

    I reviewed and tested the sample I provided and the undo and commit buttons become active when editing a cell and everything works as expected. Please test it again on your side and let me know how it behaves. If you experience the described behavior again please provide more information and steps to reproduce it for further investigation.

    In conclusion, please, test the above suggestions and let me know of any other questions on the matter.

    Best regards,

    Georgi Anastasov

    Entry Level Software Developer

    Infragistics

Children