Image in header column (not replacing column header text)

Discussion in 'ASP .Net Datagrid Control' started by hansiman, Feb 5, 2004.

  1. hansiman

    hansiman Guest

    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
    hansiman, Feb 5, 2004
    #1
    1. Advertising

  2. hansiman

    hansiman Guest

    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

    On Thu, 05 Feb 2004 10:32:54 +0100, hansiman <>
    wrote:

    >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
    hansiman, Feb 6, 2004
    #2
    1. Advertising

  3. hansiman

    Scott Guest

    hansiman <> wrote in message news:<>...
    > 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

    http://www.4GuysFromRolla.com
    http://www.ASPFAQs.com
    http://www.ASPMessageboard.com

    * When you think ASP, think 4GuysFromRolla.com!
    Scott, Feb 6, 2004
    #3
  4. hansiman

    hansiman Guest

    :)
    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

    On 6 Feb 2004 10:18:55 -0800, (Scott) wrote:

    >hansiman <> wrote in message news:<>...
    >> 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
    >
    > http://www.4GuysFromRolla.com
    > http://www.ASPFAQs.com
    > http://www.ASPMessageboard.com
    >
    >* When you think ASP, think 4GuysFromRolla.com!
    hansiman, Feb 7, 2004
    #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. Brown Smith
    Replies:
    1
    Views:
    490
    Frankie
    Jun 25, 2005
  2. mlt
    Replies:
    2
    Views:
    815
    Jean-Marc Bourguet
    Jan 31, 2009
  3. datagrid having row header and column header

    , Jul 13, 2006, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    168
  4. Teej
    Replies:
    2
    Views:
    293
  5. Rob Meade

    Replacing - and not Replacing...

    Rob Meade, Apr 5, 2005, in forum: ASP General
    Replies:
    5
    Views:
    259
    Chris Hohmann
    Apr 11, 2005
Loading...

Share This Page