Dynamically change Stylesheets in Report Designer

[Scott]

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.

[Katia]

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;

           if(report.Contains("SampleReport"))

           {

           //retrieve an instance of the report

            reportInstance = (Report)Activator.CreateInstance(Type.GetType(reportString));

            reportInstance.ExternalStyleSheets.Clear();

 

            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 () {

            $("#reportViewer1")

                .telerik_ReportViewer({        

                    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.

Regards,
Katia
Telerik