Hierarchy Grid with Multiple Child Grids On Same Level for EJS controls

[Dawo]

Hi team,

I would like to implement this functionallity in my project:

https://www.syncfusion.com/forums/138613/hierarchy-grid-with-multiple-child-grids-on-same-level

I am using EJS controls, and I would like to enable CRUD operations for child grids, that is possible?

Thanks

[Manivel Sellamuthu]

Hi Dawo, 

Greetings from Syncfusion support. 

Query: would like to implement this functionality in my project: 

 

Yes, you can achieve the same in EJS controls (EJ 2). You can achieve your requirement by using detailTemplate property of the Grid, which allows any template can render on the child element of EJ2 Grid Row.  

Using that feature we have created two div elements and render the Grids in detailDataBound event of the Grid, which triggers on every row initial expand. The queryString property doesn’t support the detailTemplate feature. So we can achieve your requirement by using the query property and the load event of the detail grid. 

Index.cshtml  

  

@Html.EJS().Grid("Grid").DataSource(dataManger =>  

{  

    dataManger.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor");  

}).AllowPaging().DetailTemplate("#DetailGridTemplate").DetailDataBound("detailDataBound").Columns(col =>  

{  

    col.Field("OrderID").HeaderText("Order ID").Add();  

    col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).Add();  

    col.Field("CustomerID").HeaderText("CustomerID").Add();  

  

}).Render()  

</div>  

  

<script id="DetailGridTemplate" type="text/x-template">  

    <div id="ChildGridone${OrderID}"></div>  

    <div id="childGridtwo${OrderID}"></div>  

</script>  

  

<script>  

    function detailDataBound(e) {  

        var childGridData = @Html.Raw(Json.Encode(ViewBag.childdata));  

        var data = new ej.data.DataManager({  

            url: "/Home/ChildDatasource",  

            adaptor: new ej.data.UrlAdaptor,  

            crossDomain: true  

        });        

        var firstdetailgrid = new ej.grids.Grid({  

            dataSource: data,  

            load: function (args) {  

                this.query = new ej.data.Query().addParams("EmployeeID", e.data.EmployeeID) // Pass the parent grid row data to server end  

  

            },  

            columns: [  

                { field: 'FirstName', headerText: 'Employee Name', width: 110 },  

                { field: 'EmployeeID', headerText: 'Employee ID', width: 110 }  

            ]  

        });  

        firstdetailgrid.appendTo(e.detailElement.querySelector('#ChildGridone' + e.data.OrderID));  

  

        var seconddetailGrid = new ej.grids.Grid({  

            dataSource: childGridData,  

            columns: [  

                { field: 'CustomerID', width: 110 },  

                { field: 'Freight',  width: 110 }  

            ]  

        });  

        seconddetailGrid.appendTo(e.detailElement.querySelector('#childGridtwo' + e.data.OrderID));  

  

    }  

</script>  

  

  

[HomeController.cs]  

 

public ActionResult ChildDatasource(OrdersDetails id, DataManagerRequest dm)  

        {  

            ICollection<Employee1Details> empcol = empdata.ToList();  

            if (empcol.Count == 0)  

            {  

                ChildBindData();  

            }  

            var ord = id.EmployeeID;  

            IEnumerable<Employee1Details> DataSource = empdata.Where(or => or.EmployeeID == ord).ToList();//get the parent grid data in server side while pass this data through addParams  

  

             

            return dm.RequiresCounts ? Json(new { result = DataSource, count = count }) : Json(DataSource);  

  

        }  

Sample: https://www.syncfusion.com/downloads/support/directtrac/244270/ze/Hierarchical_Grid-2442701235137829 

Query: I would like to enable CRUD operations for child grids, that is possible? 

 

Yes, You can enable CRUD operations for child grid by enabling editSettings. Please refer the below documentation links for more information. 

 

Enable Editing : https://ej2.syncfusion.com/javascript/documentation/grid/edit/#normal 

 

Adding record in Child Grid: https://ej2.syncfusion.com/javascript/documentation/grid/hierarchy-grid/#adding-record-in-childgrid 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[Dawo]

Thanks Manivel.

[Manivel Sellamuthu]

Hi Dawo, 

Thanks for your update. 

We hope your requirement has been achieved. 

Please get back to us, if you need further assistance. 

Regards, 

Manivel