Conditional Aggregates in WijGrid

WijGrid allows you to display aggregate values at group level as demonstrated in the following demo sample. These aggregate values can be displayed either in the group header or group footer or in both the places by setting the position option in GroupInfo. This blog discusses how you can restrict the aggregate value to be displayed either in the group header or group footer. The value would be displayed in the group header, when the group is in collapsed state and the value would be displayed in the group footer when the group is in expanded state. Firstly, we would need to capture whether the user expanded or collapsed the group and accordingly we can display or clear the the text in the groupheader row. Here is the code:

var aggrearr = [];  
var idarr = [];  
var cols = $(“#dataGrid”).wijgrid(“option”, “columns”);  
var gi = cols[0].groupInfo;  
if (gi.outlineMode == “startExpanded”) {  
    var arr = $(“.wijmo-wijgrid-groupheaderrow”);  
    $(arr).each(function (e, args) {  
        idarr.push($(this).attr(‘ID’));  
        $(this).find(“.wijdata-type-number”).each(function (e, data) {  
            aggrearr.push($(this).text());  
            $(this).text(“”);  
        });  
    });  
}  
else if (gi.outlineMode == “startCollapsed”) {  
    var arr = $(“.wijmo-wijgrid-groupheaderrow”);  
    $(arr).each(function (e, args) {  
        idarr.push($(this).attr(‘ID’));  
        $(this).find(“.wijdata-type-number”).each(function (e, data) {  
            aggrearr.push($(this).text());  
        });  
    });  
}  
$(“.wijmo-wijgrid-grouptogglebtn”).click(function (e, args) {  
    var text;  
    if ($(this).hasClass(“ui-icon-triangle-1-se”)) {  
        var row = $(this).closest(“tr”);  
        $(row).find(“.wijdata-type-number”).each(function (e, data) {  
            var i = jQuery.inArray($(row).attr(‘id’), idarr, 0);  
            $(this).text(aggrearr[i]);  
        });  
    }  
    else {  
        var row = $(this).closest(“tr”);  
        $(row).find(“.wijdata-type-number”).each(function (e, data) {  
            $(this).text(“”);  
        });  
    }  
});

Refer to the following sample for complete implementation.