How to properly bind data to ngx-datatable for inline edit mode

Question

I am trying to set up ngx-datatable component with inline edit option turned on but I am having a problem with binding row data into the table (I am quite new to angular). Could you please give me some hints what is wrong? I have really tried a lot of different options with success rate 0 :(

This is my current configuration: ProductService is providing data as json in the following format:

"columns":[
{"name":"First column 88"},
{"name":"Second column 88"},
{"name":"Third column 88"}
],
"rows":[
{"First column 88":"Col-1-Row-1 Object nr 88","Second column 88":"Col-2-Row-1 Object nr 88","Third column 88":"Col-3-Row-1 Object nr 88"},
{"First column 88":"Col-1-Row-2 Object nr 88","Second column 88":"Col-2-Row-2 Object nr 88","Third column 88":"Col-3-Row-2 Object nr 88"}
]}

ngx-datatable template looks like that:

<ngx-datatable class="bootstrap"
          [rows]="rows"
          [columnMode]="'force'">
          <ng-container *ngFor="let column of columns; let j = index;">

            <ngx-datatable-column [name]="columns[j].name" [sortable]="false">

              <ng-template ngx-datatable-header-template>
                <span [ngStyle]="{ 'font-weight': 'bold'}">{{columns[j].name}}</span>
              </ng-template>

              <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                <span title="Double click to edit" (dblclick)="editing[rowIndex + '-' + columns[j].name] = true"
                  *ngIf="!editing[rowIndex + '-' + columns[j].name]">
                  {{value}}
                </span>
                <input autofocus (blur)="updateValue($event, 'columns[j].name', rowIndex)" *ngIf="editing[rowIndex+ '-' + columns[j].name]"
                  type="text" [value]="value" />
              </ng-template>

            </ngx-datatable-column> 

          </ng-container>
        </ngx-datatable>

And this is my component's code:

export class ProductDetailsComponent implements OnInit {
  product: DetailedProduct;
  rows = [];
  columns: ProductTableColumn[] = [];

  editing = {};

  constructor(private productService: ProductService, private alertify: AlertifyService, private route: ActivatedRoute) { }

  ngOnInit() {
    this.route.data.subscribe(data => {
      this.product = data.product;
      this.columns = data.product.productTable.columns;
      this.rows = data.product.productTable.rows;
    });
  }

  updateValue(event, cell, rowIndex) {
    console.log('inline editing rowIndex', rowIndex);
    this.editing[rowIndex + '-' + cell] = false;
    this.rows[rowIndex][cell] = event.target.value;
    this.rows = [...this.rows];
    console.log('UPDATED!', this.rows[rowIndex][cell]);
  }

As a result I'm getting a table with proper amout of columns, proper headers, proper amount of rows BUT with empty cells (looks like a binding issue to me, but no clue where is the problem).

Thank you in advance.

UPDATE If I send columns like that:

"columns":[
{"prop":"First column 88"},
{"prop":"Second column 88"},
{"prop":"Third column 88"}
]

And use ngx-datatable like that:

<ngx-datatable class="bootstrap"
          [rows]="rows"
          [columns]="columns"
          [columnMode]="'standard'">
</ngx-datatable>

Than binding works fine and as expected. So I guess there is something wrong with my inline edit template.

How to properly bind data to ngx-datatable for inline edit mode

0 Answers0