Naster Detail

[Grant Stephen]

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]

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. 

http://www.syncfusion.com/downloads/support/forum/128709/ze/MvcApp-828482406  

Regards, 

Saravanan A. 

[Grant Stephen]

Thank you for the inf,

all working as required now

Grant

[Saravanan Arunachalam]

Hi Stephen,  

Thanks for your update.            

We are happy that the provided information helped you. 

Regards, 

Saravanan A.