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.
Syncfusion Feedback

Grid with parent and child relation

Thread ID:

Created:

Updated:

Platform:

Replies:

130487 May 15,2017 04:51 PM UTC May 16,2017 12:10 PM UTC ASP.NET Core 1
loading
Tags: Grid
Gary Whiteside
Asked On May 15, 2017 04:51 PM UTC

Ive a grid with a parent child relationship on a search form, Ive got it working with the following code


@{Html.EJ().Grid<object>("Grid1")
                                                        .Datasource(ds => ds.Json((IEnumerable<object>)ViewBag.dataSource1)
                                                        .Adaptor(AdaptorType.JsonAdaptor))
                                                        .AllowPaging()
                                                        .PageSettings(page => { page.PageSize(50); page.EnableQueryString(true); })
                                                      
                                                        .Columns(col =>
                                                        {
                                                            col.Field("Field1").HeaderText("Field 1").IsPrimaryKey(true).Add();
                                                            col.Field("Field2").HeaderText("Field 2").Add();
                                                            col.Field("Field3").HeaderText("Field 3").Add();
                                                            col.Field("Field4").HeaderText("Field 4").Add();
                                                            col.Field("Field5").HeaderText("Field 5").Add();
                                                        })

                                                        .ChildGrid(child =>
                                                        {
                                                            child
                                                              /.Datasource((IEnumerable<object>)ViewBag.dataSource2)
                                                              .QueryString("Field1")
                                                            
                                                             .Columns(col =>
                                                             {
                                                                 col.Field("Field A").HeaderText("Field A").Add();
                                                             });

                                                        })

                                                        .Render();

            }


This works but when I return a large number of records, for example over 7000, it takes a long time for the grid to load on the page, is there an easy way to bind the childgrid data source dynamically on the click of the expander button? Ive looked at some of the examples on the forum but Im no further on.

Thanks

Gary



Seeni Sakthi Kumar Seeni Raj [Syncfusion]
Replied On May 16, 2017 12:10 PM UTC

Hi Gary,  
We could see you would like to bind large number of records. Grid provides an option to handle the larger number of records using the remote service with loadondemand concept. This concept can be achieved using the URLAdaptor (Ajax Handler) of the DataManager. It is helpful to bind the retrieve the data from the controller. Refer to the following Help Document.  
 
 
To perform various data operations like filtering, sorting and paging at the server end, DataManager provides DataOperations class from the Syncfusion.EJ libraries. Refer to the following KB for various supporting Data Operaions.  
 
 
Using these, we will retrieve the query string in the server-end and based on that data can be filtered. Refer to the following code example and output. 
 
<div id="Grid"></div> 
<script type="text/javascript"> 
    $(function () { 
        var gridData = @Html.Raw(Json.Encode(Model)); 
        var dataManger = ej.DataManager({ 
            url: "/Home/DataSource", 
            adaptor: new ej.UrlAdaptor() 
        }); 
        $("#Grid").ejGrid({ 
            dataSource: gridData, 
              .. . 
                     . . . 
            childGrid: { 
                dataSource: dataManger, 
                allowPaging: true, 
                pageSettings: { 
                    pageSize: 5 
                }, 
                queryString: "EmployeeID", 
                       .. . 
                            . .. 
            }, 
 
        }); 
    }); 
</script> 
 
@{Html.EJ().Grid<object>("HierarchyGrid") 
        .Columns(col => 
        { 
            col.Field("EmployeeID").IsPrimaryKey(true).Add(); 
        }) 
        .ChildGrid(child => 
        { 
            .QueryString("EmployeeID") 
            .Datasource(ds => ds.URL("/Home/DataSource").Adaptor(AdaptorType.UrlAdaptor)) 
               .  . 
                    . .  
        }).Render(); 
} 
 
 
 
        public ActionResult DataSource(Syncfusion.JavaScript.DataManager dm) 
        { 
            IEnumerable datasource = new NorthwindDataContext().OrdersViews.ToList(); 
            DataOperations operation = new DataOperations(); 
            if (dm.Where != null) 
            { 
                datasource = operation.PerformWhereFilter(datasource, dm.Where, dm.Where[0].Condition); 
            } 
            int count = datasource.AsQueryable().Count(); ; 
            if (dm.Skip >= 0)//for paging 
                datasource = operation.PerformSkip(datasource, dm.Skip); 
            if (dm.Take > 0)//for paging 
                datasource = operation.PerformTake(datasource, dm.Take); 
            return Json(new { result = datasource, count = count }, JsonRequestBehavior.AllowGet); 
        } 
 
Please make a note that the resultant object of the URL Action method must be wrapped with the text/value pair as shown in the code example. 
 
 
 
 
 
Regards,  
Seeni Sakthi Kumar S. 


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

;