Hide Button when print Wizard control using window.print in JavaScript

Last Reply 8 months ago By pandeyism

Posted 8 months ago

hey,

in wizard control i am generating pdf of 6th step but the buttons of wizard control is also printing. so how to disable printing of wizard control buttons please help me.

the code is as below

 .aspx

<div class="container">
    <table>
        <tr>
            <td class="auto-style1">
                <asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="False" ActiveStepIndex="0"
                    Height="79px">
                    <WizardSteps>
                        <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
                            <asp:Label Text="Test1" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
                            <asp:Label ID="Label1" Text="Test2" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep3" runat="server" Title="Step 3">
                            <asp:Label ID="Label2" Text="Test3" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep4" runat="server" Title="Step 4">
                            <asp:Label ID="Label3" Text="Test4" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep5" runat="server" Title="Step 5">
                            <asp:Label ID="Label4" Text="Test5" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep6" runat="server" Title="Step 6">
                            <div>
                                <button id="printpagebutton" onclick="myFunction()">
                                    Print this page</button>
                            </div>
                        </asp:WizardStep>
                    </WizardSteps>
                    <HeaderTemplate>
                        <ul id="wizHeader">
                            <asp:Repeater ID="SideBarList" runat="server">
                                <ItemTemplate>
                                    <li><a class="<%# GetClassForWizardStep(Container.DataItem) %>" title="<%#Eval("Name")%>">
                                        <%# Eval("Name")%></a> </li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </HeaderTemplate>
                </asp:Wizard>
            </td>
        </tr>
    </table>
</div>

i am generating pdf using window.print(); function of java script and below is my code.

<script type="text/javascript">
    function myFunction() {
        var printButton = document.getElementById("printpagebutton");
        printButton.style.visibility = 'hidden';       
        window.print();
        printButton.style.visibility = 'visible';
    }
</script>

 

Posted 8 months ago

Hi nid@patel,

Refer below code.

HTML

<script type="text/javascript">
    function PrintWindow() {
        var panel = document.getElementById("<%=Wizard1.ClientID %>");
        var btn = panel.getElementsByTagName("INPUT");
        for (var i = 0; i < btn.length; i++) {
            btn[i].style.visibility = 'hidden';
        }
        window.print()
    }
</script>
<div class="container">
    <table>
        <tr>
            <td class="auto-style1">
                <asp:Wizard ID="Wizard1" runat="server" DisplaySideBar="False" ActiveStepIndex="0"
                    Height="79px">
                    <WizardSteps>
                        <asp:WizardStep ID="WizardStep1" runat="server" Title="Step 1">
                            <asp:Label Text="Test1" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep2" runat="server" Title="Step 2">
                            <asp:Label ID="Label1" Text="Test2" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep3" runat="server" Title="Step 3">
                            <asp:Label ID="Label2" Text="Test3" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep4" runat="server" Title="Step 4">
                            <asp:Label ID="Label3" Text="Test4" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep5" runat="server" Title="Step 5">
                            <asp:Label ID="Label4" Text="Test5" runat="server" />
                        </asp:WizardStep>
                        <asp:WizardStep ID="WizardStep6" runat="server" Title="Step 6">
                            <div>
                                <button id="printpagebutton" onclick="PrintWindow()">
                                    Print this page</button>
                            </div>
                        </asp:WizardStep>
                    </WizardSteps>
                    <HeaderTemplate>
                        <ul id="wizHeader">
                            <asp:Repeater ID="SideBarList" runat="server">
                                <ItemTemplate>
                                    <li><a class="<%# GetClassForWizardStep(Container.DataItem) %>" title="<%#Eval("Name")%>">
                                        <%# Eval("Name")%></a> </li>
                                </ItemTemplate>
                            </asp:Repeater>
                        </ul>
                    </HeaderTemplate>
                </asp:Wizard>
            </td>
        </tr>
    </table>
</div>