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
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!
Mark
April 9, 2010 @ 12:31 pm
I concur with the above, thank you Brandon!
Sergei
May 21, 2010 @ 12:40 am
Thanks Brandon,
I had a problem with check boxes being center aligned in the dropdown. Your post helped me as well though I had to modify the approach. Using
DIV#_ctl00_ctl03_divDropDown
is only good if there is only one drop down with checkboxes. If there are more it doesn’t work as it is client id dependant. Besides in my case the id was a little different instead of …._ctl03_… i had _ctl07_
I had a hard time trying to identify client id on the server side as the report viewer shows different reports based on user selection from a tree view and some reports link to other reports shown in the same window. So I did a litle piece of client scripting and put it at the end of page so it loads last and it did it for me no matter multiple drop downs.
alignDropdowns();
function alignDropdowns() {
var list = document.getElementsByTagName(“div”)
for (i = 0; i = 0) {
item.style.textAlign = ‘left’;
}
}
}
Sergei
May 21, 2010 @ 12:45 am
Sorry for the mess. I don’t know why but it just doesnt’ post correctly.
There supposed to be an if statement surrounding item.style.textAlign = ‘left’ that checks for (item.id.indexOf(‘divDropDown’) >= 0)
Gordo
July 9, 2010 @ 11:26 am
Regarding the “static CSS solution” posted here, does anyone know if this still works? I’m using reporting services from sql server 2005, SP3. I modified rsreportserver.config to point to the style sheet (HTMLViewer) and got my ID from view source and tried to add the width change line to HTMLViewer.css file, but after trying the suggested format and about a dozen variations, nothing seems to have any effect at all (no change when report is displayed). I did try restarting the report server just in case, but that made no difference. Any help would be greatly appreciated, I really want to get this working!
Brandon Haynes
July 9, 2010 @ 11:48 am
The approach should continue to work in the configuration you describe, though assisting in debugging will be difficult in all but the most vague sense. I suggest firing up FireBug (or an equivalent debugging proxy) and (1) ensure that the stylesheet you configured is being loaded correctly, and (2) that the style you have specified is in fact correct. A few minutes in FireBug will likely reveal the underlying problem.
Best of luck!
Brandon
Gordo
July 9, 2010 @ 3:28 pm
Thanks for the tip. It turns out I was accidentally using the wrong ID. For those that might read these comments, with the same problem, basically you want to search your web page source code for the text of your parameter label, but then after you find that, you want to go down to the line with “<input name=" and take the ID from THERE. In my case it was "ctl140_ctl00_ctl05_txtValue". Then take that and put it into your .css file exactly like this:
#ctl140_ctl00_ctl05_txtValue { width: 400px }
just add it to the bottom of the file or wherever, doesn't matter.
This is working beautifully! Thanks so much for the info, there doesn't seem to be a lot on the web about this issue, gotta love microsoft telling everyone this can't be done, haha.
Gordo
July 9, 2010 @ 3:52 pm
There is one major problem with the static css solution that no one mentioned. Those ID names are not unique across reports, if you have a lot of reports, there will be lots of duplicated names, and the style sheet applies to all reports. So when you change a parameter width for one report, you better make sure you aren’t messing up other reports. If there is some workaround to that problem, I’ve love to see it! It would be nice if you could somehow use a separate style sheet for each report, or otherwise somehow force reporting services to use unique IDs for the controls. I don’t know a lot about style sheets, is there some way to make a line in the css file only apply to certain pages (conditional formatting)?
James
July 20, 2010 @ 7:03 pm
Any idea how to get this to work with the new 2010 version? I had it working fine with 2008
Brandon Haynes
August 1, 2010 @ 11:17 am
@James: Make sure you review Gordo’s comments above to ensure that you are targeting the correct ClientID; this is critical, and may vary across reports. A client debugging tool such as FireBug can be very useful for these sorts of issues.
I have not yet investigated these techniques with SSRS 2008 R2, but will likely do so in the near future. I do not expect any substantial differences, except for a possible change in control hierarchy. (It’s also possible that the release supports this in a configurable manner.)
Brandon
irena
August 8, 2011 @ 8:38 am
I can’t compile this line
DIV#_ctl00_ctl03_divDropDown
in visual Studio 2010
Help!
irena
August 8, 2011 @ 8:41 am
I don’t know why but it just doesnt’ post correctly.
There supposed to be
DIV#_ctl00_ctl03_divDropDown