Bind a client click event to print button of a Crystal Report Viewer Control in Asp.NET

Question

I have a ASP.NET Page with a Crystal Report Viewer Control.

When a report is rendered to the client & client clicks on the print button (of the crystalReportviewer control), I want to ask user a message whether the report printed properly (to make a call to server/ upload in a log, etc..) after the printing is over.

The relevant codes of Aspx are :

<CR:CrystalReportViewer ID="CrystalReportViewer1" runat="server" 
            GroupTreeImagesFolderUrl="" Height="1202px" 
            ReuseParameterValuesOnRefresh="True" EnableDatabaseLogonPrompt="false"
            ToolbarImagesFolderUrl="" ToolPanelWidth="200px" Width="1104px" />

& a script at the bottom of the page .

<script>
    document.getElementById("CrystalReportViewer1_toptoolbar_print").addEventListener("click", function () {
        var x = confirm("Did The Report Print properly ?");
        if (x) {
            //Do something...

        }
    });

</script>

The problem is this click event fires before the print dialog box opens & before any printing activity. Also, When the print button is clicked, a postback is fired by the viewer to get report contents & print to the printer. So this approach does not work.

Any options achieve this functionality?

Edit : Generated HTML for The Print Button :(This is generated by the crystal report viewer Control)

<table id="CrystalReportViewer1_toptoolbar_print" class="toolbar_button_default" cellspacing="0" cellpadding="0" border="0" role="button" style="height: 22px; margin: 1px; display: block; cursor: pointer;" tabindex="0" title="Print this report">

    <tbody>
        <tr valign="middle">
            <td>
                <div style="overflow:hidden;height:20px;width:20px;cursor:pointer">
                    <img id="IconImg_CrystalReportViewer1_toptoolbar_print" width="16" vspace="0" hspace="0" height="16" border="0" style="float: left; background-image: url("aspnet_client/system_web…ckground-position: -3px -25px; margin: 2px; cursor: pointer;" alt="Print this report" src="aspnet_client/system_web/4_0_30319/crystalreportviewers13/js/crviewer/../dhtmllib/images/skin_standard/../transp.gif"></img>
                </div>
            </td>
        </tr>
    </tbody>

</table>

A Screen Shot of the runtime events bubbled to it: enter image description here

Are you sure that the control on which you want to bind event has id, CrystalReportViewer1_toptoolbar_print? — Adil
Then why it is fired earlier then you expect as in OP "The problem is this click event fires before the print dialog box opens & before any printing activity"? — Adil
that is what i am not able to figure out. My expectation was my event will fire after the report buttons event but the reverse is happening.. — Abdul Rehman Sayed

Adil Adil · Accepted Answer · 2015-05-08T11:46:12

You are binding the click event to table havingid CrystalReportViewer1_toptoolbar_print that contains the print image with id IconImg_CrystalReportViewer1_toptoolbar_print. I think you need to bind the click to image instead.

Return false from event handler will stop postback.

document.getElementById("IconImg_CrystalReportViewer1_toptoolbar_print").addEventListener("click", function () {
    var x = confirm("Did The Report Print properly ?");
    if (x) {
          //Do something...

    }
    return false;
});

Bind a client click event to print button of a Crystal Report Viewer Control in Asp.NET

1 Answers