Get the percentage of grouped rows against total rows in Grid

[Neill]

There are only 2 columns in my grid, "Serial Number" and "Stage" and the grid is grouped by "Stage"

I would like to display a summary below each group that displays the percentage make up of each group of rows out of the total rows

Something like this:

Serial Number       Stage

SERIAL-1            Stage 1

SERIAL-2            Stage 1

SERIAL-3            Stage 1

SERIAL-4            Stage 1

SERIAL-5            Stage 1

                              Percentage 50 %

SERIAL-6            Stage 2

SERIAL-7            Stage 2

SERIAL-8            Stage 2

SERIAL-9            Stage 2

SERIAL-10          Stage 2

                              Percentage 50 %

My current code for the grid:

@(Html.EJ().Grid("Grid")

.Datasource((IEnumerable<object>)Model)

.AllowSorting()

.AllowPaging().PageSettings(page => page.PageSize(20)) // Set the number of rows displayed....

.AllowFiltering()

.AllowResizing()

.AllowGrouping().GroupSettings(group => { group.GroupedColumns(col => { col.Add("Stage"); }); })

.EnableAltRow(true)

.IsResponsive()

.SummaryRow(row =>

{

row.ShowTotalSummary(false).SummaryColumns(c =>

{

c.SummaryType(SummaryType.Custom).CustomSummaryValue("percentage")

.DisplayColumn("SerialNumber")

.DataMember("SerialNumber")

.Prefix("Percentage: ")

.Add();

}).Add();

})

.Columns(col =>

{

col.Type("checkbox").Width(5).Add();

col.Field("SerialNumber").HeaderText("Serial Number").Width(60).Add();

col.Field("Stage").HeaderText("Stage").Width(60).Add();

col.Type("hidden").Field("Count").Add();

})

.ClientSideEvents(eve => eve.Create("create").ActionComplete("complete").RowSelecting("rowselect"))

)

I'm not sure how the javascript function has to look to access the number of rows of each group?

Is this possible?

Thanks,

Neill

[Mani Sankar Durai]

Hi Neill, 

We have analyzed your query and we found that you would like to show the percentage summary value based on the grouped rows displayed in the current page when using custom summary. Based on your requirement we have prepared a sample that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134883/ze/EntityCodeFirst787051013 

Please refer the code example 

 

@(Html.EJ().Grid<object>("Grid") 

     .Datasource((IEnumerable<object>)ViewBag.dataSource) 

... 

    .SummaryRow(row => 

    { 

        row.ShowTotalSummary(false).SummaryColumns(c => 

        { 

            c.SummaryType(SummaryType.Custom).CustomSummaryValue("percentage") 

            .DisplayColumn("EmployeeID") 

            .DataMember("EmployeeID") 

            .Prefix("Percentage: ") 

            .Add(); 

        }).Add(); 

    }) 

    .Columns(col => 

    { 

... 

    }) 

    .ClientSideEvents(eve => eve.Create("create").ActionComplete("complete").RowSelecting("rowselect")) 

) 

<script> 

    function percentage(args) { 

        var gridObj = $("#Grid").ejGrid("instance"); 

        for (var i = 0; i < this.model.currentViewData.length; i++) { 

            var itemlength = this.model.currentViewData[i].items.length;  //you can get the current page rows based on the grouped columns using currentViewData 

            var pageSize = this.model.pageSettings.pageSize; 

            var percentage = (itemlength * 100) / pageSize; 

        } 

       return percentage + "%"; 

    } 

   

</script> 

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai. 

[Neill]

Hi there,

Thank you for the reply, but unfortunately it is not displaying the correct percentages.

See screen shot below:

The second group should be 50%

Regards,

Neill

[Mani Sankar Durai]

Hi Neill, 

We have checked your query and based on your requirement we have prepared a sample that can be downloaded from the below link 

Link: http://www.syncfusion.com/downloads/support/forum/134883/ze/EntityCodeFirst919698719 

In this sample we have shown the summary percentage value based on rows shown in a set of grouping.  

Please refer the below code example 

... 

<script> 

        function percentage(summaryCol, jsonData) { 

            var gridObj = $("#Grid").ejGrid("instance"); 

            if (jsonData.length != this.model.dataSource.length) { 

                var obj = ej.DataManager(this.model.currentViewData).executeLocal(new ej.Query().where("key", "equal", jsonData[0].EmployeeID)) 

                var itemlength = obj[0].items.length; //you can get the current page rows based on the grouped columns using currentViewData  

                var pageSize = this.model.pageSettings.pageSize; 

                var percentage = (itemlength * 100) / pageSize; 

            } 

            return percentage + "%"; 

        } 

    </script> 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Neill]

Good day,

This almost works how I would like.

The code provided shows the percentage on each page and by the number of records displayed on the screen.

I would like to only display the percentage only at the end of each group, even if that is on another page, and also the percentage of number of records per group out of the total records.

Regards,

Neill

[Mani Sankar Durai]

Hi Neill, 

We have checked your query and it is not feasible to show the summary values at the end of the each grouped columns. (i.e if the total grouped records contains 23 and each page contains 10. So to show the summary value after the 23^rd record is not feasible). Here the summary values will be shown for each page (view page displayed on the screen). 

 To know the how many records that are displayed at each grouping section we have shown as the caption format.  

Refer the screenshot below 

 

Please let us know if you need further assistance.  

Regards, 

Manisankar Durai. 

[Neill]

OK thanks

[Mani Sankar Durai]

Hi Neill, 

Thanks for the update.  

Please let us know if you need further assistance. 

Regards, 

Manisankar Durai.