Simple linked grids

[Vanderlei]

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!!!

[Venkatesh Ayothi Raman]

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,  

  

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

  

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/documentation/api/grid/#rowselected  

  

[Index.cshtml]  

  

    <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()  

  

    <B>Detail Grid</B>  

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

                {  

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

                    ...  

                }).Render()  

  

    <script>  

        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  

    }  

</script>  

  

Please let us know if you have any further assistance on this. 

Regards,
Venkatesh Ayothiraman. 

[Vanderlei]

 Hi Ayothiraman,

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

Thanks

[Pavithra Subramaniyam]

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. 

 

[Index.cshtml] 

 

    @Html.EJS().Grid("Grid").AllowPaging().DataSource(dataManager => {dataManager.Url("/Home/UrlDatasource").Adaptor("UrlAdaptor");}).Width("auto").SelectedRowIndex(0).Columns(col => 

{ 

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

. . . . 

}).Toolbar(new List<string>() { "Add", "Edit", "Delete", "Update", "Cancel", "Search" }).RowSelected("selected").Render() 

 

 

[HomeController.cs] 

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); 

        } 

 

 

Documentation: https://ej2.syncfusion.com/aspnetmvc/documentation/grid/edit/#url-adaptor 

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/gridmvclocalization1503662146.zip 

 

Please let us know, if you need further assistance, 

 

Regards, 

Pavithra S.