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. Image for the cookie policy date

Hierarchical Bindings to create Grid with parent and child relation

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

1 Reply

VN Vignesh Natarajan Syncfusion Team May 18, 2017 12:03 PM UTC

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. 
Based on your requirement we have prepared a sample that can be downloadable from the below link. 
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. 
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. 


Loader.
Live Chat Icon For mobile
Up arrow icon