We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
  1. Home
  2. Forum
  3. ASP.NET Core - EJ 2
  4. Hierarchy Grid ej2

Hierarchy Grid ej2

Hello,
 I am converting a project from ej1 to ej2 and am presently doing the new way of handling hierarchy grids with child grid. So far so good below is my code:

@{

    var ChildGrid1 = new Syncfusion.EJ2.Grids.Grid()
    {
        DataSource = @sp.SPGetSubBids(3, config.GetConnectionString("HectareConnection")),
        QueryString = "BidId",
        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> {
new Syncfusion.EJ2.Grids.GridColumn(){ Field="Produce", HeaderText="Produce", Width="200" },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="TotalBidQty", HeaderText="Quantity", Width="70",  Format="N0" },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="NumLots", HeaderText="Num Lots", Width="80", Format="N0" },
new Syncfusion.EJ2.Grids.GridColumn(){ Field="QtyPerLot", HeaderText="Qty/Lot", Width="80", Format="N0" },
}

    };
}

=============================================

   <ejs-grid id="PublishedGrid" dataSource="@sp.GetBidsByStatuses(3,config.GetConnectionString("HectareConnection"))" childGrid="ChildGrid1" allowPaging="true" gridLines="Both">
                                <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
                                <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" showDeleteConfirmDialog="true" showConfirmDialog="true"></e-grid-editSettings>
                                <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings>

                                <e-grid-columns>
                                    <e-grid-column field="BidId" isIdentity="true" isPrimaryKey="true" width="80" textAlign="Right" visible="true"></e-grid-column>
                                    <e-grid-column field="BidsId" headertext="HReadable"></e-grid-column>
                                    <e-grid-column field="BidDate" headertext="Bid Date"></e-grid-column>
                                    <e-grid-column field="BidClosingDate" headertext="Closing Date"></e-grid-column>
                                </e-grid-columns>
                            </ejs-grid>

This code works without issues. I have 2 problems:
1) is i need to add aggregate functions (sum, total, count etc.. ) in the child grid and 
2) How to add a custom command button in ej1 I could simply add :  <e-column header-text="Participate" width="120" Template="<a rel='nofollow' href='Home/Participate/?Id={{:Id}}' class='modal-link btn-xs btn-success'>Participate</a>" allow-editing="false"></e-column>
how do i do this with the new childgrid syntax

Thanks in advance

9 Replies
PS Pavithra Subramaniyam Syncfusion Team April 2, 2019 07:27 AM

Hi Yoab, 
 
Thanks for contacting Syncfusion support, 
 
Query #1:  is i need to add aggregate functions (sum, total, count etc.. ) in the child grid and  
 
From your query we suspect that you want to add Aggregates for the child grid. If so, you can achieve your requirement by adding the “Aggregates” property in the child grid definition as given below. 
 
[index.cshtml] 
@{ 
    var col = new List<Syncfusion.EJ2.Grids.GridAggregateColumn> { 
              new Syncfusion.EJ2.Grids.GridAggregateColumn(){ Field = "FirstName", Format = "C2", Type = "count", FooterTemplate = "Count: ${count}" } 
}; 
} 
@{ 
            var ChildGrid1 = new Syncfusion.EJ2.Grids.Grid() 
            { 
                DataSource = ViewBag.empData, 
                QueryString = "EmployeeID", 
                Aggregates = new List<Syncfusion.EJ2.Grids.GridAggregate> { 
            new Syncfusion.EJ2.Grids.GridAggregate() {Columns =col} }, 
               .  .  . 
            }; 
        } 
 
============================================= 
 
<ejs-grid id="PublishedGrid" dataSource="ViewBag.data" childGrid="ChildGrid1" allowPaging="true" gridLines="Both"> 
 
    <e-grid-columns> 
        <e-grid-column field="OrderID" isIdentity="true" isPrimaryKey="true" width="80" textAlign="Right" visible="true"></e-grid-column> 
        .  .  . 
    </e-grid-columns> 
</ejs-grid> 
 
Query #2: How to add a custom command button 
 
You can add the custom button in the columns by simply using the “Template” property as you do in EJ1. The only difference is We have expression evolution as like ES6 expression string literals ( ex: ${name} ). Please refer to the below code example and sample link for more information. 
 
[index.cshtml] 
@{ 
            var ChildGrid1 = new Syncfusion.EJ2.Grids.Grid() 
            { 
                DataSource = ViewBag.empData, 
                QueryString = "EmployeeID", 
   Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 
           new Syncfusion.EJ2.Grids.GridColumn(){ Field="FirstName", HeaderText="Produce", Width="200" }, 
           new Syncfusion.EJ2.Grids.GridColumn(){ Field="EmployeeID", Template="<a rel='nofollow' rel='nofollow' href='Home/Participate/?Id=${EmployeeID}' class='modal-link btn-xs btn-success'>Participate</a>", HeaderText="Quantity", Width="70",  Format="N0" } 
}               .  .  . 
            }; 
        } 
 
