Telerik blogs

I've been asked a few times by clients how to customize the web report viewer's skins, so they can better match their company identity. I would try to describe 'the process' in this post.

We are trying to stay close to the approach used for the RadControls for ASP.NET AJAX, so one who has used our web controls would be pleasantly surprised to find two familiar properties in Telerik Reporting - Skin and SkinsPath. As their names suggest, the first one is used to specify the name of the skin, while the second one specifies the path where this skin can be found.

Let's start with creating a folder in your web app/site named Skins, where we would place the skin. I would call that skin 'Orange' for obvisous reason - I am going to use orange colouring for the viewer's toolbar. So I create a folder named Orange into the Skins folder and we set Skin="Orange" and SkinsPath="~/Skins" in the markup:

 

<telerik:ReportViewer ID="ReportViewer1" runat="server" Skin="Orange" SkinsPath="~/Skins" /> 
 

 

I've already have the images that I need created with an image editing program and named appropriately, so that the report viewer would recognize them. The last thing that I'm missing is a stylesheet where we would specify various css attributes to complete the whole picture - it should be named ReportViewer.css.

 So with a little effort we're able to change the viewer's appearance in no time. See how the orange goes with the green ;) You can download the project below. For those of you who would like to totally re-arrange the toolbar, creating a custom toolbar blog post is just for you!

[CustomSkinWebViewer]


About the Author

Stefan Tsokev

Stefan’s main interests outside the .NET domain include rock music, playing the guitar and swimming.

Related Posts

Comments

Comments are disabled in preview mode.