Custom theme

[Jon]

As it appears that we still don't have matching themes between the Web Viewer and the normal Telerik AJAX controls I am trying to setup my own theme so that there is some consistancy between my main app and the report viewer.  Sorry to sound negative but this is something that should have been added ages ago.

I am having issues.  I put the skin with css and images into a folder called /Styles/ReportViewer/Black now in the code I set the following:
reportviewer.Skin = "Black"
reportviewer.SkinsPath = "/Styles/ReportViewer"

The initial view of the page works but this is before any filter criteria are set and the report viewer doesn't have any data.  If I then hit my Search button and perform an ajax call I see the images in the viere toolbar change to those from the Office2007Blue set.  Interestingly the black background for the toolbar stays but the icons change.

I've tried this with a ~ at the front of the SkinsPath but this time the initial view doesn't work.

I've been using the code from the http://www.telerik.com/community/code-library/reporting/general/applying-custom-skin-to-the-web-report-viewer.aspx example and that doesn't seem to help at all...  Any pointers or has something changed that I'm missing.  I'm using the 2010 Q1 release.

Regards,

Jon

[Jon]

Also when this does work is there a way to change the name of the icons used?  I want to use PNG files rather than GIFs because of their lack of alpha transparency...

Regards,

Jon

[Jon]

OK so I have looked at the sourcecode and sadly none the wiser but I have also used process monitor to look at the folder's disk activity.  On initial page load (when the web viewer is in a disabled state) all of the files are processed in the folder and then when the ajax call happens and the button icons change the only file accessed is the Telerik.ReportViewer.axd and having looked at the code in firebug I can see that this is where the incorrect images are coming from.

As mentioned before the background stays the same after the ajax call and now that I have found the location of the loading.gif file my custom loading images also stays the same after the ajax call.

All very odd.

Would greatly appreciate any help as this is the last step in a drastic overhaul of my site.

Regards,

Jon

[Peter]

Hello Jon,

We have used the referenced code library sample project and modified it to use AJAX with altered print image so we can be sure whether it is replaced with the image from the default skin, but still we are not able to reproduce the issue you have experienced. To avoid any confusion please check out the attached sample project, we would appreciate if you modify the attached project to reflect the problem or if it is showing what you think is wrong - please elaborate.

Sincerely yours,
Peter
the Telerik team

[Jon]

Thanks Peter

I'll have a look over the weekend and try and cut down the page till I find out what is conflicting with the skin.

Out of interest I see that there are PNG files in the image folder but cant see how they are set.  How do you set them?

Regards,

Jon

[Jon]

Hi Peter,

I've had another look and am still getting trouble with this.  When I put it into a separate site it works fine but always fails in my main site.

I think that it has something to do with the ~ in the skinspath setting.  On my main site when I set that the images all fail to initially load but in my alternate test site they work.   It's almost as if the ~ functionality is turned off on my site somehow. Any thoughts?

Regards,

Jon

[Jon]

Hi Peter,

There is definitly something odd going on.  I found that to get this working I had to remove my Telerik.Skin setting from the Web.Config (I don't use that anyway as I use App_Themes).  I then found that it would intermittently work and after some digging found that when setting the folder where the skins are in code you have to have it in the page init function.  It will work in the page load function but only on initial page load.  After the initial page load the buttons revert to the standard buttons UNLESS the SkinsPath is set in the aspx file or the PageInit function....

I don't know if there is a bug there or if the documentation needs to be clear about where to set the properties...

I'm also now having some issue with the background images not being set to the custom skin so will let you know if there is a bug with them...

Regards,

Jon

[Jon]

Hi Peter,

I think it all works now.  It's worth mentioning in the example files the fact that the colours in the background_bg.gif file seem to be irrelevant - these appear to be controlled from the CSS file rather than the image...

My only remaining issue is that in IE the Export type drop down and Export text both get vertically aligned to the top of the ribbon bar rather than in the middle as with the images.  Is there a fix for this?

Regards,

Jon

[Peter]

Hello Jon,

The images are being resolved automatically by their names. About the issue you have with the export drop down you can fix that with a small modification in the ReportViewer.css file. For example, you can change the InputButtonClass css class to following:

.InputButtonClass
{
    margin-top: 3px;
    margin-left: 8px;
}

Hope this helps.

Kind regards,
Peter
the Telerik team

[Jon]

Hi Peter,

Thanks for that, stupidly I'd tried it with Padding and not margin. 

So there is no way to change the filenames of the images?  Could that be added as a change request - using PNG files would be so much easier than GIFs.

How do I remove the ugly shadow type effect on the Export text as show in the bottom part of the previously attached image?

Regards,

Jon

[Steve]

Hello Jon,

Thank you for the involvement and suggestions - we would have them in mind for subsequent versions of the product.
For the "shadow type effect" - as far as we can see from the attached screenshot, you're probably referring to the disabled state of the export text i.e. this style is not applied on purpose, but due to the disabled hyperlink until an export format is chosen.

Greetings,
Steve
the Telerik team

[Jon]

Hi Steve,

Is there a way to change the way that the disabled style looks on IE?  I'm not a fan of the shadow type style.  Alternativly is there a way to make my own button and then tie that into the report viewer - or even make my own report viewer toolbar to replace the standard one?

Regards,

Jon

[Jon]

Hi Steve,

I've just seen an article on customising the viewer toolbar so will have a more in depth look tomorrow.

An alternate for me would be to preselect an entry in the drop down - then the disabled state would never be visible - is there a way to set PDF as teh default option?

Regards,
Jon

[Steve]

Hi Jon,

The current implementation of Telerik Reporting does not allow for preselecting an export format. Anyway, your suggestion seems reasonable and we will have it in mind while working on future versions of the product.
As for changing the hyperlink disabled style, there are various articles on the matter. Since our hyperlink is embedded in the report viewer toolbar and you cannot access it directly, you would have to use selector to locate it and change the style.

Greetings,
Steve
the Telerik team