[Solved] Changing Location of the Sort Arrow

[Daniel]

When a grid is displayed and sorted by a column the sort arrow appears at the end of the column text. This poses a problem when the grid contains many columns and is being viewed in a small window (or a low resolution) because the sort arrow becomes hidden as the column becomes too small for the column text. I compensated for this by fixing the minimum width of the columns so there is always room for both the column text and the sort arrow.

However, this is not an optimal solution, particularly when it comes to possible localization issues down the line when the column text is changed. Is there anyway to move the location of the sort arrow so that it comes at the beginning of the text? This would make it so the sort arrow would be the last thing to be hidden as the columns shrink. Or better, is there a way to make the sort arrow independent of the column text in the same way that the filter symbol is?

Thanks for any help.

[Dimo]

Hi Daniel,

You can change the positioning of the sort arrow with CSS (see below), however, this will result in a little strange appearance of the header content, because the header text will be indented to the right.

I am afraid there is no way to make the sort arrow independent of the header text, because the icon is rendered inside the header text wrapper.

On the other hand, you can hide the native sort icons with CSS and use custom sort buttons in a Grid header template and use the Grid's client API to initiate sorting.

http://www.telerik.com/help/aspnet-mvc/telerik-ui-components-grid-client-api-and-events.html#ClientMethods

.t-grid-header .t-arrow-up,
.t-grid-header .t-arrow-down
{
    float:left;
    margin-top:-16px;
    margin-left:-14px;
}

.t-grid-header th.t-header .t-link
{
    padding-left:18px;
}

Kind regards,
Dimo
the Telerik team