We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Simple linked grids

Hi guys,

Using EJ2, VS2017, MVC5, EF6, MySql

I wish that two grids on the same razor page act like linked master/detail grids. Once users select one record in grid 1 results on grid 2 should update to show only related data.
I tried something like bellow but it doesn´t work. Please help me...

        var grid = document.getElementById("Videos").ej2_instances[0];
        var selectedrecords = grid.getSelectedRecords();
        var detailsGrid = document.getElementById("detailsGrid").ej2_instances[0];
        var detailData = new ej.data.Query().where("videoid", "equal", selectedrecords[0].videoid);

        detailsGrid.dataSource = detailData;

I am using URLAdaptor for loading data...

Happy Christmas!!!

3 Replies

VA Venkatesh Ayothi Raman Syncfusion Team December 21, 2018 04:34 AM UTC

Hi Vanderlei, 

Greetings from Syncfusion and merry Christmas. 

Yes, we can render the two grids in same page as well as act like a Master and details Grid by using RowSelected event in Grid. 
Based on your requirement, we have prepared a sample with master-detail Grid which could be downloaded from the link below,  
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 :   
    <B>Master Grid</B>  
    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Width("auto").SelectedRowIndex(0).Columns(col =>  
    <B>Detail Grid</B>  
    @Html.EJS().Grid("Grid1").DataSource((IEnumerable<object>)ViewBag.dataSource2).Columns(col =>  
        function selected(args) {  
            var data = @Html.Raw(Json.Encode(ViewBag.dataSource2))  
            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];  //Get the instance for the detail Grid  
            grid.dataSource = new ej.data.DataManager(detaildata.slice(0, 5)).dataSource.json;   //Set datasource for detail grid  
Please let us know if you have any further assistance on this. 

Venkatesh Ayothiraman. 

VA Vanderlei December 21, 2018 11:25 AM UTC

 Hi Ayothiraman,

I am using urlAdaptor, can I use the same aproach?


PS Pavithra Subramaniyam Syncfusion Team December 24, 2018 12:40 PM UTC

Hi  Vanderlei, 
Yes, you can use the same approach with UrlAdaptor. Based on your query we have modified the Grid data source reference from local data bind to Url adaptor with Master-detail Grid. Please refer the below code example, Documentation and sample link for more information. 
    @Html.EJS().Grid("Grid").AllowPaging().DataSource(dataManager => {dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor");}).Width("auto").SelectedRowIndex(0).Columns(col => 
. . . . 
}).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).RowSelected("selected").Render() 
public ActionResult UrlDatasource(DataManagerRequest dm) 
            var DataSource = OrdersDetails.GetAllRecords().ToList(); 
            int count = OrdersDetails.GetAllRecords().Count();             
            var data = DataSource.Skip(dm.Skip).Take(dm.Take).ToList();             
            return dm.RequiresCounts ? Json(new { result = data, count = count }) : Json(data); 
Please let us know, if you need further assistance, 
Pavithra S. 

Live Chat Icon For mobile
Up arrow icon