[Solved] Change hyperlink text colour on mover over

[Baal]

I have a RadGrid with multiple columns. One of the columns is a GridTemplateColumn. It has a asp hyperlink control inside of it.

My ClientSetting for the grid is to enable RowHover and AllowRowSelect. When mouse is over a row, the background changes to dark gray and the text of the entire row changes to white, except the hyperlink text. Is there anyway I can change the hyperlink text as well to to white. Same thing with RowSelect as well.

 If there's no build-in feature to do this, is there any client-side way to do it? I don't want to do it in the server side.

Thanks.

[Shinu]

Hi Baal,

Here is the code for setting style for hyperlink when mouseover the row from client side.

javascript:

    function OnRowMouseOver(sender, eventArgs) {
        var masterTable = sender.get_masterTableView();
        for (var i = 0; i < masterTable.get_dataItems().length; i++) {
            var gridItemElement = masterTable.get_dataItems()[i].findElement("HL");
            if (gridItemElement != null) {
                gridItemElement.style.color = 'black';
            }
        }
        var row = eventArgs.get_gridDataItem();
        var hl = row.findElement("HL");
        hl.style.color = 'white';
    }

In the same way, you can access the hyperlink and set the required style in rowselected event handler.

-Shinu.

[Baal]

Thanks Shinu but the code does not work for me.

In the for loop, the gridItemElement is always null, and outside the loop, hl is also null.

I am using Telerik 2009Q3.

Thanks.

[Shinu]

Hello Baal,

The get_gridDataItem() is not directly available on the client unless OnRowCreating/OnRowCreated events are hooked up. Could you try adding OnRowCreated() and OnGridCreated() events and see whether that make any difference?

-Shinu.

[Dimo]

Hello Baal,

HyperLinks and LinkButton controls (rendered as <a> HTML elements) do not inherit color styles from parents, that's why they need them set directly, either with an inline style, or via external CSS.

Using external CSS in your case is a lot easier, as it does not require any sctripting:


div.RadGrid_SkinName  .rgRow  a,
div.RadGrid_SkinName  .rgAltRow  a
{
        color: blue ;  /* normal row state */
}

div.RadGrid_SkinName  .rgHoveredRow  a
{
        color: red ;  /* hovered row state */
}

div.RadGrid_SkinName  .rgSelectedRow  a
{
        color: green ;  /* selected row state */
}


Note that the order of the CSS rules matters. In addition, the above external CSS rules will work if you don't have inline color styles for the hyperlinks.


Regards,
Dimo
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.

[Baal]

Thanks Dimo. Your approach works perfectly.