How to align HeaderText and HeaderTemplate in GridTemplateColumn?

[Danny]

See the following code.  By default, the ImageButton is above the "Region" HeaderText.  How can I place the ImageButton under the "Region" HeaderText?  Note that I want to keep the sorting features when click the "Region" label.

<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-VerticalAlign="Bottom" HeaderStyle-HorizontalAlign="Center" HeaderText="Region" SortExpression="RegionName" UniqueName="RegionName">
  <HeaderTemplate>
    <div style=" margin:0 10px 0 15px;">

      <asp:ImageButton ID="ButtonStartFilter" ImageUrl="../images/placeholder.png" runat="server"/>
    </div>
  </HeaderTemplate>
</telerik:GridTemplateColumn>

[Princy]

Hi,

Please take a look into the following code snippet I tried to place the ImageButton under the HeaderText.

ASPX:

<telerik:GridTemplateColumn AllowFiltering="false" HeaderStyle-HorizontalAlign="Center"
    HeaderStyle-VerticalAlign="Bottom" HeaderText="Region" SortExpression="RegionName"
    UniqueName="RegionName">
    <HeaderTemplate>
        <asp:ImageButton ID="ButtonStartFilter" CssClass="Button" ImageUrl="~/Images/editServerButton.gif"
            runat="server" />
    </HeaderTemplate>
</telerik:GridTemplateColumn>

C#:

protected void RadGrid1_ItemDataBound(object sender, GridItemEventArgs e)
{
  if (e.Item is GridHeaderItem)
    {
        GridHeaderItem ditem = (GridHeaderItem)e.Item;
        LinkButton lbl = (LinkButton)ditem["RegionName"].Controls[3];
        lbl.CssClass = "HeaderText";
    }
}

CSS:

<style type="text/css">
    .Button
    {
        padding-top: 20px !important;
    }
    .HeaderText
    {
        position: absolute !important;
        margin-left: -30px !important;
    }
</style>

Please make changes in the margin values according to your image size.


Thanks,
Princy.