hierarchical data bind using custom template

[tanveer]

Hi Team,

I need a response asap because I am struggling to load the child expandable view in the grid.

I want the parent row should be in the template means it should be in <tr><td> as well as my child row in the template because I want to have customized the row having controls in it. 

below is my code.

---

<ejs-grid
#grid

            [childGrid]='childGrid'

            [dataSource]="data"

            id="dataview"

            [editSettings]="editSettings"           

            [toolbar]="toolbar"

            [allowSorting]="enableSorting"           

            [pageSettings]="initialPage"

            allowResizing="true"        

            (toolbarClick)="toolbarClick($event)"

            (rowSelected)="rowIsSelected($event)"          

            (actionComplete)="actionEndHandler($event)"

            [allowPdfExport]="showPdfExport"

            [showColumnChooser]="showColumnChooser"

            (dataStateChange)="onDataStateChanged($event)"

            >

    <e-columns>

      <e-column  *ngFor="let column of columnsList"

                [field]="column.key"

                [headerText]="column.header"

                [width]="column.width"

                [textAlign]="column.textAlign"

                [headerTextAlign]="column.hederAlign"

                [visible]="column.visible"

                [type]="column.type"

                [format]="column.format">

      </e-column>

     

      <ng-template #rowTemplate   let-data>   --> THis is my parent Row

       

        <tr class="static-row" *ngIf="data.index == 0"  >                            

          <td  class="centre"  >Group One </td>

          <td colspan="7">&nbsp;</td>         

        </tr>

        <tr class="e-altrow">                           

                            <td class="centre">{{data.fund}} </td>

                            <td class="centre">{{data.fundType}} </td>

                            <td class="centre">

                              <div class="float-container">

                                <div class="float-childtext">

                                  <div class="centre"> {{data.typeOfInvestment}}</div>

                                </div>        

                                <ng-container *ngIf="data.investmentCount > 0">                               

                                <div class="float-child">

                                  <div class="numberCircle">{{data.investmentCount}}</div>

                                </div>  

                              </ng-container>                                

                              </div>

                            </td>

                            <td class="centre">{{(data.fundAdministrator)}}</td>

                            <td class="centre">

                              <div class="float-container">

                                <div class="float-childtext">

                                  <divclass="centre" > {{(data.brokerCustodian)}}</div>

                                </div>                     

                                <ng-container *ngIf="data.brokerCount > 0">             

                                <div class="float-child">

                                  <div class="numberCircle">{{data.brokerCount}}</div>

                                </div>       

                              </ng-container>                         

                              </div>                                                           

                            </td>

                            <td class="centre">{{(data.reportingCurrency)}}</td>

                            <td class="centre">{{(data.periodBeginDate)}}</td>

                            <td class="centre">{{(data.periodBeginDate)}}</td>

                        </tr>                           

    </ng-template>

    <ng-template #childtemplate let-childData>  --> I want this child data should be like expandable 

      <!-- <div class="">

        <span style="font-weight: 500;">First Name: </span> {{childData.FundInvestmentType}} 

       </div> -->

  </ng-template>

  </ng-container>

      

    </e-columns>  

  </ejs-grid>

---

The information in this email is confidential and may be legally privileged. It is intended solely for the addressee. Access to this email by anyone else is unauthorized. If you are not the intended recipient, any disclosure, copying, distribution or any action taken or omitted to be taken in reliance on it, is prohibited and may be unlawful. When addressed to our clients any opinions or advice contained in this email are subject to the terms and conditions expressed in the governing KPMG client engagement letter.
***********************************************************************

[Pavithra Subramaniyam]

Hi tanveer, 

Currently, we are validating the feasibility of the reported scenario(Row Template with Child Grid ) with given details at our end and will update the further details on Feb 9th, 2022. 

We appreciate your patience until then.  

Regards, 

Pavithra S