I have a sortable radgrid. We are using skin="" and styling the grid ourselves. With no skin, there are no arrows or indicators next to the text to tell the user this column is sortable. The text on sortable fields is bold and when you mouse over a "Click here to sort" hint comes up. But I have just been told by my client that this isn't a good enough indicator. They want arrows to tell the user that it's sortable. There currently are no arrows which I'm sure is proper for no skin. However, when the user clicks the sort text, an up or down arrow shows up. I tried adding an image in ItemDataBound and it worked ok but as soon as the user clicks the text I get both my image AND the up/down arrow from the grid. Is there any way to either add both up and down arrows on default state or hide the arrows when sorted so I can add my own image in ItemDataBound?
3 Answers, 1 is accepted
0
Hello,
To achieve you goal you can add an image to the header of the column when the sort order is none. After that you should remove it for the ascending/descending sort orders. You can refer to the attached sample page which demonstrate how this can be achieved. Give it a try and let me know if it works for you.
Regards,
Pavlina
Telerik
To achieve you goal you can add an image to the header of the column when the sort order is none. After that you should remove it for the ascending/descending sort orders. You can refer to the attached sample page which demonstrate how this can be achieved. Give it a try and let me know if it works for you.
Regards,
Pavlina
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.
0
Jeremy
Top achievements
Rank 1
Rank 1
answered on 08 Jan 2015, 08:42 PM
That worked. Thank you.
Is there any way to add the images to the same line as the header text? If I .AddAt index 0 the image shows up above the text. If I .AddAt index 1 it shows up under the text. I would like it either to the left or right.
In the included image, Event Type was .AddAt(1 while Comment was .AddAt(0.
Is there any way to add the images to the same line as the header text? If I .AddAt index 0 the image shows up above the text. If I .AddAt index 1 it shows up under the text. I would like it either to the left or right.
In the included image, Event Type was .AddAt(1 while Comment was .AddAt(0.
0
Hello,
I recommend you use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have. After researching the styles of elements you can add or edit their CSS rules in order to add the images to the same line as the header text.
Regards,
Pavlina
Telerik
I recommend you use web tools like Firebug for Firefox / IE developer tool. Shortcut F12 activates both and with them is very easy to inspect the elements and to see the styles that they have. After researching the styles of elements you can add or edit their CSS rules in order to add the images to the same line as the header text.
Regards,
Pavlina
Telerik
Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.