hierarchical data bind using custom template

[Tanveer Sayyed]

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"> </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>

[Rajapandiyan Settu]

Hi Tanveer, 

Thanks for contacting Syncfusion support. 

We would like to inform you that DetailRow feature is not supported when using RowTemplate feature in Grid.  

RowTemplate feature is not compatible with all the features which are available in grid and it has only limited features support. We suggest you to refer the below documentation, here we have listed out the features which are not compatible with row template feature. 

https://ej2.syncfusion.com/documentation/grid/Row/row-template/#limitations 

Please get back to us if you need further assistance. 

Regards, 

Rajapandiyan S