2

I have bind mat-autocomplete control (almost 30k records ) inside mat-table. Here user is allowed to change values in auto complete and save the mat - table.

If user choose any different values in auto complete control in multiple rows of the mat-table and save.

If we re-bind the mat-table all the mat-autocomplete selected items are showing with last value from the mat-autocomplete.

But here the data source object is updated properly.

Update and Save values in mat-autocomplete

After refreshing the Mat-table setting last value. [ Here the data source is fine, json object having correct values ]

Html Code

<div class="ScrollStyle">
    <mat-table [dataSource]="dataSource" class="mat-elevation-z8">
      <!-- MaterialDescription Column -->
      <ng-container matColumnDef="Gedis Class">
        <mat-header-cell *matHeaderCellDef>Gedis Class</mat-header-cell>
        <mat-cell mat-cell *matCellDef="let element"> {{element.GedisClassCode}} </mat-cell>
      </ng-container>

      <!-- ItemClass Column -->
      <ng-container matColumnDef="ItemClass">
        <mat-header-cell *matHeaderCellDef> Item Class </mat-header-cell>
        <mat-cell *matCellDef="let element">

          <mat-autocomplete #sfAuto="matAutocomplete" (optionSelected)="element.ItemClassId = $event.option.viewValue" [displayWith]="valueMapper">
            <mat-option *ngFor="let sf of filteredlistOfItemClass" [value]="sf.ItemClassId">
              {{sf.ItemClassId}}
            </mat-option>
          </mat-autocomplete>
          <mat-form-field floatLabel="never">
            <input matInput placeholder="NA000" #sfInput [formControl]="itemClassControl" [matAutocomplete]="sfAuto"
                   (input)="itemClassOnChange($event.target.value)">
          </mat-form-field>
        </mat-cell>
      </ng-container>


      <mat-header-row *matHeaderRowDef="displayedColumns" [ngClass]="mat-header-cell"></mat-header-row>
      <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
    </mat-table>

Typescript Code
---------------
  itemClassOnChange(val) {

    this.filteredlistOfItemClass = [];
    const value = val;
    const filterValue = value.toLowerCase();
    if (filterValue && !'') {
      this.filteredlistOfItemClass = this.listOfItemClass.filter(
        x =>
          `${x.ItemClassId}`.toLowerCase().startsWith(filterValue) 
      );
      this.sfInputTrigger.openPanel();
    }
  }

  //Used for binding selected Item class to the Itemclass auto suggest control
  public valueMapper = (key) => {
    let selection = this.filteredlistOfItemClass.find(e => e.ItemClassId === key);
    if (selection)
      return selection.ItemClassId;
    else
      return "NA000";
  };
}

The mat-table is placed in container and it is placed in tab control, on click of tab page we are loading and binding the mat-table

PEPEGA
  • 2,214
  • 20
  • 37
karthik
  • 21
  • 5
  • You probably need to extend and create your own datasource and handle the data changes yourself. The default datasource does not handle changes like that very well from my experience. – chronolegend Dec 12 '18 at 05:14
  • Hi Ho Wei Lip, Thanks for reply. But my the data source is updated fine. even it shows same value in all the mat-autocomplete after refresh the data source is still correct – karthik Dec 12 '18 at 10:10
  • please create a demo slackblitz so everyone can understand your issue more easier – Akhi Akl Dec 13 '18 at 12:12
  • I don't know if this is gonna help, but I have used mat-auto-complete inside regular html table before, and I think it's pretty much the same idea here. take a look at this answer here https://stackoverflow.com/a/51562889/10121188 also, https://stackblitz.com/edit/angular-szxkme?file=app%2Fautocomplete-display-example.html – Furqan S. Mahmoud Dec 14 '18 at 21:04
  • Still I struck on the issue, The problem is whenever I rebind the Grid (Mat-table) my all mat-autocomplete updated with latest value in the last control. So If each row in my mat-autocomplete is 'AAA','BBB', 'CCC' whenever I re bind the grid it is showing 'CCC','CCC',"CCC'. – karthik Dec 23 '18 at 10:33

1 Answers1

0

I had the same problem and resolved by using Reactive form. Create a FormGroup -> FormArray (mat-table) -> FormControlName to the input element.

DineshKumar Subramanian
  • 1
  • 1