1

We have an Angular 5 application where we use a FlexGrid to show a variety of datasets. These datasets can be represented by different views, which are predefined sets of columns. Everytime a view changes, the columnDef is updated and our itemsSource is replaced. Now, if we load our page normally, all cells align correctly and our booleans show as checkboxes. Whenever we change our view, we lose alignment for number columns and our booleans are just plain text true or false.

I tried every way of refreshing the data or the grid (itemsSource.refresh, dataGrid.invalidate, etc) but nothing seems to correct the alignment. Is there a way to do it manually, or are we setting our dataSource in the wrong way?

Code:

Here is how we load our columnDef:

<wj-flex-grid etc...>
  <wj-flex-grid-column
    *ngFor="let col of columnDefs"
    [binding]="col.binding"
    [header]="col.caption"
    [width]="col.width"
  >
  </wj-flex-grid-column>
</wj-flex-grid>

And the JavaScript:

private getLayout(): void {
  this.layoutService.get(this.dataName).subscribe(
    (result: ViewDef) => {
      this.caption = result.caption;
      this.columnDefs = result.columnDefs;
    },
    () => console.log('Could not load layout.')
  );
}

Here is how we update our itemsSource:

private setItemsSource(result) {
  this.dataGrid.beginUpdate();
  const scrollPos = this.dataGrid.scrollPosition;

  if (this.selectNextBeforeUpdate) {
    this.selectNext();
  }

  // save selected and collapsed state
  const selectedRows = [];
  const collapsedRows = [];

  this.dataGrid.rows.forEach(row => {
    if (row.dataItem) {
      if (row.isSelected) {
        selectedRows.push(row.dataItem.id);
      }
      if (row instanceof GroupRow && row.isCollapsed) {
        collapsedRows.push(row.dataItem.id);
      }
    }
  });

  const idCurrentItem = this.idCurrentItem;

  this.dataGrid.itemsSource = new CollectionView(result);

  if (idCurrentItem) {
    this.dataGrid.rows.forEach(row => {
      if (row.dataItem.id === idCurrentItem) {
        this.dataGrid.selection = new CellRange(row.index, this.dataGrid.selection.col);
      }
    });
  }

  // restore collapsed and selected state
  this.dataGrid.rows.deferUpdate(() => {
    this.dataGrid.rows.forEach(row => {
      if (row instanceof GroupRow && collapsedRows.indexOf(row.dataItem.id) > -1) {
        row.isCollapsed = true;
      }
      if (selectedRows.indexOf(row.dataItem.id) > -1) {
        row.isSelected = true;
      }
    });
  });

  this.dataGrid.scrollPosition = scrollPos;
  this.initializeHeader();

  if (this.selectNextAfterUpdate) {
    this.selectNext();
  }
  this.dataGrid.endUpdate();
}

We have extra code here to keep our selection, as Wijmo resets selection when changing the CollectionView.

Scuba Kay
  • 2,004
  • 3
  • 26
  • 48

0 Answers0