There are really 2 concepts here which is the reason for the long title. First, adding jQuery to Report Services means hacking 2 install files (.aspx files) of Report Services. If you don’t have someone who has access to the server that is hosting the web pages, it might be hard to get this done. Your IT department might say ‘no way’ but this problem is well known for RS 2008 up to the current – so it is really not a risk – if it breaks, simply fix it – most likely it will never need fixing especially if you are using an older version of RS which is by this point mature. Next to address the width – this article helped. Here is how I did it and who helped me (urls in the code and the links above)…

1. Using this article above, I found out which two files and added these lines at the bottom. For example mine was at c:\Program Files\Microsoft SQL Server\MSRS10.MSSQLSERVER\Reporting Services\ReportManager\Pages\Report.aspx
   1. [csharp]</pre>
      <script type="text/javascript" src="http://civil.fsrvdevap1.focusdev.local/civil/Scripts/jquery-1.8.2.min.js"></script>
      <script type="text/javascript" src="http://civil.fsrvdevap1.focusdev.local/civil/Pages/RS/jQuery_ExtrasCommon.js"></script>
      <script type="text/javascript" src="http://civil.fsrvdevap1.focusdev.local/civil/Pages/RS/jQuery_ExtrasReports.js"></script>
      <pre>[/csharp]
2. Now to write the jQuery, there were a few items that had to come together.
   1. Report Services puts their style info right in the elements – so you have to use ” !important” in the css parameter. jQuery does NOT work well with this and a fix to do this is not yet available – so add a new style to the header (a class style worked well) and then use jQuery to add this style to all the elements
   2. The elements that need to be adjusted end with “divDropDown” so the real meat that makes the adjustment is the following jQuery
      1. [js]
         $(‘head’).append(‘<style>.widerDropDown{width:500px !important}</style>’);</pre>
         </li>
         <li>
         <pre>$("[id$=’_divDropDown’]").addClass(‘widerDropDown’);

         [/js]

   3. Then in the jQuery_ExtrasReports.js file I wrote simple jQuery that looked for a case insensitive version of the folder and name of the report (the .rdl) file. Here is the final code. The code does not need to be in two .js files, but to simplify the reports file – at least the way it looks syntactically, two files were chosen. When the phrase “//end of jQuery_ExtrasReports.js” is listed in the code below, I switched to putting that code in to the jQuery_ExtrasCommon.js
      1. [js]
         var lref = window.location;
         lref = urldecode(lref);
         var lrefcomp = lref.toLowerCase();

         //alert(lrefcomp);
         if (lrefcomp.indexOf("/myRSFolder/", 0) >= 0) {
         $(document.body).ready(function () {
         try {
         //alert ("made it to /myRSFolder/myReportName");
         makeDivDropDownWider();
         }
         catch (e) { }
         });
         } else {
         /*
         $(document.body).ready(function () {
         // do any items here that are not the main report.
         });
         */

         </pre>
         </li>
         <li>
         <pre>[/js]

      2. And the jQuery_ExtrasCommon.js file had this code (there is an extra peice of code that makes the  box turn red when thre is a certain text string in the list of pickable choices – neat)[js]</pre>
         </li>
         <li>
         <pre>function makeDivDropDownWider() {
         $(‘head’).append(‘<style> .widerDropDown{width:350px !important; height:500px !important;} </style>’);
         $(‘head’).append(‘<style> .warningRed{background-color:#FFCCCC;} </style>’);

         $("[id$=’_divDropDown’]").addClass(‘widerDropDown’);

         //not i.e.9
         $("[id$=’_divDropDown’]").bind("DOMSubtreeModified",function(){
         checkForRedWarning(this);
         });

         //i.e. 9
         $("[id$=’_divDropDown’]").bind("propertychange",function(){
         checkForRedWarning(this);
         });

         }
         function checkForRedWarning(item) {

         var ih = item.innerHTML;
         var pos1 = ih.indexOf("truncated…Show");
         var thisNodeName = item.id.replace("_divDropDown","_txtValue");
         if (pos1 >= 0) {
         $("#" + thisNodeName).addClass(‘warningRed’);
         } else {
         $("#" + thisNodeName).removeClass(‘warningRed’);
         }
         //alert(‘changed’);
         }

         function urldecode(str) {
         return decodeURIComponent((str + ”).replace(/\+/g, ‘%20’));
         }</pre>
         </li>
         <li>
         <pre>[/js]