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:
2 grids should be displayed correctly.
I am attaching test case for this:
Can you help me with solving this?