Print Page - Accessing nested components of DataGridComponent

Title: Accessing nested components of DataGridComponent
Post by: khan on July 12, 2022, 06:03:03 AM

I have a question about detail template for expanded datagrid row. I can't access expanded nested datagrid components with @ViewChild decorator. I think, there is no event output ngAfterViewInit for detail template. Have you any suggestion for my code? How can I access nested components as an Angular component?

Code:

/* Can access parent DataGridComponent */
@ViewChild('parentDatagrid', {static: true}) datagrid: DataGridComponent;

Code:

<eui-datagrid 
            #parentDatagrid 
            [lazy]="true"
            [data]="data"
            (rowSelect)="rowClick($event)"
            (rowExpand)="onExpandRow($event)"
    (rowContextMenu)="contextMenu($event)"
    (rowCollapse)="onRowCollapse($event)"
    >
    <eui-grid-column [expander]="true" width="30"></eui-grid-column>
    <eui-grid-column field="col1" title="Col 1" width="100px"></eui-grid-column>
    <eui-grid-column field="col2" title="Col 2" width="200px"></eui-grid-column>
    <ng-template euiDetailTemplate let-row #detailTemplate>
        <div class="item f-row">
            <div class="f-column">
                <eui-tabs style="height:250px">
                    <eui-tab-panel title="Tab 0">
                        <eui-datagrid #childDatagrid1>
                            <eui-grid-column title="Col 1"></eui-grid-column>
                            <eui-grid-column title="Col 2"></eui-grid-column>
                        </eui-datagrid>
                    </eui-tab-panel>
                    <eui-tab-panel title="Tab 1">
                        <eui-datagrid #childDatagrid2>
                            <eui-grid-column title="Col 1"></eui-grid-column>
                            <eui-grid-column title="Col 2"></eui-grid-column>
                        </eui-datagrid>
                    </eui-tab-panel>
                </eui-tabs>
            </div>
        </div>
    </ng-template>
</eui-datagrid>

Title: Re: Accessing nested components of DataGridComponent
Post by: khan on July 12, 2022, 06:24:09 AM

Actually, my question is an Angular question. Probably, creating an Angular component with its own module for detail template is a good method.

Code:

<ng-template euiDetailTemplate let-row>
    <div class="item f-row" style="margin: 6px 6px 6px 30px">
        <div class="f-column w-100">
            <app-file-detail-tab [fileId]="row.id"></app-file-detail-tab>
        </div>
    </div>
</ng-template>

Title: Re: Accessing nested components of DataGridComponent
Post by: jarry on July 14, 2022, 02:04:07 AM

You should remove the 'static' option.

Code:

@ViewChild('childDatagrid1') datagrid1: DataGridComponent;
@ViewChild('childDatagrid2') datagrid2: DataGridComponent;

Title: Re: Accessing nested components of DataGridComponent
Post by: khan on July 24, 2022, 02:48:30 AM

Can't access component when I tried without static parameter too. It's giving an error. DataGridComponent is undefined. I think, that's not a problem. Using an external Angular module may be solution. Otherwise EasyUI team must write extra code for that.

EasyUI Forum

General Category => EasyUI for Angular => Topic started by: khan on July 12, 2022, 06:03:03 AM