Grid with parent and child relation

[Gary Whiteside]

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]

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.  

 

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

 

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.  

 

https://www.syncfusion.com/kb/4300/server-side-api-for-datamanager-operations 

 

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.