HeaderText & HeaderImageUrl in TemplateColumn in DataGrid

[rn5a]

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]

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?

[rn5a]

On Mar 12, 9:08 pm, David Longnecker <[e-mail]>
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.

[kikodeco]

On 14 mar, 07:21, [e-mail] wrote:

On Mar 12, 9:08 pm, David Longnecker <[e-mail]>
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"H eaderText="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