Change alignment of grid column header / footer

2 posts, 1 answers
  1. Erik
    Erik avatar
    15 posts
    Member since:
    Jun 2018

    Posted 31 May 2020 Link to this post


    I have a sub-grid which includes a column with aggregate values (sum).

    columns.Bound(c => c.TotalAmount).Format("{0:C2}").HtmlAttributes(new { style = "text-align: right;" })
        .ClientGroupHeaderColumnTemplate("Sub-Total: \\#=kendo.format('{0:C2}', sum)\\#")
        .ClientFooterTemplate("Total: \\#=kendo.format('{0:C2}', sum)\\#");    


    Cf. screen shot (attached) to see how this displays.

    How can I apply the column right-alignment to the column group header and footer as well?



  2. Answer
    Eyup avatar
    4074 posts

    Posted 03 Jun 2020 Link to this post

    Hi Erik,


    You can achieve this requirement using CSS:

          .k-grouping-row td:last-of-type{
            text-align: right;
          .k-group-footer td:last-of-type{
            text-align: right;
    Here is a live sample for demonstration:

    I hope this will prove helpful.


    Progress Telerik

    Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
    Our thoughts here at Progress are with those affected by the outbreak.
Back to Top