HeaderText & HeaderImageUrl in TemplateColumn in DataGrid

Discussion in 'ASP .Net' started by rn5a@rediffmail.com, Mar 12, 2007.

  1. Guest

    A DataGrid has the following TemplateColumn:

    <asp:DataGrid ID="dgCart"...OnSortCommand="SortGrid"
    AllowSorting="true"....>
    <Column>
    <asp:TemplateColumn HeaderImageUrl="Images\Up.gif" HeaderText="ID"
    SortExpression="PID">
    <ItemTemplate>
    <asp:Label ID="lblPID" Text=<%# Container.DataItem("PID") %>
    runat="server"/>
    </ItemTemplate>
    </TemplateColumn>
    </Columns>
    </asp:DataGrid>

    It seems the HeaderImageUrl is given precedence over the HeaderText
    since the Header just displays the image & not the text. How do I
    display both HeaderText & HeaderImageUrl together?

    The DataGrid allows sorting & by default, the DataGrid is sorted
    ascendingly on the above column. When a user clicks the header Label
    again, the column gets sorted descendingly....so far so good but I did
    like to change the HeaderImageUrl at the same time so that users can
    easily make out whether a column is sorted ascendingly or
    descendingly.

    Can someone please give me some idea on how do I go about it?
    , Mar 12, 2007
    #1
    1. Advertising

  2. Rather than placing the information as a property of the TemplateColumn,
    try breaking it out:

    <Columns>
    <asp:TemplateColumn>
    <HeaderTemplate>
    <img src="Images\up.gif"><br/>
    <div style="text-align:center; font-weight: bold">ID</div>
    </HeaderTemplate>
    <ItemTemplate>

    ....
    </ItemTemplate>
    ....
    </Columns>


    -dl

    ---
    David Longnecker
    Web Developer
    http://blog.tiredstudent.com

    > A DataGrid has the following TemplateColumn:
    >
    > <asp:DataGrid ID="dgCart"...OnSortCommand="SortGrid"
    > AllowSorting="true"....>
    > <Column>
    > <asp:TemplateColumn HeaderImageUrl="Images\Up.gif" HeaderText="ID"
    > SortExpression="PID">
    > <ItemTemplate>
    > <asp:Label ID="lblPID" Text=<%# Container.DataItem("PID") %>
    > runat="server"/>
    > </ItemTemplate>
    > </TemplateColumn>
    > </Columns>
    > </asp:DataGrid>
    > It seems the HeaderImageUrl is given precedence over the HeaderText
    > since the Header just displays the image & not the text. How do I
    > display both HeaderText & HeaderImageUrl together?
    >
    > The DataGrid allows sorting & by default, the DataGrid is sorted
    > ascendingly on the above column. When a user clicks the header Label
    > again, the column gets sorted descendingly....so far so good but I did
    > like to change the HeaderImageUrl at the same time so that users can
    > easily make out whether a column is sorted ascendingly or
    > descendingly.
    >
    > Can someone please give me some idea on how do I go about it?
    >
    David Longnecker, Mar 12, 2007
    #2
    1. Advertising

  3. Guest

    On Mar 12, 9:08 pm, David Longnecker <>
    wrote:
    > Rather than placing the information as a property of the TemplateColumn,
    > try breaking it out:
    >
    > <Columns>
    > <asp:TemplateColumn>
    > <HeaderTemplate>
    > <img src="Images\up.gif"><br/>
    > <div style="text-align:center; font-weight: bold">ID</div>
    > </HeaderTemplate>
    > <ItemTemplate>
    >
    > ...
    > </ItemTemplate>
    > ...
    > </Columns>
    >
    > -dl
    >
    > ---
    > David Longnecker
    > Web Developerhttp://blog.tiredstudent.com
    >
    >
    >
    > > A DataGrid has the following TemplateColumn:

    >
    > > <asp:DataGrid ID="dgCart"...OnSortCommand="SortGrid"
    > > AllowSorting="true"....>
    > > <Column>
    > > <asp:TemplateColumn HeaderImageUrl="Images\Up.gif" HeaderText="ID"
    > > SortExpression="PID">
    > > <ItemTemplate>
    > > <asp:Label ID="lblPID" Text=<%# Container.DataItem("PID") %>
    > > runat="server"/>
    > > </ItemTemplate>
    > > </TemplateColumn>
    > > </Columns>
    > > </asp:DataGrid>
    > > It seems the HeaderImageUrl is given precedence over the HeaderText
    > > since the Header just displays the image & not the text. How do I
    > > display both HeaderText & HeaderImageUrl together?

    >
    > > The DataGrid allows sorting & by default, the DataGrid is sorted
    > > ascendingly on the above column. When a user clicks the header Label
    > > again, the column gets sorted descendingly....so far so good but I did
    > > like to change the HeaderImageUrl at the same time so that users can
    > > easily make out whether a column is sorted ascendingly or
    > > descendingly.

    >
    > > Can someone please give me some idea on how do I go about it?- Hide quoted text -

    >
    > - Show quoted text -


    Thanks for the solution David but there's a drawback. Note that I have
    set the AllowSorting property of the DataGrid to true but you can't
    use SortExpression while using a TemplateColumn column type with the
    HeaderTemplate property set.

    If I have to do it in the way you have suggested, then I will have to
    use some control (like Button or LinkButton) within the HeaderTemplate
    to make the DataGrid sortable. This has been documented in the .NET
    Framework documentation as well (under the 'Remarks' section in ms-
    help://MS.NETFramework.v20.en/cpref16/html/P_System_Web_UI_WebControls_DataGrid_AllowSorting.htm).

    But then I don't think there is an alternate approach other than using
    a control within the HeaderTemplate in the TemplateColumn column type
    if I want both text as well as image in the headers & at the same time
    render the DataGrid sortable.
    , Mar 14, 2007
    #3
  4. Guest

    On 14 mar, 07:21, wrote:
    > On Mar 12, 9:08 pm, David Longnecker <>
    > wrote:
    >
    >
    >
    >
    >
    > > Rather than placing the information as a property of the TemplateColumn,
    > > try breaking it out:

    >
    > > <Columns>
    > > <asp:TemplateColumn>
    > > <HeaderTemplate>
    > > <img src="Images\up.gif"><br/>
    > > <div style="text-align:center; font-weight: bold">ID</div>
    > > </HeaderTemplate>
    > > <ItemTemplate>

    >
    > > ...
    > > </ItemTemplate>
    > > ...
    > > </Columns>

    >
    > > -dl

    >
    > > ---
    > > David Longnecker
    > > Web Developerhttp://blog.tiredstudent.com

    >
    > > > A DataGrid has the following TemplateColumn:

    >
    > > > <asp:DataGrid ID="dgCart"...OnSortCommand="SortGrid"
    > > > AllowSorting="true"....>
    > > > <Column>
    > > > <asp:TemplateColumnHeaderImageUrl="Images\Up.gif"HeaderText="ID"
    > > > SortExpression="PID">
    > > > <ItemTemplate>
    > > > <asp:Label ID="lblPID" Text=<%# Container.DataItem("PID") %>
    > > > runat="server"/>
    > > > </ItemTemplate>
    > > > </TemplateColumn>
    > > > </Columns>
    > > > </asp:DataGrid>
    > > > It seems theHeaderImageUrlis given precedence over theHeaderText
    > > > since the Header just displays the image & not the text. How do I
    > > > display bothHeaderText&HeaderImageUrltogether?

    >
    > > > The DataGrid allows sorting & by default, the DataGrid is sorted
    > > > ascendingly on the above column. When a user clicks the header Label
    > > > again, the column gets sorted descendingly....so far so good but I did
    > > > like to change theHeaderImageUrlat the same time so that users can
    > > > easily make out whether a column is sorted ascendingly or
    > > > descendingly.

    >
    > > > Can someone please give me some idea on how do I go about it?- Hide quoted text -

    >
    > > - Show quoted text -

    >
    > Thanks for the solution David but there's a drawback. Note that I have
    > set the AllowSorting property of the DataGrid to true but you can't
    > use SortExpression while using a TemplateColumn column type with the
    > HeaderTemplate property set.
    >
    > If I have to do it in the way you have suggested, then I will have to
    > use some control (like Button or LinkButton) within the HeaderTemplate
    > to make the DataGrid sortable. This has been documented in the .NET
    > Framework documentation as well (under the 'Remarks' section in ms-
    > help://MS.NETFramework.v20.en/cpref16/html/P_System_Web_UI_WebControls_Data­Grid_AllowSorting.htm).
    >
    > But then I don't think there is an alternate approach other than using
    > a control within the HeaderTemplate in the TemplateColumn column type
    > if I want both text as well as image in the headers & at the same time
    > render the DataGrid sortable.- Masquer le texte des messages précédents -
    >
    > - Afficher le texte des messages précédents -


    Hi,

    You can add the img tag in the HeaderText property programmatically :
    dgCart.Columns.Item(1).HeaderText = "<img src=""Images\Up.gif""
    border=""0"">" & "ID"

    regards,

    David Fassi
    , Apr 27, 2007
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Mark

    DataGrid HeaderImageUrl

    Mark, Jul 8, 2003, in forum: ASP .Net
    Replies:
    0
    Views:
    846
  2. DotNetJunkies User

    Datagrid HeaderImageUrl - apply alternate text

    DotNetJunkies User, May 19, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    411
    DotNetJunkies User
    May 19, 2004
  3. =?Utf-8?B?TWFubnkgQ2hvaGFu?=

    error setting headerimageurl in asp:TemplateColumn

    =?Utf-8?B?TWFubnkgQ2hvaGFu?=, Oct 31, 2004, in forum: ASP .Net
    Replies:
    1
    Views:
    1,350
    Chris Austin
    Oct 31, 2004
  4. Patrick Olurotimi Ige
    Replies:
    1
    Views:
    571
    Patrick Olurotimi Ige
    Mar 11, 2005
  5. Mombiatch

    HeaderImageUrl and sorting in a datagrid

    Mombiatch, Aug 12, 2004, in forum: ASP .Net Web Controls
    Replies:
    0
    Views:
    113
    Mombiatch
    Aug 12, 2004
Loading...

Share This Page