Dynamically change Stylesheets in Report Designer

2 posts, 0 answers
  1. Scott
    Scott avatar
    3 posts
    Member since:
    Jan 2016

    Posted 22 Jan Link to this post

    I would like to have 2 external style sheets ("A.xml" & "B.xml" or 1 external style sheet with different Selectors ("A.TableNormal" & "B.TableNormal")

    Is there a way I can pass in a paramter (A / B) and toggle between the external style sheet or pass in "A.xml" or "B.xml" as the parameter and set it in a conditional formatting section? If not, is there a way to change the table style based on a parameter? If parameter1 = A, StyleName=A.TableNormal.

  2. Katia
    Katia avatar
    241 posts

    Posted 26 Jan Link to this post

    Hello Scott,

    Please see Exporting and Reusing Style Sheets help article for information on how to add external stylesheets to your report.

    If you use the HTML5 Viewer, in order to change the report's external stylesheet at run-time, you will need to add a custom resolver for the Reporting REST service. For example:

       //this is a sample RepotsControllerBase implementation, required by the Reporting REST service
      public class ReportsController : ReportsControllerBase
         static ReportServiceConfiguration configurationInstance;
          static ReportsController()
              configurationInstance = new ReportServiceConfiguration
                  HostAppId = "Html5DemoApp",
                  Storage = new FileStorage(),
                  ReportResolver = new MyResolver(),
          public ReportsController()
                this.ReportServiceConfiguration = configurationInstance;
          //custom resolver allowing us to add custom logic for handling reports
        public class MyResolver : IReportResolver
            //this method will be called on each request for report (refresh, navigate to report, sub report, parameters updates)
           //the method will be called 3 times on initial load
           public Telerik.Reporting.ReportSource Resolve(string reportDescription)
                       string[] descriptionValues = reportDescription.Split(';');
                       var reportString = descriptionValues[0];
                       var stylesheetName = descriptionValues[1];

                Report reportInstance =null;
               //retrieve an instance of the report
                reportInstance = (Report)Activator.CreateInstance(Type.GetType(reportString));
                if(stylesheetName = "A")//here you can place logic for recognizing which stylesheet must be loaded
                    reportInstance.ExternalStyleSheets.Add(new Telerik.Reporting.Drawing.ExternalStyleSheet("D:\\A.xml"));
                else if (stylesheetName = "B")
                    reportInstance.ExternalStyleSheets.Add(new Telerik.Reporting.Drawing.ExternalStyleSheet("D:\\B.xml"));
                return new InstanceReportSource { ReportDocument = reportInstance};
            /////////////////test the above by calling a randome report by assembly qualified name
            <script type="text/javascript">
            $(document).ready(function () {
                        serviceUrl: "api/reports/",
                        //ReportSource - report description
                        reportSource: {
                            report: "ReportNamespace.SampleReport, MyProjectAssemblyName;A",
                            // Parameters name value dictionary
                            parameters: { }
                        viewMode: telerikReportViewer.ViewModes.INTERACTIVE,

    Other approaches are to use conditional formatting, where styles are defined locally per report.

    Let us know if you need any additional clarifications.

    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. DevCraft R3 2016 release webinar banner
Back to Top