Reporting Services dynamic multi-column parameter box

The Reporting Services parameter section at the top of a report is generated as a HTML table with two fixed columns. To display SSRS parameters in three columns in the parameter field is not possible using a configuration option or even a CSS style sheet, so element conversion is needed.

The instructions below fixes this for the /reports and /reportserver web entry points and are suited for Reporting Services 2012, but might work for earlier versions as well.

The code:

• Adds the jquery library to every report
• Uses this library to:
• Create a DIV element for each set of TD parameter elements (=label and textbox/dropdown) and add it to the first TD element of the first TR row
• Add all sets of TD parameters to these DIVs
• Remove all other TR rows from the parameter TABLE

The result is that as many parameters as possible are fitted on one horizontal row:

The code has to be appended to the end of the ReportingServices.js file. This file is added automatically to every report generated by Reporting Services.

The file is most probably located in the public javascript folder: c:\Program Files\Microsoft SQL Server\MSRS11.MSSQLSERVER\Reporting Services\ReportManager\js

Perform the following steps to get a multiple columns in the parameter box:

1) Download and add the publicly available jquery-1.4.4.min.js to the public javascript folder.

2) Code to append:

// helper function to add scripts to head of html
function addHeadElement(headtype, file) {
var head = document.getElementsByTagName('head')[0];
  if (headtype == 'script')
  {
    var script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.setAttribute('src', file);
    head.appendChild(script); 
  }
}
addHeadElement('script','/Reports/js/jquery-1.4.4.min.js');

// function that converts the parameter table to divs 
function param() {

  // create as many div->table->tr elements in the first column of the first row as there are parameters
  $(".ParamLabelCell").each( function (i, v) {
    var html = "<div style='float: left; padding-right: 10px;'> \
      <table> \
        <tr id='blackninja" + i + "'></tr> \
      </table> \
    </div>";
    $("td.InterParamPadding").filter(":first").append(html);
  });
  
  // move each label to its proper div->table->tr element
  $("td.ParamLabelCell").each( function (i, v) {
    $(this).appendTo("#blackninja" + i);
  });
  
  // move each prompt to its proper div->table->tr element
  $("td.ParamEntryCell").each( function (i, v) {
    $(this).appendTo("#blackninja" + i);
  });
  
  // remove all other parameter rows
  $("tr[isparameterrow='true']").not(':first').remove();

}
// add the convert function to the onload event twice
// this guarantees a cross-browser safe implementation
function pageLoad() {
  param();
}
window[ addEventListener ? 'addEventListener' : 'attachEvent' ]( addEventListener ? 'load' : 'onload', param );

3) Change style sheet

Add the following code to the styles\ReportingServices.css style sheet to make the dropdown boxes and textboxes smaller in width. More parameters will fit on a row:

.ParametersFrame.ParamsGrid.MenuBarBkGnd { padding: 0px; }
.DisabledTextBox { width: 125px; }
td.ParamEntryCell [id$="Value"] { width: 125px; }
td.ParamEntryCell { padding: 0px; }
td.SubmitButtonCell { padding-top: 2px; padding-bottom: 0px; }
td.ParamLabelCell { padding-right: 5px; }
td.InterParamPadding { padding-left: 0px; }
/* IE11 Edge/default profile fix */
tr.MenuBarBkGnd { height: 0px; } 
#ParametersRowctl31 { height: 0px; }

4) Enable in the reportserver

Add the following two elements to the head-element in \ReportServer\Pages\ReportViewer.aspx:

<meta http-equiv="X-UA-Compatible" content="IE=9">
<link href="/Reports/styles/ReportingServices.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="/Reports/js/ReportingServices.js"></script>
<script type="text/javascript" src="/Reports/js/jquery-1.4.4.min.js"></script>