[Solved] Grid column header doesn't fully right-align

[Dewey]

@{Html.Telerik().Grid<ImportTransaction>(Model.ImportTransactions)
    .Name("grdImportFiles")
    .TableHtmlAttributes(new { id = "grdImportTransactions" })
    .DataKeys(keys => keys.Add(o => o.ID))
    .Columns(columns =>
    {
        columns.Bound(o => o.ID).Hidden();
        columns.Bound(o => o.Date).Width(80).Format("{0:MM/dd/yy}");
        columns.Bound(o => o.Description);
        columns.Bound(o => o.TransactionAmount).Width(100).Title("Amount").Format("{0:c}")
            .HtmlAttributes(new { style = "text-align:right;" })
            .HeaderHtmlAttributes(new { style = "text-align:right;" });
        columns.Bound(o => o.ReferenceNumber).Title("Reference").Width(120);
    })
    .HtmlAttributes(new { style = "width:100%" })
    .Scrollable(scrolling => scrolling.Height(400))
    .Footer(false)
    .Render();
}

Note the TransactionAmount column in the grid.  When I attempt to right-align a column head in my grid, the header text does not justify all the way to the right.  Instead it appears to have about 30px of right-padding.  Does anyone know why it is not aligning properly?

Dewey

[Dimo]

Hi Dewey,

The rightmost part of the header cells is reserved for the filter icons, and by using Firebug one can see that the header text wrappers (.t-link) have a larger right padding. If you are not using filtering, you can override the Grid styling like this:

.t-grid .t-grid-header .t-header .t-link
{
    padding-right: 0.6em;
}

Regards,
Dimo
the Telerik team