Professional Web Applications Themes

Image in header column (not replacing column header text) - ASP.NET Data Grid Control

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...

  1. #1

    Default Image in header column (not replacing column header text)

    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 Guest

  2. #2

    Default Re: Image in header column (not replacing column header text)

    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 (doent.all("txtSort").value) {
    var strTmp = doent.all("txtSort").value;
    var aryTmp = strTmp.split(";");
    doent.all(aryTmp[0].toLowerCase()).innerHTML =
    doent.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 <hansihotmail.com>
    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 Guest

  3. #3

    Default Re: Image in header column (not replacing column header text)

    hansiman <hansihotmail.com> wrote in message news:<t53420pml93sg1tuklm4jjl6pk1u89vho74ax.com>. ..
    > 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
    ([url]http://www.amazon.com/exec/obidos/ASIN/0672325012/4guysfromrollaco[/url]).

    Happy Programming!


    Scott Mitchell
    [email]mitchell4guysfromrolla.com[/email]
    [url]http://www.4GuysFromRolla.com[/url]
    [url]http://www.ASPFAQs.com[/url]
    [url]http://www.ASPMessageboard.com[/url]

    * When you think ASP, think 4GuysFromRolla.com!
    Scott Guest

  4. #4

    Default Re: Image in header column (not replacing column header text)

    :)
    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, [email]pkbapt2go.com[/email] (Scott) wrote:
    >hansiman <hansihotmail.com> wrote in message news:<t53420pml93sg1tuklm4jjl6pk1u89vho74ax.com>. ..
    >> 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
    >([url]http://www.amazon.com/exec/obidos/ASIN/0672325012/4guysfromrollaco[/url]).
    >
    >Happy Programming!
    >
    >
    > Scott Mitchell
    > [email]mitchell4guysfromrolla.com[/email]
    > [url]http://www.4GuysFromRolla.com[/url]
    > [url]http://www.ASPFAQs.com[/url]
    > [url]http://www.ASPMessageboard.com[/url]
    >
    >* When you think ASP, think 4GuysFromRolla.com!
    hansiman Guest

Similar Threads

  1. Header in a template column
    By inquizzitive in forum ASP.NET Data Grid Control
    Replies: 0
    Last Post: May 10th, 08:35 AM
  2. Two column header rows possible?
    By Bill Musgrave in forum ASP.NET Data Grid Control
    Replies: 6
    Last Post: December 23rd, 04:12 PM
  3. Column Header
    By Demetri in forum ASP.NET Data Grid Control
    Replies: 1
    Last Post: April 26th, 04:14 PM
  4. Datagrid wrappable column header text
    By Tim Roop in forum ASP.NET Data Grid Control
    Replies: 1
    Last Post: February 20th, 07:43 PM
  5. DataGrid with image in the Column Header
    By Mark in forum ASP.NET Data Grid Control
    Replies: 1
    Last Post: July 17th, 07:36 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139