How to add a Clear button to SQL Server Reporting Services (SSRS)

Add a clear button to SQL Server Reporting Services

If you ever had the need to add a clear / reset button to your standard SQL Server Reporting Services report viewer, here’s a way to do it. Normally when reports are displayed, they are piped through the ReportViewer.aspx page that comes with SSRS. This page hosts the Reporting Server host component, and adds text boxes, radio buttton etc. based on the number of parameters you have in your report. So here’s a way to add a clear button to SQL Server Reporting Services.

Something like this:

image

You can’t simply replace this file with your own custom page, because SSRS has HTTP handlers installed that prevents any other file to be rendered except the ReportViewer.aspx page.

So how to add a clear button to clear the text boxes? One way to do it is to modify the OOB ReportViewer.aspx page by injecting some javascript that does this for us. Initially I wanted to use jQuery, but again, the HTTP handler prohibits us from accessing the external .js file. Back to plain old Javascript it is.

Essentially, we just need to find the container that holds the View Report button, and add our custom button.

In the body tag, add a page onload event handler:

<body style="margin: 0px; overflow: auto" onload="addClearButton();">

and then add some javascript code:

<script type="text/javascript">
document.getElementsByClassName = function(cl) {
    var retnode = [];
    var myclass = new RegExp('\\b'+cl+'\\b');
    var elem = this.getElementsByTagName('*');
    for (var i = 0; i < elem.length; i++) {
        var classes = elem[i].className;
        if (myclass.test(classes)) retnode.push(elem[i]);
    }
    return retnode;
};

function addClearButton(){
    var inputs = document.getElementsByClassName('SubmitButtonCell');

    // can't find the cell, return
    if (inputs.length<1)
        return;

    // create a button
    var clearButton = document.createElement("input");
    clearButton.type = "button";
    clearButton.value = "Clear";
    clearButton.name = "btnClear";
    clearButton.style.width = "100%";

    // add clear text boxes functionality to the onclick event
    clearButton.onclick = function (){
        var textBoxes = document.getElementsByTagName("input");
        for (var i=0;i<textBoxes.length;i++){
        if (textBoxes[i].getAttribute("type")=="text"){
          textBoxes[i].value ="";
          }
        }
    };

    // find the relevant cells
    var tdSubmitButtonCell = inputs[0];

    // find the child table
    var table = tdSubmitButtonCell.childNodes[0];
    var lastRow = table.rows.length;
    var row = table.insertRow(lastRow);
    var cellLeft = row.insertCell(0);

    // add the clear button
    cellLeft.appendChild(clearButton);
  }

</script>

 

The final result will look something like this:

image

The code can be found on GitHub.com at: Custom SQL Server Reporting Services ReportViewer.aspx page

The type , provided as the Service attribute value in the ServiceHost directive could not be found.

A reminder to self:

When deplyoing a WCF service, and the assembly is registered in the GAC, don’t forget that in the .svc file one needs to put the full assembly path   in the Service element:

<%@ServiceHostLanguage=”C#”Debug=”true”Service=”TYPENAME, ASSEMBLY NAME, Version=1.0.0.0, Culture=neutral, PublicKeyToken=12345678901234″CodeBehind=”HelloWorld.svc.cs” %>