Hierarchical grid summary

[Laura Jordan]

Hi,

I am using the Hierarchical grid and I want to use Summary for 2 columns in my child grid, but it is not working...



Really appreciate the support,

Thanks,
Laura

[Mohammed Farook J]

Hi Laura, 

Thanks for contacting Syncfusion support. 

We have validated your reported issue and screenshot but we are unable to reproduce this issue.  Could you please find the code example and sample for your reference. 

Code example 

<div class="control-section"> 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

 

    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); 

    col.Field("FirstName").HeaderText("First Name").Width("150").Add(); 

    col.Field("Title").HeaderText("Title").Width("150").Add(); 

 

}).Load("load").AllowPaging().Render() 

</div> 

 

<script> 

    function load(args) { 

 

        var grid = document.getElementById('Grid').ej2_instances[0] 

        grid.childGrid = { 

            dataSource: window.data, 

            queryString: 'EmployeeID', 

            allowPaging: true, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

                { field: 'CustomerID', headerText: 'Ship City', width: 120 }, 

                { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format: 'C2', width: 120 }, 

                { field: 'Price', headerText: 'Price', textAlign: 'Right', width: 150, format: 'C2' } 

            ], 

            aggregates: [{ 

                columns: [{ 

                    type: 'Sum', 

                    field: 'Freight', 

                    format: 'C2', 

                    footerTemplate: 'Sum: ${Sum}' 

                }] 

            }, 

            { 

                columns: [{ 

                    type: 'Sum', 

                    field: 'Price', 

                    format: 'C2', 

                    footerTemplate: 'Sum: ${Sum}' 

                }] 

            }] 

        } 

    } 

</script> 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication20-1954222331.zip  

Screen shot :  

 

Still if you have faced any issue , please share following details, it helps to find the solution at earlier. 

• Please share the Grid code example or sample if it is possible
• Please share the version of Essential JS 2

Regards, 

J Mohammed Farook 

 

[Laura Jordan]

Hi Laura, 

Thanks for contacting Syncfusion support. 

We have validated your reported issue and screenshot but we are unable to reproduce this issue.  Could you please find the code example and sample for your reference. 

Code example 

<div class="control-section"> 

    @Html.EJS().Grid("Grid").DataSource((IEnumerable<object>)ViewBag.dataSource).Columns(col => 

{ 

 

    col.Field("EmployeeID").HeaderText("Employee ID").TextAlign(Syncfusion.EJ2.Grids.TextAlign.Right).Width("120").Add(); 

    col.Field("FirstName").HeaderText("First Name").Width("150").Add(); 

    col.Field("Title").HeaderText("Title").Width("150").Add(); 

 

}).Load("load").AllowPaging().Render() 

</div> 

 

<script> 

    function load(args) { 

 

        var grid = document.getElementById('Grid').ej2_instances[0] 

        grid.childGrid = { 

            dataSource: window.data, 

            queryString: 'EmployeeID', 

            allowPaging: true, 

            columns: [ 

                { field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 }, 

                { field: 'CustomerID', headerText: 'Ship City', width: 120 }, 

                { field: 'Freight', headerText: 'Freight', textAlign: 'Right', format: 'C2', width: 120 }, 

                { field: 'Price', headerText: 'Price', textAlign: 'Right', width: 150, format: 'C2' } 

            ], 

            aggregates: [{ 

                columns: [{ 

                    type: 'Sum', 

                    field: 'Freight', 

                    format: 'C2', 

                    footerTemplate: 'Sum: ${Sum}' 

                }] 

            }, 

            { 

                columns: [{ 

                    type: 'Sum', 

                    field: 'Price', 

                    format: 'C2', 

                    footerTemplate: 'Sum: ${Sum}' 

                }] 

            }] 

        } 

    } 

</script> 

Sample : http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApplication20-1954222331.zip  

Screen shot :  

 

Still if you have faced any issue , please share following details, it helps to find the solution at earlier. 

• Please share the Grid code example or sample if it is possible
• Please share the version of Essential JS 2

Regards, 

J Mohammed Farook 

 

Hi Mohammed,

Thanks for the reply, but I am looking for a child grid summary (the most internal one of the Grid).

There is a way to achieve that? I attach my code file and the following screen as a reference.

Really appreciate the support,

Best regards

Attachment: code_ed3814cb.rar

[Thavasianand Sankaranarayanan]

Hi Laura, 

We have analyzed your query and found that you want to perform summary for the grid while using URLAdaptor. To show the summary for the columns in grid while using URLAdaptor we have to perform Aggregates in server side. But in your given code example you have not handling any Aggregates in your server end. This is the root cause of your issue. 

 

So, we suggest you to add the below code example in your sample. 

 

 

public ActionResult DataSource2(DataManager ds) 

        { 

            IEnumerable DataSource = new NorthwindDataContext().OrdersViews.ToList(); 

            DataResult result = new DataResult(); 

            DataOperations operation = new DataOperations(); 

            result.result = DataSource; 

 

            // need to add this line for handling server side aggregates 

            List<string> str = new List<string>(); 

            if (ds.Aggregates != null) 

            { 

                for (var i = 0; i < ds.Aggregates.Count; i++) 

                    str.Add(ds.Aggregates[i].Field); 

                result.aggregate = operation.PerformSelect(DataSource, str); 

            } 

 

            result.count = result.result.AsQueryable().Count(); 

            if (ds.Skip > 0) 

                result.result = operation.PerformSkip(result.result, ds.Skip); 

            if (ds.Take > 0) 

                result.result = operation.PerformTake(result.result, ds.Take); 

            return Json(result, JsonRequestBehavior.AllowGet); 

        } 

 

public class DataResult 

        { 

            public IEnumerable result { get; set; } 

            public int count { get; set; } 

            public IEnumerable aggregate { get; set; } 

            public IEnumerable groupDs { get; set; } 

        } 

 

  

We have prepared a sample and it can be downloadable from the below location. 

 

Sample: https://www.syncfusion.com/downloads/support/forum/138510/ze/SyncfusionMvcApplication121-312036502.zip 

Refer the help documentation. 

Link: https://help.syncfusion.com/aspnetmvc/grid/summary#handling-aggregation-in-server-side 

Link: https://help.syncfusion.com/aspnetmvc/grid/summary 

Regards, 

Thavasianand S. 

[Laura Jordan]

Hi Thavasianand,

It works perfect! Thanks a lot.

Best regards,

Laura Jordan

[Sathyanarayanamoorthy Eswararao]

Hi Laura, 

We are happy to hear that your issue has been resolved. 

If you need any further assistance please get back to us. 

Regards, 

Sathyanarayanamoorthy