ReportViewer skin

[Bader]

Hello,

I need your help in creating a custom skin for a ReportViewer.
Please refer to http://www.telerik.com/community/code-library/reporting/general/applying-custom-skin-to-the-web-report-viewer.aspx in order to view the sample application for creating a custom skin.
I downloaded the skins and used them in my website, but unfortunatily there are two problems (Please view the attached screen-shot):
1) the export combobox is displayed in the top (Must be in the middle of the toolbar).
2) The datetime picker is not styled.

Please I need your help in order to handle the above two issues.
It is appreciated to send me the modified code.

Regards,
Bader

[Steve]

Hi Bader,

The DatePicker is part of the report parameters area which is a separate iframe i.e. in short it cannot be styled. The referenced code library would only be applied to the ToolBar of the viewer. Secondly the screenshot does not show the normal view of the report viewer i.e. you have either zoomed in from the browser or changed the css and images used.

Please stick to the runnable example given in the thread, which works correctly and change the colors or images respecting the image dimensions and css rules in the viewer stylesheet.

Regards,
Steve
the Telerik team

[Bader]

Hello,

Thank you for your reply.
I tried again to use the code in the sample project, but unfortunately I still recieve a non-required results (Please view the attached screan-shot).
Note: I'm using the build 3.2.9.1211 in this application and I'm running the application under IE9.

Here is my code:

<%@ Page Title="OU - Generate Reports" Language="C#" MasterPageFile="~/Common/MasterPages/DefaultMasterPage.master" AutoEventWireup="true" CodeFile="GenerateReports.aspx.cs" Inherits="QtNS.OU_Tasks_GenerateReports" %>
<%@ Register Assembly="Telerik.ReportViewer.WebForms, Version=3.2.9.1211, Culture=neutral, PublicKeyToken=A9D7983DFCC261BE"
             Namespace="Telerik.ReportViewer.WebForms" TagPrefix="telerik"  %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<style type="text/css">
      html#html, body#body, form#form1, center#center1
      {
       height: 100%;
      }
</style>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
 <asp:Panel ID="GenerateReportsPanel" runat="server" HorizontalAlign="Left" style="margin:10px;" Width="795px">
     <asp:Panel ID="HeaderLabelPanel" HorizontalAlign="Left" Width="100%" runat="server">
        <asp:Label ID="HeaderLabel" runat="server" SkinID="HeaderText" Text="Generate Reports" ></asp:Label>
    </asp:Panel><br />

    <asp:Label ID="SelectReportLabel" runat="server" Text="Please selct the required report."></asp:Label><br /><br />

    <asp:SqlDataSource ID="ReportsSqlDataSource" runat="server"
         ConnectionString="<%$ ConnectionStrings:QTConnectionString %>"
         SelectCommand="SELECT * FROM [C_Reports]"></asp:SqlDataSource>
    <telerik:RadComboBox ID="ReportsRadComboBox" DataSourceID="ReportsSqlDataSource" DataTextField="Name" DataValueField="Value" AutoPostBack="true"
                         OnSelectedIndexChanged="ReportsRadComboBox_SelectedIndexChanged" runat="server" Width="215px">
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation>
    </telerik:RadComboBox><br /><br />

    <telerik:ReportViewer runat="server" ID="ReportViewer" Width="100%" Height="700px" Visible="false"
                          ZoomMode="Percent" Skin="Custom" SkinsPath="~/Common/Reports/Skins" ZoomPercent="75" BorderStyle="None" >
    </telerik:ReportViewer>
 </asp:Panel>
</asp:Content>

In reference to the style of the datepicker, I have to give it a modern style, I can't keep like this.

Please, I need your help in order to solve the above two issues.
It is apprecited to send me a modified code with an explaination.

Regards,
Bader

[Steve]

Hi Bader,

Our suggestion to track down the problem with the skin is to use the project from the code library. It works correctly and you can start modifying it according to your needs step by step, this way you would identify which of your changes causes the problem with the skin.
As for the Calendar - its styles cannot be changed. If this is important for you, then consider using your own UI to handle the report parameters. To do this, first hide (Visible=false) the report parameters and then wire up your UI to them through the Report API e.g.:

Telerik.Reporting.Report report = (Telerik.Reporting.Report)this.ReportViewer1.Report;
report.ReportParameters["MyParam"].Value = RadDatePicker1.SelectedDate;

Kind regards,
Steve
the Telerik team