DetailTemplate and RowTemplate at the same time.

[Unknown]

I need to create a grid with custom row content(RowTemplate) and at the same time have an expandable row to show some extra content(DetailTemplate).

While using both templates, I found that the RowTemplate must have in TD elements that renders over the detail template table, not allowing to use the expand button.

```C#
<SfGrid @ref="GridObj" DataSource="@Characters">
    <GridTemplates>
        <RowTemplate>
            @{
                var emp = (context as Character);
                <td>
                    @emp?.CharacterId
                </td>
                <td>
                    @emp?.Name
                </td>
                <td>
                    @emp?.Appearances
                </td>
            }
        </RowTemplate>

        <DetailTemplate>
            @{
                var empo = (context as Character);

                <div>@empo?.Appearances</div>
            }
        </DetailTemplate>

    </GridTemplates>
```

Getting this as result:

[Vignesh Natarajan]

Hi Christopher,  

 

Thanks for contacting Syncfusion support.  

 

Query: “ I found that the RowTemplate must have in TD elements that renders over the detail template table, not allowing to use the expand button.” 

 

We have achieved your requirement by rendering a RowTemplate as separate component along with a Detail cell (Detail Template expand / collapse) icon. We have used DetailExpandCollapseRow() method to open the detail template on click. Refer the below code example.  

 

<SfGrid @ref="Grid" DataSource="@Employees" Width="400" Height="335">     

    <GridTemplates> 

        <RowTemplate Context="emp"> 

            @{ 

                var employee = (emp as EmployeeData); 

                <RowComponent employee="employee"></RowComponent> 

            } 

        </RowTemplate> 

        <DetailTemplate> 

            @{ 

                var employee = (context as EmployeeData); 

. . . . . . . 

            } 

        </DetailTemplate> 

    </GridTemplates> 

    <GridColumns>         

        <GridColumn HeaderText="Employee Image" Width="250" TextAlign="TextAlign.Center"> </GridColumn> 

        <GridColumn HeaderText="Employee Details" Width="300" TextAlign="TextAlign.Left"></GridColumn> 

    </GridColumns> 

</SfGrid> 

   

RowComponent.razor 

 

<td class="@clsname" @onclick="@(()=>expandDetail(employee))">    <div class="@iconclass"></div></td><td class="details">. . . . . . . .</td> @code{    [Parameter]    public EmployeeData employee { get; set; }    [CascadingParameter]    public SfGrid<EmployeeData> ParentGrid { get; set; }     public string iconclass { get; set; } = "e-icons e-dtdiagonalright e-icon-grightarrow";    public string clsname { get; set; } = "e-detailrowcollapse";    public async Task expandDetail(EmployeeData emp)    {        if (clsname == "e-detailrowcollapse") // to change the icon         {            iconclass = "e-icons e-dtdiagonaldown e-icon-gdownarrow";            clsname = "e-detailrowexpand";        }        else        {            iconclass = "e-icons e-dtdiagonalright e-icon-grightarrow";            clsname = "e-detailrowcollapse";        }        await ParentGrid.DetailExpandCollapseRow(emp);    }}

 

 

For your convenience we have prepared a sample which can be downloaded from below  

Sample: https://www.syncfusion.com/downloads/support/forum/157647/ze/DataGrid-1919646265  

 

Refer our API documentation for your reference 

 

https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_DetailExpandCollapseRow__0_  

 

Kindly get back to us if you have further queries.   

 

Regards, 

Vignesh Natarajan 

[tanveer]

Hi Team ,

I want to use same Rowtemplate & Child template at same time like  Hierarchical binding but i want to make some custom but not able to achive the same using angular .

Below is my code. any suggestion please let me know.

<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-container
*ngIf="UseFundConsoleTemple===true">             

      <ng-template
#rowTemplate   let-data
>  

       

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

                                  <div
class="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>

      <!-- <div class="">

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

       </div> -->

  </ng-template>

  </ng-container>

        <!-- <e-column headerText="Actions"

                width="30"

                [commands]="commands"

                *ngIf="commands.length > 0"

                textAlign="center">

      </e-column> -->

    </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 the EJ2 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