Search code examples
asp.netcssxsltteleriktelerik-reporting

Add hyperlink style to Telerik Report


Question: I need to add the internal style below to a Telerik Report. Please note a0 and a1 are classes.
The style sheet is given below: How do I convert this into an XML style sheet that a telerik report accepts.
Refer to : http://www.telerik.com/help/reporting/style-understanding-style-selectors.html
But the link does not give you detail on how to add a hyperlink selector into an XML style sheet.

CSS below:

a.a0:hover {
        text-decoration: underline;
}
a.a1:link {
text-decoration: underline;
}

Solution

  • Below is how I worked around the above issue:
    ReportViewer.prototype.OnReportLoadedOld = ReportViewer.OnReportLoaded;
                    ReportViewer.prototype.OnReportLoaded = function() {
                        this.OnReportLoadedOld();
    
    var reportFrame = document.getElementById(this.reportFrameID);
                        var reportDocument = reportFrame.contentWindow.document;
                        var body = reportDocument.getElementsByTagName("body")[0];
    
     $(".a1", body).css("text-decoration", "underline");
     $(".a0", body).css("text-decoration", "underline");
    
    You can achive the hover like this:
    
    $(".a1", body).hover(function() {
            $(".a1", body).css("text-decoration", "underline");
          }, function () {
           $(".a1", body).css("text-decoration", "underline");
      });