Sample of Heirarchial grid with add, edit and delete operations with the presented scenario

[John Stephen Mangam]

Hi,

Could you please share with me a Sample of Hierarchical grid with add, edit and delete operations that handles a case like the below presented heirarchy?

Teams under various groups

[Group data type] Unit 1     description     ...

[Group data type]     -Production    description     ...

[Team data type]          Management Team

[Team data type]          Engineering Team

[Group data type]               PClass A description     ...

[Team data type]                  Team 1     Member count

[Team data type]                  Team 2     Member count

[Group data type]            PClass B     description     ...

[Group data type]            PClass C       description     ...

[Group data type]        Sales          description     ...

[Team data type]        Team 1     Member count

[Team data type]        Team 2

          

>Unit 2

     - Production      

     Sales

          Class A

          Class B

          Class C

[Manivel Sellamuthu]

Hi  John, 

Greetings from Syncfusion support. 

From your query we suspect that you want a sample with hierarchy Grid with Crud actions handled. Based on that we have prepared a sample with remote data. Please find the below code example and sample for more information. 

@{ 

    var data = new Syncfusion.EJ2.DataManager() 

    { 

        Url = "/Home/UrlDatasourceChild", 

        InsertUrl = "/Home/InsertChild", 

        UpdateUrl = "/Home/UpdateChild", 

        RemoveUrl = "/Home/RemoveChild", 

 

        Adaptor = "UrlAdaptor", 

    }; 

 

    var ChildGrid = new Syncfusion.EJ2.Grids.Grid() 

    { 

        DataSource = data, 

        QueryString = "EmployeeID", 

        ActionBegin = "actionBeginChild", 

        EditSettings = new Syncfusion.EJ2.Grids.GridEditSettings() { AllowAdding = true, AllowEditing = true, AllowDeleting = true }, 

        Toolbar = new List<string>() { "Add", "Edit", "Delete", "Update" }, 

        Columns = new List<Syncfusion.EJ2.Grids.GridColumn> { 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="UnitID", IsPrimaryKey=true, HeaderText="Unit ID", Width="150" }, 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipName", HeaderText="Ship Name", Width="150" }, 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="ShipAddress", HeaderText="Ship Address", Width="120" }, 

new Syncfusion.EJ2.Grids.GridColumn(){ Field="N1", HeaderText="N1", Width="150" }, 

} 

    }; 

} 

 

<div class="control-section"> 

    <ejs-grid id="Grid" childGrid="ChildGrid" toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update" })"> 

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

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

        <e-grid-columns> 

            <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" textAlign="Right" width="125"></e-grid-column> 

            <e-grid-column field="CustomerID" headerText="Customer Name" width="120"></e-grid-column> 

            <e-grid-column field="Freight" headerText="Freight" format="C0" width="170"></e-grid-column> 

        </e-grid-columns> 

    </ejs-grid> 

</div> 

 

<script> 

function actionBeginChild(args) { 

 

        if (args.requestType === "add") { 

            // `parentKeyFieldValue` refers to the queryString field value of the parent record. 

            args.data.EmployeeID = this.parentDetails.parentKeyFieldValue; 

        } 

    } 

</script> 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Hierarchical_grid_CRUD397826475.zip 

Snapshot: 

 

Please let us know, if you need further assistance. 

Regards, 

Manivel 

[John Stephen Mangam]

Hi Manivel,

Thank you for the solution. It doesn't solve my problem yet.

 Hierarchical grid to show group and team data:

Group

- List<Team> Child Teams

- List<Group> Child groups

  

So I should be able to show the structure of the attached file in the grid with add, update, delete for both the Group and Team types heirarchially.

[Manivel Sellamuthu]

Hi John, 

Thanks for your update. 

From your query, we are unable to get your exact requirement. But we suspect that you want to Group the main Grid, and show the Child grid in the grouped row. If so you can achieve this requirement by enable grouping by setting allowGrouping="true". 

Screenshot:  

 

If the above screenshot is not the layout you want to show the data, please share the video demonstration or screenshot of the layout.  So we can validate the possibility to achieve the requirement and provide a suggestion as soon as possible. 

Regards, 

Manivel