EasyUI Forum
March 28, 2024, 06:50:40 PM *
Welcome, Guest. Please login or register.

Login with username, password and session length
News:
 
   Home   Help Search Login Register  
Pages: [1]
  Print  
Author Topic: Accessing nested components of DataGridComponent  (Read 2291 times)
khan
Newbie
*
Posts: 13


View Profile
« 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>
Logged
khan
Newbie
*
Posts: 13


View Profile
« Reply #1 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>
Logged
jarry
Administrator
Hero Member
*****
Posts: 2260


View Profile Email
« Reply #2 on: July 14, 2022, 02:04:07 AM »

You should remove the 'static' option.
Code:
@ViewChild('childDatagrid1') datagrid1: DataGridComponent;
@ViewChild('childDatagrid2') datagrid2: DataGridComponent;
Logged
khan
Newbie
*
Posts: 13


View Profile
« Reply #3 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.
Logged
Pages: [1]
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.18 | SMF © 2013, Simple Machines Valid XHTML 1.0! Valid CSS!