Hierarchical Bindings to create Grid with parent and child relation

[sanjay]

Hi,

We are trying to use Hierarchical Bindings to create Grid with parent and child relation. We are using remote JSON data and added chilldGrid.queryString as shown below. Web request going out to get data for child grid has oData query in the URL query string. Is it possible to create web request without oData query and just plan query string as below:

 

Here is the default URL for child grid data :http://localhost:2857/Home/ChildData/?$inlinecount=allpages&$filter=tolower(ID)%20eq%20%271%27

We like to change it to :  http://localhost:2857/Home/ChildData/1

 

Second question, it is possible to pass more than one parameter. Something like this :http://localhost:2857/Home/ChildData/1/One

 

Our client side script :

 

var url = '@Url.Content("~/")' + 'Home/MasterData/1';

        var dm = ej.DataManager(url);

        var url2 = '@Url.Content("~/")' + 'Home/ChildData';

        var dm2 = ej.DataManager(url2);

 

        $('#Grid2').ejGrid({

            dataSource: dm,

            columns: ["ID", "Name", "Value"],

            childGrid:

                {

                    dataSource: dm2,

                    queryString: "ID",

                    columns: ["ID", "Name", "Value"]

                }

        });

 

Our server side code (ASP.NET MVC) is below :

 

public JsonResult MasterData(int id)

        {

            List<MasterModel> x = new List<Models.MasterModel>()

            {

                new Models.MasterModel() { ID = "1", Name = "One", Value=$"One_1_{id}" },

                new Models.MasterModel() { ID = "2", Name = "Two", Value=$"Two_2_{id}" },

                new Models.MasterModel() { ID = "3", Name = "Two", Value=$"Two_3_{id}" }

            };

            return new JsonResult() { Data =  new { result = x }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

 

        public JsonResult ChildData(string id)

        {

            List<MasterModel> x = new List<Models.MasterModel>()

            {

                new Models.MasterModel() { ID = "11", Name = "One_One", Value=$"One_One_1_{id}" },

                new Models.MasterModel() { ID = "12", Name = "One_Two", Value=$"One_Two_2_{id}" },

                new Models.MasterModel() { ID = "13", Name = "One_Two", Value=$"One_Two_3_{id}" }

            };

            return new JsonResult() { Data = new { result = x }, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

        }

Please give your suggestions about the above issues.

Thanks,

Sanjay

[Vignesh Natarajan]

Hi Sanjay, 

Thanks for contacting the Syncfusion support. 

Query1:  Is it possible to create web request without OData query and just plan query string 

In your sample, you haven’t mentioned adapter type. By default OData Adapter is set to the Grid datasource.  

var url = '@Url.Content("~/")' + 'Home/MasterData/1'; 

        var dm = ej.DataManager(url); 

        var url2 = '@Url.Content("~/")' + 'Home/ChildData'; 

        var dm2 = ej.DataManager(url2); 

  

        $('#Grid2').ejGrid({ 

            dataSource: dm, 

            columns: ["ID", "Name", "Value"], 

            childGrid: 

                { 

                    dataSource: dm2, 

                    queryString: "ID", 

                    columns: ["ID", "Name", "Value"] 

                } 

        }); 

 

So mention the adapter type as “URLAdaptor” in Adaptor Property of Grid DataSource. Please refer our help documentation for further details. 

Link: https://help.syncfusion.com/aspnetmvc/grid/data-adaptors#url-adaptor     

Based on your requirement we have prepared a sample that can be downloadable from the below link. 

Link: http://www.syncfusion.com/downloads/support/directtrac/130544/ze/SyncfusionMvcApplication131696136684  

In above sample we have used URL adapter to achieve Hierarchical Grid using QueryString. 

Html.EJ().Grid<OrdersView>("FlatGrid") 

    .Datasource(ds => ds.URL(@Url.Action("DataSource")) 

    .Adaptor(AdaptorType.UrlAdaptor)) 

    .AllowPaging() 

    .Columns(col => 

        { 

            col.Field("EmployeeID").HeaderText("Employee ID").IsPrimaryKey(true).TextAlign(TextAlign.Right).Width(75).Add(); 

            col.Field("CustomerID").HeaderText("Customer ID").Width(100).Add(); 

            col.Field("Freight").Width(120).Add(); 

            col.Field("City").Width(100).Add(); 

            col.Field("Country").Width(100).Add(); 

        }) 

     .ChildGrid(child => 

     { 

         child.Datasource(ds => ds.URL(@Url.Action("DataSource")) 

            .Adaptor(AdaptorType.UrlAdaptor)) 

            .QueryString("EmployeeID") 

            .AllowPaging() 

            .Columns(col => 

 

Query2: it is possible to pass more than one parameter. 

Yes. In Grid, we have addParams method. Using this method of ej.Query and “Query” property of Grid, we can pass the additional data to server side. Please refer to the below code example and sample. 

Link: https://help.syncfusion.com/api/js/ejquery#methods:addparams  

Html.EJ().Grid<OrdersView>("FlatGrid") 

    .Datasource(ds => ds.URL(@Url.Action("DataSource")) 

    .Adaptor(AdaptorType.UrlAdaptor)) 

    .Query("new ej.Query().addParams('data', 'Bern')") 

 

Controller page  

 

 

 

Regards, 

 

Vignesh Natarajan.