Grids Master-Details

[Tommy Mailhot]

Hi,

I have a master grid and when I click on a row, I would like to show children/detail in a second grid.

I see exemple with Angular but none with Ejs2.

Is it possible to have an exemple?

Have a nice

[Renjith Singh Rajendran]

Hi Tommy, 

Thanks for contacting Syncfusion support. 

We have prepared a sample with master-detail Grid in ASP.NET MVC platform which could be downloaded from the link below, 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization-1297327328 

 

We have achieved the master-detail Grid in ASP.NET MVC by using the “RowSelected” event of Grid. In the RowSelected event, we are updating the detail Grid based on the EmployeeID (primary key) value of the master Grid. Please refer the documentation link and code example below, 

Documentations : https://ej2.syncfusion.com/16.1.37/documentation/grid/api-grid.html?lang=typescript#rowselected 

 

<div> 

    <B>Master Grid</B> 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").SelectedRowIndex(0).Columns(col => 

        { 

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

            ... 

        }).RowSelected("selected").Render() 

</div> 

<div> 

    <B>Child Grid</B> 

    @Html.EJS().Grid("Grid1").DataSource((IEnumerable<object>)ViewBag.dataSource1).Columns(col => 

                { 

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

                    ... 

                }).Render() 

</div> 

<script> 

    function selected(args) { 

        var data = @Html.Raw(Json.Encode(ViewBag.datasource)); 

        var employeeID = args.data.EmployeeID; 

        var detaildata = new ej.data.DataManager(data).executeLocal(new ej.data.Query().where("EmployeeID", "equal", employeeID, false).take(10)); 

        var grid = document.getElementById("Grid1").ej2_instances[0]; 

        grid.dataSource = new ej.data.DataManager(detaildata.slice(0, 5)).dataSource.json; 

    } 

</script> 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran. 

[Tommy Mailhot]

We are using DataManager and CRUD operations but the example help me!

Thank you

[Renjith Singh Rajendran]

Hi Tommy, 

Thanks for the update. 

We are happy to hear that our sample helped you in achieving your requirement. 

Please get back to us if you need further assistance. 

Regards, 

Renjith Singh Rajendran.