This is a migrated thread and some comments may be shown as answers.

How to align HeaderText and HeaderTemplate in GridTemplateColumn?

1 Answer 344 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Danny
Top achievements
Rank 1
Danny asked on 29 Oct 2012, 09:34 PM

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>

1 Answer, 1 is accepted

Sort by
0
Princy
Top achievements
Rank 2
answered on 30 Oct 2012, 04:47 AM
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.
Tags
Grid
Asked by
Danny
Top achievements
Rank 1
Answers by
Princy
Top achievements
Rank 2
Share this question
or