How to add 2 grids in one view, one grid linked to the other

[ADMIRAL PH]

How to add 2 grids in one view, one grid linked to the other (PK - FK) , with the following details :

1) using Model as datasource

2) using ADO.Net technology in the controller

[Santhosh Iruthayaraj]

Hi ADMIRAL PH,

Greetings from Syncfusion Support.

You can achieve your requirement of displaying records in a Master/Detail relationship by rendering two grids and dynamically updating the Detail Grid's dataSource based on the record selected in the Master Grid. We have prepared a sample that demonstrates this functionality, where the Detail Grid records are loaded dynamically based on the selected record in the Master Grid. This is achieved by binding the “rowSelected” event to the Master Grid, and using the details of the selected record to filter the order data, which is then bound to the Detail Grid. Below is the code snippet and sample implementation:

[Views\Home\Index.cshtml]

 

<div class="grid-container">

    <ejs-grid id="MasterGrid" dataSource="@ViewBag.Customers" selectedRowIndex="1">

        <e-grid-columns> . . . .</e-grid-columns>

    </ejs-grid>

 

    <br />

    <h4>Orders for: <span id="key"></span></h4>

 

    <ejs-grid id="DetailGrid">

        <e-grid-columns> . . . .</e-grid-columns>

    </ejs-grid>

</div>

 

@section Scripts {

    <script>

        var orderData = @Html.Raw(Json.Serialize(orders));

        // Initialize Master Grid and bind rowSelected event

        var masterGrid = document.getElementById("MasterGrid").ej2_instances[0];

        masterGrid.rowSelected = rowSelected;

 

        // Function to update detail records according to the selected row in the master grid

        function rowSelected(args) {

            var selRecord = args.data;

            var detailGrid = document.getElementById("DetailGrid").ej2_instances[0];

            detailGrid.dataSource = orderData

                .filter(function (order) {

                    return order.CustomerName === selRecord.ContactName;

                })

            document.getElementById('key').innerText = selRecord.ContactName;

        }

    </script>

}

 

A sample project with above implementation has been attached for your reference.

If your requirement is to handle all Grid actions on the server side, this can be accomplished using remote data binding with appropriate adaptors. For more information, please refer to the following documentation:

Documentation: Connecting to Adaptors in Syncfusion ASP.NET CORE Grid

Please let us know if you need any further assistance.

Regards,

Santhosh I

Attachment: CoreGridApp_6ac8befb.zip