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

Naster Detail

Thread ID:

Created:

Updated:

Platform:

Replies:

128709 Feb 7,2017 10:19 AM UTC Feb 9,2017 04:05 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Grant Stephen
Asked On February 7, 2017 10:19 AM UTC

looking for advice on how to point to ActionResult using ej.datamanager

Controller:
 public ActionResult Index()
        {
            var fixtureHeaders = db.FixtureHeaders.Include(f => f.Group).Include(f => f.League).Include(f => f.User).Include(f => f.User1)
                .Select(f => new
                {
                    FixtureId = f.FixtureID,
                    FixtureDate = f.FixtureDate,
                    LeagueName = f.League.LeagueName,
                    GroupName= f.Group.GroupName
                });
            ViewBag.datasource = fixtureHeaders.ToList();


            var fixtureLists = db.FixtureLists.Include(f => f.FixtureHeader).Include(f => f.Status).Include(f => f.Team).Include(f => f.Team1).Where(fl=>fl.FixtureHeaderId==1)
                .Select(fl => new
                {
                    FixtureListId = fl.FixtureListId,
                    FixtureHeaderId = fl.FixtureHeaderId,
                    HomeTeam = fl.Team.TeamName,
                    AwayTeam=fl.Team1.TeamName,
                   
                });

            ViewBag.datasource2 = fixtureLists.ToList();



            return View();
        }

View:

<div class="col-md-4">
    Fixtures 
    @(Html.EJ().Grid<object>("fixtures")
    .Datasource((IEnumerable<object>)ViewBag.datasource)
    .IsResponsive()
    .SelectedRowIndex(0)
    .Columns(col =>
    {
        col.Field("FixtureId").IsPrimaryKey(true).HeaderText("ID").Width(50).Add();
        col.Field("FixtureDate").HeaderText("Date").Width(100).Format("{0:dd/MM/yyyy}").Add();
        col.Field("LeagueName").HeaderText("League").Add();
    })
     .ClientSideEvents(eve => { eve.RowSelected("rowSelected"); })
    )



</div>

<div class="col-md-8">
    Games

    @(Html.EJ().Grid<object>("fixturelist")
    .Datasource((IEnumerable<object>)ViewBag.datasource2)
    .IsResponsive()
    .AllowGrouping(false)
    .Columns(col =>
    {
        col.Field("FixtureListId").IsPrimaryKey(true).HeaderText("ID").Width(50).Add();
        col.Field("FixtureHeaderId").Add();
        col.Field("HomeTeam").HeaderText("Home").Width(60).Add();
        col.Field("AwayTeam").HeaderText("Away").Width(80).Add();
    })

    )


  
</div>

@section Scripts{
   <script type="text/javascript">
        $(function () {
            window.rowSelected = function (args) {
                debugger;
                var fixtureheaderid = args.data.FixtureId
                var detaildata = ej.DataManager({url: "/Fixture/index"}).executeLocal(ej.Query().where("FixtureHeaderId", ej.FilterOperators.equal, fixtureheaderid, false).take(10));
                var gridObj = $("#fixturelist").ejGrid("instance");
                gridObj.dataSource(ej.DataManager(detaildata.slice(0, 5)));
            }
        });
    </script>
  
}

Grant



Saravanan Arunachalam [Syncfusion]
Replied On February 8, 2017 06:06 AM UTC

Hi Stephen, 
Thanks for contacting Syncfusion’s support. 
We understood from your query, you need to get the data from server for detail Grid when select the rows of master Grid control.  
We have achieved this requirement by using the UrlAdaptor to bind the remote data to the Grid control and query property which is used to update the query based on the selected rows of master Grid. When select the row from master Grid, we have updated the query property of details Grid via setModel based on the selected row value of master Grid and then refresh the Grid with new query by using refreshContent method of Grid. Please refer to the below code example. 
@(Html.EJ().Grid<object>("MasterGrid") 
         . . . 
        .ClientSideEvents(eve => { eve.RowSelected("rowSelected"); }) 
) 
@(Html.EJ().Grid<object>("DetailGrid") 
        //UrlAdaptor to bind the remote data 
        .Datasource(ds=> ds.URL("/Home/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 
        .Query("new ej.Query().take(5)") //default query 
         . . .         
) 
$(function () { 
             window.rowSelected = function (args) { 
                var employeeID = args.data.EmployeeID; 
                //Update the query via setModel 
                $("#DetailGrid").ejGrid("model.query",new ej.Query().where("EmployeeID", ej.FilterOperators.equal, employeeID, false).take(5)); 
                $("#DetailGrid").ejGrid("refreshContent"); //Refresh the Grid with new queries 
            } 
       }); 
 
We have also created a sample that can be downloaded from the below link. 
Regards, 
Saravanan A. 


Grant Stephen
Replied On February 8, 2017 02:33 PM UTC

Thank you for the inf,
all working as required now

Grant

Saravanan Arunachalam [Syncfusion]
Replied On February 9, 2017 04:05 AM UTC

Hi Stephen,  
Thanks for your update.            
We are happy that the provided information helped you. 
Regards, 
Saravanan A. 


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.

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

;