Changing the Size of ReportViewer Parameter Dropdown List
I recently encountered an issue with the SSRS ReportViewer control where the parameter drop-down list was of insufficient width for the parameters contained therein. Surprisingly, a search yielded no solutions. Indeed, several individuals indicated that changing this width was not possible.
Fortunately, it does turn out to be possible.
Firing up the IE developer toolbar, I immediately noted that (a) parameter controls were rendered outside the document hierarchy (in this case at the end of the FORM), (b) there was no class specified anywhere within the internal ReportViewer tag hierarchy, and (c) styles were hard-coded directly on the DIV tag which held the drop-down list (implemented as a TABLE). Indeed, the width attribute on this DIV was hard-coded at 184px. By default, the parameters dropdown appears as:
Fortunately, while there was no specific class to hang a custom width from, it turns out that the id of this DIV was reliably predictable. As such, a judiciously constructed style could indeed target (and thereby style) this tag.
The form of the id on the DIV in question is [Viewer ClientId]_ctl00_ctl03_divDropDown. Here, ctl00 is the automatically-generated id of the Microsoft.Reporting.WebForms.ParametersArea control, and ctl03 is the id of the Microsoft.Reporting.WebForms.MultiValueValidValuesControl.
Putting this together, an initial style would read as:
<style type=”text/css”>
DIV#<%= Viewer.ClientID %>_ctl00_ctl03_divDropDown
{
width: 320px !important;
}
</style>
<rsweb:ReportViewer ID=”Viewer” runat=”server” Width=”100%” Height=”600px” ProcessingMode=”Remote” />
Here we use the ClientID the ReportViewer (and its constituent ctl00 and ctl03 child and grandchild, respectively). We also use an “!important” declaration to override the inline styling. After our style is applied, the ReportViewer dropdown may be set to any size.
Note that it would be of better form to create a custom function that recurses the ReportViewer control hierarchy to locate the divDropDown control (and use its ClientID). This would make the solution a bit more forward-looking and upgrade-friendly. I leave this as an exercise to the reader (there are plenty of tutorials out there about recursing the control tree).
Hope this helps anyone needing to resize this particular control.
B
The Changing the Size of ReportViewer Parameter Dropdown List by Brandon Haynes, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Share Alike 3.0 United States License.
Brandon Haynes
September 26, 2008 @ 10:29 am
I thought I’d add for anyone reading that this method was tested against the 2005 version of the ReportViewer control; though I do not expect that the method differs significantly for the 2008 revision, it is possible that the exact control structure (and therefore the style identifier) is a bit different.
Darryl
November 5, 2008 @ 5:49 pm
Can you provide a little more detail as this is exactly what I need to do. Where do I add this? the RDL or one of the reporting services files.
Thanks,
Brandon Haynes
November 6, 2008 @ 11:39 am
Hi Darryl,
This entry was intended for application in a ASP.NET page or user control using the ReportViewer server control (available at http://www.gotreportviewer.com/).
For modification of the layout within the SSRS Report Manager, you will need to look at deploying the technique to the ReportingServices.css stylesheet (by default located in /Program Files/Microsoft SQL Server/MSSQL.#/ReportManager/Styles, where # is your SSRS MSSQL instance –usually “2″).
Because this stylesheet is not processed by ASP.NET, you would need to hard-code the value therein. For my local installation, the identifier is “ctl140_ctl00_ctl03_divDropDown”. You may also have some luck placing a dynamic entry in one of the ASPX pages (perhaps Pages/Report.aspx).
Good luck!
Helper
February 27, 2009 @ 1:01 am
A static CSS solution involves:
1. Deploy report as ise and view in browser
2. View source and locate the control id (Ex. ReportViewerControl_ctl00_ctl07_txtValue). You can usually find the control by searching for the parameter caption text.
3. Ensure the HTMLViewer is in rsreportserver.config.
4. Add an ‘id’ targeted CSS entryin HTMLViewer.cs like the following: #ReportViewerControl_ctl00_ctl07_txtValue { width: 500px }
Chris
October 1, 2009 @ 9:50 pm
Thanks Brandon.
Your post was much more helpful than those by Microsoft, who simply say that it cannot be done!