Adding default sorting arrows to GridView

[Cineno]

I'm new to Asp.net and I'm currently working with GridViews. I've looked around this site and others and have seen tips for how to add sorting arrows to column headers.

So far I've got arrows to show on a sorted column by doing this:

Set these GridView properties:

SortedAscendingHeaderStyle-CssClass="sortasc"
SortedDescendingHeaderStyle-CssClass="sortdesc"

And my css has this:

th.sortasc a
{
display:block; padding:0 4px 0 15px;
background:url("images/icons/ascArrow.png") no-repeat;
}

th.sortdesc a
{
display:block; padding:0 4px 0 15px;
background:url("images/icons/descArrow.png") no-repeat;
}

This works great to show an image after the user clicks a header and the column sorts.

The issue I'm having now, is that I'd like all columns to show images by default before they're sorted so that users can know that they can click them to sort. Is there a way to accomplish this?

 

[jbenson001]

Yes, the same way you are doing now with CSS. You can use the <HeaderStyle> template.

I usually just color the column headers a different color to indicate they are sortable.

 

[Cineno]

Thanks for the help! It's still not coming up exactly right.

I set the style of HeaderStyle like this:
<HeaderStyle CssClass="HeaderStyle" />

And my css has this:

/*Header and Pager styles*/
.HeaderStyle, .PagerStyle /*Common Styles*/
{
background-image: url(Images/HeaderSoftGrey.jpg);
background-position:center;
background-repeat:repeat-x;
background-color:#1d1d1d;
}

.HeaderStyle th
{
padding: 5px;
color: #ffffff;
background:url("images/icons/navigation-090.png") no-repeat;
}

.HeaderStyle a
{
text-decoration:none;
color:#ffffff;
display:block;
text-align:left;
font-weight:normal;
}

This works to show the arrow on the header when it's not sorted, but the problem now is that when a header is sorted it's showing the sorted arrow and the default arrow because of the css I showed in the first post. Any idea of what I need to change?

 

[jbenson001]

Although you are doing this in ASP.NET, this is really not a .NET question. The experts over in the HTML/CSS forum would be best to help. Just show then any relevant CSS/HTML. The fact that you are doing ASP.NET doesn't matter.

Good luck

http://www.tek-tips.com/threadminder.cfm?pid=215

 

[Cineno]

Ok, thanks for the help!

 

[jbenson001]

Anytime...

 

[jbenson001]

Sorry, I guess I misunderstood your question. You can do this with JavaScript or in the code-behind. I would probably use the ItemDataBound event, look for the header row, and then set the CSS accordingly.

'ItemDataBoundEvent
    Select Case e.Row.RowType
            Case DataControlRowType.Header
               ... code here to set CSS ...
             Case ...
              ...
    End Select