Formatting a Query Group Footer Summary

In an Aware Query you can set a Column to include a Summary which is, say, the Sum of all the values in that Column.

But how do you do that if you want a Summary for a Query Grouping.

Under the Hamburger Menu, you will see Item Grouping where you turn Grouping on and select which columns you want grouped.

You also will see the last column is called Presentation which logically would lead you to believe that you could format the resultant value in the Summary.

You will see that when you select the Column, Aware will place a {Value} in that cell.

So exactly how do you format the Value (notice is is NOT the same name as your attribute)

Ok.  There are two parts to this.

Firstly, we want to style the value.

Suppose we want it to be coloured Blue, be Bold and Aligned to the right.

In a css class file in AwareIM/Custom/CSS/youdomain/yourdomain.css add the following class…

.mysummary{
font-weight: bold;
color: navy;
float: right;
}

Now you can encapsulate the {Value} in a span and you are good…. like so…

<span class=”mysummary”>{Value}</span>

However, the downside here is that regardless of how your attribute is formatted, the resulting number in your Summary will be unformatted…. no thousands comma and no decimal places.

So, how do we get around this.

This is driven by Kendo UI rather than in Aware. So we need to understand what is going on here.

Aware uses {Value} to try and simlify things for you. But the real underlying Kendo is as follows…

#= kendo.toString(sum, ‘n’) #

Notice it shows an operation… sum. This should match the type of Summary that you have selected in Aware. ie Count etc.

‘n’ is the Kendo format character for thousands and 2 decimal places.

So, Aware will automatically replace {Value} with #= kendo.toString(sum, ‘n’) # if it is used.

Now you can combine both the styling and the formatting to configure any way you like…

For example…..

<span class=”mysummary”>#= kendo.toString(sum, ‘n’) # </span>

In the Demo BSV attached I have used inline styles rather than external class reference so you can do it either way you want.