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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Simple linked grids

Thread ID:

Created:

Updated:

Platform:

Replies:

141613 Dec 20,2018 08:54 PM UTC Dec 24,2018 12:40 PM UTC ASP.NET MVC - EJ 2 3
loading
Tags: Grid
Vanderlei
Asked On December 20, 2018 09:03 PM UTC

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 [Syncfusion]
Replied On 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 :   
  
  
[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
Replied On December 21, 2018 11:25 AM UTC

 Hi Ayothiraman,

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

Thanks

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 
 
[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); 
        } 
 
 
 
Please let us know, if you need further assistance, 
 
Regards, 
Pavithra S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;