Image in header column (not replacing column header text)

H

hansiman

I have a sortable (asc/desc) datagrid and would like to add a small
arrow icon (down/up) next to the column header text to improve the UI.
Is this possible. The examples I've seen all replaces the header text
with an icon.

/morten
 
H

hansiman

OK here is what I did. May be of use to somewhere else (there may be
other ways).

What I wanted: to display a small icon next to the column in a
datagrid indicating sort direction (ASC/DESC).

Requirements: sortable (ASC/DESC) datagrid.

What I did:

Added a <div> tag around the bound column's "Header text" property
(<div id=orderid>Order no.</div>). The id name must be identical to
the value in the "Sort expression" property (OrderID). Not case
sensitive.

Added a Web control Textbox (id=txtSort + visible=False) to the page.
This control will hold the clicked column and the current sort order
(like OrderID;ASC or OrderID;DESC)

Added the following code to the datagrid SortCommand:
txtSort.Text = ViewState("SortField") & ";" &
ViewState("SortDirection")
This puts name of click column and sort order into txtSort control
(OrderID;ASC).

Added two images to solution:
images/asc_arrow.gif
images/desc_arrow.gif

Added a js call to the page (call on every page load):
<script language="javascript">
sortColumnUI()
</script>

Added simple js:
function sortColumnUI() {
if (document.all("txtSort").value) {
var strTmp = document.all("txtSort").value;
var aryTmp = strTmp.split(";");
document.all(aryTmp[0].toLowerCase()).innerHTML =
document.all(aryTmp[0].toLowerCase()).innerHTML +
'<img src="images/' +
aryTmp[1].toLowerCase() +
'_arrow.gif" border=0>';
}
}

This way I got that small arrow next to the column header indicating
current sort order. As I said, there may be other approaches.

/morten
 
S

Scott

hansiman said:
I have a sortable (asc/desc) datagrid and would like to add a small
arrow icon (down/up) next to the column header text to improve the UI.
Is this possible. The examples I've seen all replaces the header text
with an icon.

It's quite possible. You have a couple of options - you can alter the
HeaderText property, adding in the HTML for an up or down arrow, or
you can create images that include the up and down arrow along with
the column header text, and then just alter the HeaderImageUrl
property upon sorting.

I discuss this in my book, ASP.NET Data Web Controls Kick Start
(http://www.amazon.com/exec/obidos/ASIN/0672325012/4guysfromrollaco).

Happy Programming!


Scott Mitchell
(e-mail address removed)
http://www.4GuysFromRolla.com
http://www.ASPFAQs.com
http://www.ASPMessageboard.com

* When you think ASP, think 4GuysFromRolla.com!
 
H

hansiman

:)
Hi Scott
In fact I already picked up a copy of your book. Haven't quite finised
it yet. But so far I happy with it. It's a great inspiration. It was
your example on datagrid sorting that got me started (the "problem
with your example was that the entire header text was replaced with an
image - or did I mis-read).
I wonder what to dive into next.

/morten
 

Ask a Question

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

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Staff online

Members online

Forum statistics

Threads
473,731
Messages
2,569,432
Members
44,832
Latest member
GlennSmall

Latest Threads

Top