Custom Aggregate function inside kendo grid mvc
1 Answer 51 Views
sandy
Top achievements
Rank 1
Veteran
sandy asked on 18 May 2021, 01:14 PM | edited on 18 May 2021, 01:14 PM

Hi,

I have a Kendo Grid with 20columns in that i have 12 columns as months. in one column am getting data like below attached image format (1/0,2/1,3/2).  in ClientFooterTemplate am displaying sum of this column. here i want to apply same logic all 12 months.

below is my code.

columns.Group(group => group.Title("200<hr> Jan").Columns(Jan =>
                        {
                            Jan.Bound(p => p.Jan_A).Width(60).Filterable(false).Editable("function(dataItem) {if (((new Date).getMonth() + 1) <= 1) {return true}else return false;}").ClientFooterTemplate("#=kendo.toString(conditionalSum(), '0,0')#").HtmlAttributes(new { style = "text-align: center;" }).HeaderHtmlAttributes(new { @class = "col-sm-1 col-md-1 col-lg-1 col-xl-1 ", style = "white-space: normal;text-align: center;" }).Title("A / F");
                        }));

below is Javascript code

function conditionalSum() {
        //alert("a")
        var dataSource = $("#Grid").data("kendoGrid").dataSource;
        var filters = dataSource.filter();
        var allData = dataSource.data();
        var query = new kendo.data.Query(allData);
        var data = query.filter(filters).data;

        //var data = dataSource.data();
        var item, Jansum = 0,Febsum=0;
        for (var idx = 0; idx < data.length; idx++) {
            item = data[idx];
            if (item.Jan_A != null) {
                if (item.Jan_A.includes("/") && item.Jan_A.split("/")[0] != "") {
                    Jansum += parseInt(item.Jan_A.split("/")[0]);
                }
            }
            if (item.Feb_A != null) {
                if (item.Feb_A.includes("/") && item.Feb_A.split("/")[0] != "") {
                    Febsum += parseInt(item.Feb_A.split("/")[0]);
                }
            }
        }
        return kendo.toString(Jansum, "0,0");
        
    }

 

this function is working fine for only month. how can i use same function for remaining 11 columns.

1 Answer, 1 is accepted

Sort by
0
Anton Mironov
Telerik team
answered on 21 May 2021, 08:39 AM

Hello Sandy,

Thank you for the code snippet, image, and details provided.

Feel free to correct me if I misunderstood something. If a calculation of custom aggregates is needed, I would recommend using the approach from the following knowledge base article:

I hope this information helps.

 

Kind Regards,
Anton Mironov
Progress Telerik

Тhe web is about to get a bit better! 

The Progress Hack-For-Good Challenge has started. Learn how to enter and make the web a worthier place: https://progress-worthyweb.devpost.com.

sandy
Top achievements
Rank 1
Veteran
commented on 24 May 2021, 02:43 AM

for me am calculating for 12 months columns, the above approch will not suit to my requirement. in 12 months i need to split values and need to sum 1st index values.
Anton Mironov
Telerik team
commented on 26 May 2021, 01:19 PM

Hi Sandy,

In order to achieve the desired behavior, I would recommend creating a custom aggregate and display the needed result in a Footer Template.

Here is an example of the approach:

https://docs.telerik.com/kendo-ui/knowledge-base/grid-custom-aggregate-by-unique-value

I hope this information helps.

Regards,
Anton Mironov

sandy
Top achievements
Rank 1
Veteran
commented on 26 May 2021, 01:48 PM | edited

that example is for single column only. here my requirement is use the same column functionality for remaining 11 columns so. in mentioned example sum is displaying in one place, but my one i need to display column sum in footer of that column only.


below is my footer template html code.

<div class="k-grid-footer" tabindex="-1" style="padding-right: 17px;">
<div class="k-grid-footer-wrap">
<table>
<colgroup>
<col style="width:120px"><col style="width:75px"><col style="width:150px"><col style="width:150px">
<col style="width:60px"><col style="width:60px"><col style="width:60px"><col style="width:60px">
<col style="width:60px"><col style="width:60px"><col style="width:60px"><col style="width:60px">
<col style="width:60px"><col style="width:60px"><col style="width:60px"><col style="width:60px">
<col style="width:60px"><col style="width:70px">
</colgroup>
<tbody>
<tr class="k-footer-template"><td>&nbsp;</td><td>&nbsp;</td><td>&nbsp;</td><td>Monthly Totals are based on the applied filters <br> for all pages/results returned</td><td>10135<hr>0</td><td>7580<hr>0</td><td>9169<hr>0</td><td>8775<hr>0</td><td>8,567</td><td>01</td><td>01</td><td>01</td><td>01</td><td>01</td><td>01</td><td>01</td><td>01</td><td>44,234</td>
</tr>
</tbody>
</table>
</div>
</div>


so by using above example how can i update my values in footer.
Anton Mironov
Telerik team
commented on 31 May 2021, 11:57 AM

Hi Sandy,

The template could be added for all the needed columns as per the needs of your application. Here is an example:
https://dojo.telerik.com/@anton.mironov/ENegikOb

I hope this information helps.

Kind Regards,
Anton Mironov

Tags
Grid
Asked by
sandy
Top achievements
Rank 1
Veteran
Answers by
Anton Mironov
Telerik team
Share this question
or