How to single datasource in parent child grid

I have an sfgrid control with two data source (parent and child grid template).It works fine as per our requirement.I would like to know how to use this scenario in single data source.

For example 

I have 15 columns in single data source

I would like to use first 5 columns in parent grid and remaining should be in child template grid


1 Reply

RS Renjith Singh Rajendran Syncfusion Team July 19, 2021 11:12 AM UTC

Hi Hassan, 

Greetings from Syncfusion support. 

Based on this scenario, we suggest you to set same DataSource variable for both parent and child grids. And define the columns which you want to display in parent and child grid. Define first 5 columns in parent grid and then define remaining columns in child grid. 

Please refer the codes below, 

 
<SfGrid DataSource="@Orders"> 
    <GridTemplates> 
        <DetailTemplate> 
            @{  
                @*Define remaining columns in child grid*@
                <SfGrid DataSource="@Orders"> 
                    <GridColumns> 
                        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn> 
                        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
                        ... 
                    </GridColumns> 
                </SfGrid> 
            } 
        </DetailTemplate> 
    </GridTemplates> 
    <GridColumns> 
        @*Define fist 5 columns in parent grid*@
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" Freeze="FreezeDirection.Left" TextAlign="TextAlign.Right" Width="120"></GridColumn> 
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="170"></GridColumn> 
        ... 
    </GridColumns> 
</SfGrid> 


Please get back to us if you need further assistance. 

Regards, 
Renjith R 


Loader.
Up arrow icon