============================================= 
 
<ejs-grid id="PublishedGrid" dataSource="ViewBag.data" childGrid="ChildGrid1" allowPaging="true" gridLines="Both"> 
 
    <e-grid-columns> 
        <e-grid-column field="OrderID" isIdentity="true" isPrimaryKey="true" width="80" textAlign="Right" visible="true"></e-grid-column> 
        .  .  . 
    </e-grid-columns> 
</ejs-grid> 
 
 
 
Please get back to us, if you have any concern. 
 
Regards, 
Pavithra S. 


YY Yoab Youssoufou April 2, 2019 07:37 PM

Thank you very much, problem solved.

PS Pavithra Subramaniyam Syncfusion Team April 2, 2019 11:43 PM

Hi Yoab,  

Thanks for your update. 

We are happy to hear that the provided solution helped you.  

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 
 


YY Yoab Youssoufou April 9, 2019 02:58 PM

Hello again,
Please how with this same example can I implement CRUD in the child grid? and also with a field having a foreign key 
normally I handle it like this:

  
 
headertext="Produce Group" 
foreignkeyfield="Id" 
allowediting="true" 
foreignkeyvalue="Name" 
width="165" 
  datasource="@gen.GetLkProduceGroups()">


How can I do this in the Child Grid.

Thanks

HJ Hariharan J V Syncfusion Team April 11, 2019 11:42 AM

Hi Yoab, 

Thanks for your update. 

As per your suggestion we have created a sample with foreign key column and editing feature in child Grid. Please refer the below code example and sample for more information. 

 
@{ 
            var ChildGrid1 = new Syncfusion.EJ2.Grids.Grid() 
            { 
                DataSource = ViewBag.empData, 
                QueryString = "EmployeeID", 
                EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowEditing = true, AllowDeleting = true }, 
                Toolbar = new List<string>() { "Add", "Edit", "Delete", "Update", "Delete" }, 
                Aggregates = new List<Syncfusion.EJ2.Grids.GridAggregate> { 
            new Syncfusion.EJ2.Grids.GridAggregate() {Columns =col} }, 
                Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="orderid", HeaderText="ID", IsPrimaryKey=true, Width="200" }, 
new Syncfusion.EJ2.Grids.GridColumn(){ Field="id", ForeignKeyField="EmployeeID1", ForeignKeyValue="FullName", DataSource= ViewBag.empData1, HeaderText="Full Name", Width="200" }, 
} 
 
            }; 
        } 
 
============================================= 
 
<ejs-grid id="PublishedGrid" dataSource="ViewBag.data" childGrid="ChildGrid1" allowPaging="true" gridLines="Both"> 
    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings> 
    <e-grid-editSettings allowAdding="false" allowDeleting="false" allowEditing="false" showDeleteConfirmDialog="true" showConfirmDialog="true"></e-grid-editSettings> 
    <e-grid-textwrapsettings wrapMode="Both"></e-grid-textwrapsettings> 
 
    <e-grid-columns> 
        <e-grid-column field="OrderID" isIdentity="true" isPrimaryKey="true" width="180" textAlign="Right" visible="true"></e-grid-column> 
        <e-grid-column field="EmployeeID" headertext="HReadable" width="150"></e-grid-column> 
    </e-grid-columns> 
</ejs-grid> 
 


Regards, 
Hariharan 


YY Yoab Youssoufou April 11, 2019 12:25 PM

Perfect! Thank you

HJ Hariharan J V Syncfusion Team April 11, 2019 10:51 PM

Hi Yoab, 
 
Thanks for your update.  
  
We are happy to hear that the provided solution helped you.   
  
Please contact us if you need any further assistance. As always, we will be happy to assist you.   
  
Regards, 
Hariharan 


AS aaron sulwer March 11, 2023 05:52 PM

how about two child grids?  

not

  1. parent
    1. child
      1. subchild 

but
  1. parent
    1. child1
    2. child2

JC Joseph Christ Nithin Issack Syncfusion Team March 13, 2023 03:03 PM

Hi Aaron,


  Greetings from Syncfusion support.


  By default, inEJ2 Grid, you cannot have two childgrids of the same level. We suggest you to use the detail template where you can have custom number of grids in the same level. Please refer the below demo sample and documentaiton for more details on detail template.


Sample: https://ej2.syncfusion.com/aspnetcore/Grid/DetailTemplate#/bootstrap5


Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/grid/row/detail-template


Regards,

Joseph I.


Loader.
Live Chat Icon For mobile
Up arrow icon