Grid will child records of different type for parent records of another type

[John Stephen Mangam]

Hi,

Could you please share with me a sample of a grid that will be able to add and delete parent [Employee] and child [Children] records in the same grid?

EmployeeId      Name     Role

1                    Jim     Manager

          

     [child]                    Jones           7 years          Kids care

     [child]                    Rose           5 years          Kids care

2                    Kate     Supervisor

     [child]                    Julie          7 years          Kids care

     [child]                    Sam           5 years          Kids care

[Balaji Sekar]

Hi John Stephen Mangam, 

 

Greetings from the Syncfusion support, 

 

We could see you would like to expect the hierarchy Grid with editing option since we have created a sample with parent Grid has been enabled a editing feature and child Grid binding based EmployeeID value from the parent Grid row. Please refer the below code example and sample for more information. 

 

[Index.cshtml] 

<div> 

    <ejs-grid id="Grid" toolbar="@(new List<string>() { "Add", "Delete","Edit","Update", "Cancel" })" gridLines="Both" load="load" allowPaging="true"> 

        <e-data-manager url="/Home/EmployeeDatasource" adaptor="UrlAdaptor" insertUrl="/Home/Insert" updateUrl="/Home/Update" removeUrl="/Home/Delete"></e-data-manager> 

        <e-grid-editSettings allowDeleting="true" allowEditing="true" allowAdding="true"></e-grid-editSettings> 

        <e-grid-pagesettings pageCount="5"></e-grid-pagesettings> 

        <e-grid-columns> 

            <e-grid-column field="EmployeeID" headerText="EmployeeID" isPrimaryKey="true" validationRules="@(new { required=true})" textAlign="Right" width="120"></e-grid-column> 

            <e-grid-column field="FirstName" headerText="Customer Name" validationRules="@(new { required=true})" width="150"></e-grid-column> 

            <e-grid-column field="LastName" headerText="Ship City" width="170"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

     function load(args) { 

                this.childGrid = { 

                    dataSource: new ej.data.DataManager({ 

                        url: "Home/UrlDatasource", 

                        adaptor: new ej.data.UrlAdaptor(), 

                        crossDomain: true 

                    }), 

                    queryString: 'EmployeeID', 

                    columns: [ 

                        { field: 'EmployeeID', headerText: 'KitId', width: 120 }, 

                        { field: 'OrderID', headerText: 'Order ID', width: 120 }, 

                        { field: 'ShipName', headerText: 'ShipName', width: 120 } 

                    ], 

                }; 

            } 

</script> 

 

Sample link: https://www.syncfusion.com/downloads/support/forum/154098/ze/Grid-child-grid-url-core622989472-1712654583.zip  

 

Note: we have binding remote data from the server side using the UrlAdaptor in the Grid. 

 

Regards, 

Balaji Sekar