Sorting whithout marking sorted column

[Tomasz M.Lipiński]

Hi,

Out-of-the-box marking sorted columns (with special "up" and "down" icons) looks well but requires a lot of space (it is especially significant in the case of a narrow, icons only containing column). I would like to be able to sort columns but without any marking.
First, I've removed images:

div.RadGrid .rgHeader .rgSortDesc
{
  width: 0px;
  height: 1px;
  background-image: none;
}

(the same for rgSortAsc).
It works perfect under IE7 and Opera. But in this case, there is a button added (when the column is sorted in any direction); this button has its caption made of a single space character. It is perfectly invisible under these two browsers but under any other one it still occupies some additional space.
Important: I'm using the "Simple" skin.
Can I do anything to leave the header of the sorted column unchanged?

Best regards
Tomasz

[Daniel]

Hello Tomasz,

Please set the table layout of your MasterTableView to Fixed and then try the same CSS snippet:

div.RadGrid .rgHeader .rgSortDesc,
div.RadGrid .rgHeader .rgSortAsc
{
    background-image: none;
    width: 1px;
}

<MasterTableView TableLayout="Fixed" ...

Let me know whether this helps.

Best regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tomasz M.Lipiński]

Hi,
No, it doesn't work.
I've even added the following rule:

div.RadGrid .rgHeader input[type="button"].rgSortDesc,
div.RadGrid .rgHeader input[type="button"].rgSortAsc
{
  display: none;
}

The "accused" :-) button has vanished but the header's icon has remained shifted. I've done some more investigations and it seems that something else is responsible. The structure of the header is the following:

<th ....>
<input type="image" .... />
&nbsp;
<input type="button" value=" " class="rgSortAsc" .... />
</th>

" " remains as the source of the problem. And it seems to be difficult to remove it (by myself) .... Am I right?

Regards
Tomasz

[Daniel]

Hello Tomasz,

Please download the attached demo and let me know whether it works properly on your end.

Kind regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tomasz M.Lipiński]

Hi,
Your demo works fine but if you put an icon in the header (instead of the text) the grid starts to behave as I've described.
Now I see that I haven't stated clearly that the tested column should be as narrow as possible and contain an icon only in its header (HeaderURL instead of HeaderText).

Regards
Tomasz

[Daniel]

Hello Tomasz,

Thank you for the clarification.

I modified the demo according your requirements.

Regards,
Daniel
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Tomasz M.Lipiński]

Hi,

OK, it works well.
Your solution requires some refinement, of course (in real cases it removes also useful things :-); it seems that it is enough to remove " " literals only). But generally this is what I wanted.

Thank you.

Regards
Tomasz