Forums Ignite UI for ASP.NET Core
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Andrew Wigglesworth
175
Customize text and bold Summary rows
posted

Hi There,

I'm working with the MVC Helper to render the grid. I've been able to get it to render properly, and show the summary rows on the required columns. I'm looking into how to bold the text on the summary rows though, and i'm not seeing a method to do that.

Specifically, i would like the text to just be the summed value, rather than "Sum = $[TotalValue]" i would like it to just be rendered as

$[TotalValue]. with the $[TotalValue] being bolded.

All i can see in regards to styling the output of the summary function is the RowDisplayText property.

for example: (sums the bill amount column, blanks out the display text)

settings.ColumnSetting().ColumnKey("BillAmount").SummaryOperands(so =>
{
so.SummaryOperand().Type(SummaryFunction.Sum).Active(true).Format("currency").RowDisplayLabel("");
});

I imagine this could be done with a stylesheet value, but i'm not sure which class to apply it to.

Any help would be appreciated.

Thanks

  • 700
    Offline posted

    Hello Andrew,

    Thank you for posting to our community!

    I have been looking into your question and an approach I could suggest is using the resultTemplate option.

    This could look similar to the following:

    features.Summaries().ResultTemplate("{1}").ColumnSettings(settings =>
{
    settings.ColumnSetting().ColumnKey("Salary").SummaryOperands(so =>
    {
        so.SummaryOperand().Type(SummaryFunction.Sum).Active(true).Format("currency");
    });
});

    Additionally, regarding styling the summary result, I believe the ui-iggrid-summaries-footer-text-container default CSS class would be quite helpful. This class is applied to the DOM element in the summary cell which contains text for summary results.

    This could look like the following:

    <style>
    .ui-iggrid-summaries-footer-text-container {
        font-weight: 600;
    }
</style>

    Please test it on your side and let me know if you need any further assistance regarding this matter.

    Sincerely,
    Riva Ivanova
    Software Developer