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.
Unfortunately, activation email could not send to your email. Please try again.

Hierarchical Bindings to create Grid with parent and child relation

Thread ID:

Created:

Updated:

Platform:

Replies:

130534 May 17,2017 06:19 AM May 18,2017 08:03 AM JavaScript 1
loading
Tags: ejGrid
sanjay
Asked On May 17, 2017 06:19 AM

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

Vignesh Natarajan [Syncfusion]
Replied On May 18, 2017 08:03 AM

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. 


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.

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.

;