Our blazing fast Grid component built with pure JavaScript


Post by striker »

Hello.
I need to create 2 grids on same view.
I followed to example from here: https://bryntum.com/examples/grid/multipleinstances/
to create multiinstance by WidgetHelper, but second grid is not rendered while is not lazy-loading.

html code gantt-tabs.component.html:

    <mat-tab>
      <ng-template matTabLabel>
        FIRST GRID
      </ng-template>

  <div #firstGrid></div>
</mat-tab>

<mat-tab>
  <ng-template matTabLabel>
    SECOND GRID
  </ng-template>

  <div #secondGrid></div>
</mat-tab>

Rendering grids:

  private initGrid(element: ElementRef, id: string): void {
    const [widget] = WidgetHelper.append({
      type: 'grid',
      id: id,
      columns: [
        {
          text: 'Numer zadania',
          flex: 1,
          field: 'task.name',
          sortable: true
        },
        {
          text: 'Numer zlecenia',
          flex: 1,
          field: 'task.orderNumber',
          sortable: true
        },
        {
          text: 'Zasób',
          flex: 1,
          field: 'task.resourceName',
          sortable: true

    },
    {
      text: 'Nazwa produktu',
      flex: 1,
      field: 'task.itemName',
      sortable: true
    },
    {
      text: 'SKU produktu',
      flex: 1,
      field: 'task.index',
      sortable: true
    },
    {
      text: 'Operacja',
      flex: 1,
      field: 'task.operationName',
      sortable: true
    },
    {
      text: 'Ilość wymagana',
      flex: 1,
      field: 'task.requiredQuantity',
      sortable: true
    },
  ],
  features : {
    filterBar: {
      compactMode: false,
    },
    stripe: true,
    quickFind: true,
    sort: true
  },
  selectionMode: {
    cell: false,
    row: true
  },
  readOnly: true
}, element.nativeElement);
  }
  

Issue:

multiinstances.gif
multiinstances.gif (710.75 KiB) Viewed 1202 times

2 grids should be displayed correctly.

I am attaching test case for this:

gridmultiinstances.zip
(338.2 KiB) Downloaded 81 times

Can you help me with solving this?


Post by saki »

The cause is that the element you render the 2nd grid to is either non-existent or not visible (zero dimensions) during the grid creation which prevents the correct sizing. After activating the 2nd tab, run in the console:

bryntum.queryAll('grid')[1].hidden = true;
bryntum.queryAll('grid')[1].hidden = false;

which causes the grid to re-calculate sizes and it shows correctly.

Probably the best would be to create the 2nd grid only when needed (on 2nd tab click) or to initialize it into the properly sized element.

Note: What I could see from the code you posted is that you do not use wrappers which is the recommended way but you create grids on the fly but this is not the root of the problem.


Post by Animal »

The problem is that the grids don't know they're being hidden.

This "Mat" thing is doing it to pure DOM.

Much the better option is to simply place two grid inside a Bryntum TabPanel. This handles the lifecycle of its child components. It uses their hide and show methods so that they fully understand their own state.

No widget can be expected top understand its own state if arbitrary code just gets to change its DOM from the outside.


Post by striker »

Thank you for helping.
Hiding first tab before show second tab is working. Honestly.. This is very ugly workaround.

I found a bug after this - if you will show grid after this operation, rows are not visible until you scroll grid.
To fix this I need to do this workaround:

      grid.show().then(() => {
        grid.refreshRows();
        grid.renderContents();
      });

Post by saki »

Yeah, that's very ugly. Haven't you considered using Bryntum TabPanel instead of mat tabs as Animal suggests?


Post by striker »

We can't use Bryntum TabPanel, because we have global behaviors and styles for mat tab and we need to use them to achieve our goals. :/


Post by saki »

We do not have a better solution for you as of now but I have created a ticket to find one here: https://github.com/bryntum/support/issues/3656


Post Reply