Highlighting selected row's detail item template

[Asif]

I am using Detail Item Template for displaying some extra information on radgrid. I am also using rgSelectedRow css for highlighting selected row. I want to highlight the detail item row for the selected row as well. How can I do this? On the documentation in the following url it is mentioned that "Base row style (rgRow, rgAltRow) is applied according to the parent item’s current style.". But how can I apply some css for selected row's detail item?
http://docs.telerik.com/devtools/aspnet-ajax/controls/grid/rows/detail-item-template#appearance-and-styling

I also want to keep a button for users to toggling between displaying detail item template row and not displaying. For achieving this I set the visibility of DetailTemplateItemDataCell object of GridDataItem on Grid Pre Render event. But if I set the visibility to false then the row border is vanished. How can I fix this two issues? I've attached a screenshot. Please help. Thanks in advance

[Asif]

No one to help? Any suggestions guys?

[Viktor Tachev]

Hi Asif,

Note that the DetailItemTemplate is rendered as a separate row in the generated table. In order to apply the same style to it when the row is selected you can use jQuery. You should handle the OnRowSelecting client-side event and apply the rgSelectedRow CSS class.

function rowSelecting(sender, args) {
    $telerik.$(".rgSelectedRow").each(function () {
        $telerik.$(this).removeClass("rgSelectedRow");
    });

    $telerik.$(args.get_gridDataItem().get_element()).next("tr").addClass("rgSelectedRow");
}

Note that you should ensure that the previously selected row does not have the styles applied.

Regards,
Viktor Tachev
Telerik