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:
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:
The code can be found on GitHub.com at: Custom SQL Server Reporting Services ReportViewer.aspx page
Hi,
where exactly do we have to write this script?
Hi.
You add it to your ReportViewer.aspx file.
Please see an example here
See instructions here
PERFECT!!! THIS WORKS PERFECTLY. ALTHOUGH WHAT I NEED IS A BUTTON THAT DOES THE SAME THING THE ‘VIEW REPORT’ BUTTON DOES BUT I WANT TO CALL IT ‘SAVE AND CONTINUE’. HOW DO I DO THAT…? PLEASE TREAT AS URGENT! THANKS A LOT
Hi, I have done the same as said above, but am getting the Clear button. Pls let me know the exact procedure.
Excellent article… very informative and succinct…
Hi,
After adding clear button if i click on “View Report” it asks to enter some value for the parameter.
Could you please help to resolve this issue?
Bheemraj
Thanks for the information! This has been very helpful
Hello Mr. Johansson
I have read your post it is really great that people like you presents such topics. So the moment I saw it I try to build it but even though I made all the changes still the report viewer looks the same ( only the view report button). What exactly is the sequence between the body tag and the the javascript? should i place them like :
body….. and directly below the javascript like this:
<body style …
<script type…
or somehow else??
Best Regards
I really thank you for all your assistance
Nikos
Thanks for the information! It’s working good with report server url but i am using report viewer control in asp.net web application to display report.
It’s showing clear button if I open report directly in report server URL but clear button is not showing with report viewer control in my asp.net web application.
I like your solution, but my concern is that this customization will add the clear button to every report.
As an alternate solution, can it be coded so that instead of immediately creating the clear button to instead check the report if it contains a specific custom code method within the report into which the logic for the clear button can be put? If possible, this will open up the possibilities of doing something else other than a clear button.
I’m very curious if it’s possible and how it can be accomplished.
Thanks in advance.
Stirling
My requirement is when we hit the clear button instead of showing the blank parameters it should show default values. We have default value as ‘ALL’ for all the parameters.
Hi ,
I have developed SSRS report with summary report which is linked to six sub reports. i have provided eight parameters in summary report to make it user friendly. But when linked to sub reports it is working fine, but i want to provide back to summary button(link) in other sub reports.And it should be in a such a way that when i linked back to summary report from sub reports i need not to set all parameters again .(i.e Parameter selected should not change in summary report). Waiting for your reply. Thank you,
Hi, I am looking for a solution to add a hyperlink (e.g Click to view report from Virtual Directory) under the “View Report” button. Could you help me to modify the code to faciliate this…. ?!
Hi,
I have tried same in reporting server 2012 but i am unable to view clear button on my report.please help me to solve this issue.
I want to add button to search the parameter space of the object is menubarbkgnd, can help me
Any idea how to execute an external JS code when clicking on the Clear button?
Any idea how to add a button to the report toolbar?