Adding default sorting arrows to GridView

[Cineno]

Hello, I'm new to CSS and ASP.net and I've been trying to figure out how I can use CSS to show sorting arrows on the headers of my GridView control.

I've been able to get them to show on a sorted column, but I'd like them to show before the user sorts so that the user knows that they're sortable.

Here's what I have so far:

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.

But how can I have all columns show a sorting image before the sort, and then after the sort, have the sorted column show a different image?

Thanks for any help!

 

[ChrisHirst]

forum855 or forum216 are where you should be asking HTML has no scripting functions.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[Cineno]

I asked at the ASP.net board. I was directed over here.

Thanks for the response though, I'll keep trying.

 

[jbenson001]

This is a display(CSS) issue, not scripting, that is why the OP was directed here.

 

[ChrisHirst]

This is a display(CSS) issue, not scripting, that is why the OP was directed here.

Sure but as CSS has absolutely no way of telling in which direction the entries are sorted, the change to the element class names will HAVE to be made serverside as the "sorted" page is served BACK to the client browser.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

Sure but as CSS has absolutely no way of telling in which direction the entries are sorted, the change to the element class names will HAVE to be made serverside as the "sorted" page is served BACK to the client browse

Which it already is. As the OP mentions it works after the user clicks the headings. The real issue is what class do the th have before being sorted/clicked on.

Since the arrow is only being applied to th.sortdesc and th.sortasc I'm assuming the th's have no class or a different class before sorting is applied.

If they have no class defaulting them to a class may solve the issue.

At the end this is in fact a CSS issue so it is placed in the proper forum.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHirst]

If they have no class defaulting them to a class may solve the issue.

But again this is a serverside issue.

The serverside code delivers the HTML with one or the other classname applied, depending on the status of the sort.

CSS has no logic to determine what the sort state is, that logic has to be done serverside, which then delivers the appropriate HTML to the user agent.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

No, the server side logic is already in place to change the class based on the sort.

Defaulting them would be a css issue as in:

<th class='defaultClass'> when creating the html.

Yes it could be done in the server-side logic, but at the end its just applying a CSS class when no sorting is happening.

The question is not about the sorting logic which already works and which would be a server side issue.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHirst]

And if there is no sorting set the SERVER should deliver the HTML with whatever classname is required or prefered as the default!, the server side code is already delivering the HTML code to the user agent, so I fail to see how it is a CSS issue as the OP has already stated that the style rules work when they are delivered

It is a server side code matter of delivering the default state for the column when the page is first requested!

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

The SERVER is already doing all that and the delivery method of the HTML is irrelevant.

This is just a matter of adding a little HTML to get a default class. There's no server side programming required for this, as everything is already in place and working. The OP merely needs to add a class to existing HTML in existing delivery logic.

If I needed to add a border to this it would be a straight HTML deal:

$myContent="<div> This Text Needs a Border</div>";

I would add a class to the div. since there is no server side code modification, this ends up being a straight up CSS/HTML issue. I could be using any number of methods to deliver ths. An echo, a print, heck even Ajax, it doesn't matter. The question is an HTML related question.



----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[Cineno]

I appreciate all of the back and forth over this.

Still trying to figure it out.

 

[vacunita]

Again, you are applying the classes when the headers have been clicked.
Give you th a default class like:

<th class="sortasc">

Obviously based on how the data is returned when not sorted specifically.








----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHirst]

Phil, the HTML is delivered to the useragent by the server having been created by serverside code, so where sould the place be to add a "default classname" to the element?

The HTML does NOT exist until it is created by the server code!!!!

Certainly a ruleset can be created in the style sheet, but the server code will have to deliver the element with that class name inserted into the attribute of element(s) and yes a rule for the element with no class attribute could be set but that may have other implications.

Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum

 

[vacunita]

It does exist. Like my example above the server side code holds the HTML in a variable but its there to be altered; so must any HTML being sent out to the browser whether it be direct or created dynamically by server side code.

Adding a class to the HTML that must exist already involves no server side logic changes. Simply modify the HTML that is being delivered.

----------------------------------
Phil AKA Vacunita
----------------------------------
Ignorance is not necessarily Bliss, case in point:
Unknown has caused an Unknown Error on Unknown and must be shutdown to prevent damage to Unknown.

Web & Tech

 

[ChrisHirst]

Simply modify the HTML that is being delivered.

EXACTLY

Which, in the absence of evidence/information to the contrary and the OP's use of "Grid View" in the question, suggests most strongly that the HTML is being created by a server side process rather than being served from "static files".



Chris.

Indifference will be the downfall of mankind, but who cares?
Time flies like an arrow, however, fruit flies like a banana.
Webmaster Forum