{"id":20,"date":"2008-09-24T13:07:05","date_gmt":"2008-09-24T17:07:05","guid":{"rendered":"http:\/\/blogs.law.harvard.edu\/brandonhaynes\/?p=20"},"modified":"2008-09-26T14:56:52","modified_gmt":"2008-09-26T18:56:52","slug":"changing-the-size-of-reportviewer-parameter-dropdown-list","status":"publish","type":"post","link":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/2008\/09\/24\/changing-the-size-of-reportviewer-parameter-dropdown-list\/","title":{"rendered":"Changing the Size of ReportViewer Parameter Dropdown List"},"content":{"rendered":"<p style=\"text-align: justify\"><a href=\"http:\/\/blogs.law.harvard.edu\/brandonhaynes\/files\/2008\/09\/before.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignright alignnone size-medium wp-image-21\" style=\"float: right;margin-left: 12px;margin-right: 12px;border: black 1px solid\" src=\"http:\/\/blogs.law.harvard.edu\/brandonhaynes\/files\/2008\/09\/before-300x100.png\" alt=\"SSRS Report Viewer Parameters Dropdown (Before)\" width=\"300\" height=\"100\" \/><\/a>I recently encountered an issue with the SSRS <a href=\"http:\/\/www.gotreportviewer.com\/\">ReportViewer<\/a> control where the parameter drop-down list was of insufficient width for the parameters contained therein.\u00a0 Surprisingly, a <a href=\"http:\/\/www.google.com\/search?q=reportviewer+changing+parameter+dropdown+width\">search<\/a>\u00a0yielded no solutions.\u00a0 Indeed, several individuals indicated that changing this width was not possible.<\/p>\n<p>Fortunately, it does turn out to be possible.<\/p>\n<p><!--more--><\/p>\n<p style=\"text-align: justify\">Firing up the <a href=\"http:\/\/en.wikipedia.org\/wiki\/IE_Developer_Toolbar\">IE developer toolbar<\/a>, 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).\u00a0 Indeed, the width attribute on this DIV was\u00a0hard-coded at 184px.\u00a0 By default, the parameters dropdown appears as:<\/p>\n<p style=\"text-align: center\"><a href=\"http:\/\/blogs.law.harvard.edu\/brandonhaynes\/files\/2008\/09\/before.png\"><\/a><\/p>\n<p style=\"text-align: justify\">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.\u00a0 As such, a judiciously constructed style could indeed target (and thereby style) this tag.<\/p>\n<p>The form of the id on the DIV in question is [Viewer ClientId]_ctl00_ctl03_divDropDown.\u00a0 Here, ctl00\u00a0is the automatically-generated id of the Microsoft.Reporting.WebForms.ParametersArea control, and ctl03 is the id of the Microsoft.Reporting.WebForms.MultiValueValidValuesControl.<\/p>\n<p>Putting this together, an initial style would read as:<\/p>\n<p style=\"padding-left: 30px\"><span style=\"font-size: x-small;color: #0000ff\">&lt;<\/span><span style=\"font-size: x-small;color: #a31515\">style<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #ff0000\">type<\/span><span style=\"font-size: x-small;color: #0000ff\">=&#8221;text\/css&#8221;&gt;<br \/>\n<\/span><span style=\"font-size: x-small;color: #a31515\">\u00a0\u00a0\u00a0\u00a0 DIV#&lt;%=<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #a31515\">Viewer.ClientID<\/span><span style=\"font-size: x-small\"> %<\/span><span style=\"font-size: x-small;color: #a31515\">&gt;<\/span><span style=\"font-size: x-small;color: #a31515\">_ctl00_ctl03_divDropDown<\/span><span style=\"font-size: x-small\"><span style=\"font-size: x-small\"><br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 {<br \/>\n<\/span><\/span><span style=\"font-size: x-small\"><span style=\"font-size: x-small\"><span style=\"font-size: x-small;color: #ff0000\">\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 width<\/span><span style=\"font-size: x-small\">: <\/span><span style=\"font-size: x-small;color: #0000ff\">320px<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #0000ff\">!important<\/span><span style=\"font-size: x-small\">;<br \/>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 }<br \/>\n<\/span><\/span><\/span><span style=\"font-size: x-small;color: #0000ff\"><span style=\"font-size: x-small;color: #0000ff\">&lt;\/<\/span><\/span><span style=\"font-size: x-small;color: #0000ff\"><span style=\"font-size: x-small;color: #0000ff\"><span style=\"font-size: x-small;color: #a31515\">style&gt;<\/span><\/span><\/span><\/p>\n<p style=\"padding-left: 30px\"><span style=\"font-size: x-small;color: #0000ff\"><span style=\"font-size: x-small;color: #0000ff\"><span style=\"color: #a31515\">&lt;<\/span><\/span><\/span><span style=\"font-size: x-small;color: #a31515\">rsweb<\/span><span style=\"font-size: x-small;color: #0000ff\">:<\/span><span style=\"font-size: x-small;color: #a31515\">ReportViewer<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #ff0000\">ID<\/span><span style=\"font-size: x-small;color: #0000ff\">=&#8221;Viewer&#8221;<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #ff0000\">runat<\/span><span style=\"font-size: x-small;color: #0000ff\">=&#8221;server&#8221;<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #ff0000\">Width<\/span><span style=\"font-size: x-small;color: #0000ff\">=&#8221;100%&#8221;<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #ff0000\">Height<\/span><span style=\"font-size: x-small;color: #0000ff\">=&#8221;600px&#8221;<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #ff0000\">ProcessingMode<\/span><span style=\"font-size: x-small;color: #0000ff\">=&#8221;Remote&#8221;<\/span><span style=\"font-size: x-small\"> <\/span><span style=\"font-size: x-small;color: #0000ff\">\/&gt;<\/span><\/p>\n<p style=\"text-align: justify\"><a href=\"http:\/\/blogs.law.harvard.edu\/brandonhaynes\/files\/2008\/09\/after.png\"><img loading=\"lazy\" decoding=\"async\" class=\"size-medium wp-image-22\" style=\"float: right;margin-left: 12px;margin-right: 12px\" src=\"http:\/\/blogs.law.harvard.edu\/brandonhaynes\/files\/2008\/09\/after-300x100.png\" alt=\"SSRS ReportViewer Parameter Dropdown (After)\" width=\"300\" height=\"100\" \/><\/a>Here we use the ClientID the ReportViewer (and its constituent ctl00 and ctl03 child and grandchild, respectively).\u00a0 We also use an &#8220;!important&#8221; declaration to override the inline styling.\u00a0 After our style is applied, the ReportViewer dropdown may be set to any size.<\/p>\n<p style=\"text-align: justify\">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).\u00a0 This would make the solution a bit more forward-looking and upgrade-friendly.\u00a0 I leave this as an exercise to the reader (there are plenty of <a href=\"http:\/\/www.google.com\/search?q=asp.net+recurse+the+control+tree\">tutorials<\/a> out there about recursing the control tree).<\/p>\n<p>Hope this helps anyone needing to resize this particular control.<\/p>\n<p>B<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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.\u00a0 Surprisingly, a search\u00a0yielded no solutions.\u00a0 Indeed, several individuals indicated that changing this width was not possible. Fortunately, it does turn out to be possible.<\/p>\n","protected":false},"author":1933,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[3129,142],"tags":[3110,19471,3130,3108,3109],"class_list":["post-20","post","type-post","status-publish","format-standard","hentry","category-microsoft-sql-server-reporting-services-ssrs","category-technology","tag-microsoft-reporting-services","tag-microsoft-sql-server-reporting-services-ssrs","tag-reporting-services","tag-reportviewer","tag-ssrs"],"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/posts\/20","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/users\/1933"}],"replies":[{"embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/comments?post=20"}],"version-history":[{"count":1,"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/posts\/20\/revisions"}],"predecessor-version":[{"id":480,"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/posts\/20\/revisions\/480"}],"wp:attachment":[{"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/media?parent=20"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/categories?post=20"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/archive.blogs.harvard.edu\/brandonhaynes\/wp-json\/wp\/v2\/tags?post=20"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}