Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to show a div or a label on Click or MouseOver of a link in gridview.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.30k
    Comment on it

    How to toggle the visibility a div or a label on Click/MouseOver of a link in gridview.

    This demonstration is very useful to make a pop up like window opens on click/Mouse Over on every link in a row in a grid view. To begin this lets start with writing the gridview asp code.

    <asp:GridView ID="grdreciept" runat="server" AutoGenerateColumns="false" ShowHeader="false" >
          <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                 <tr>                                              
                <td align="left" width="330" valign="middle" >
                    <a href="#" id="click" class="showhide">View Orders</a>
                   <asp:Panel ID="pnlOrders" runat="server" class="slidediv">
                      <ul>
                <li>
                    <asp:Label ID="lblOrderDetails"  runat="server"></asp:Label>
                     </li>
                </ul>
                  </asp:Panel>
                      </td>                                                                                 
                      </tr>                           
                     </ItemTemplate>
                  </asp:TemplateField>
              </Columns>
           </asp:GridView>
        </table> 
    

    Now write the css and the jQuery code.

     <script src="../js/jquery-slide.js" type="text/javascript"></script> 
         // Download the jQuery file.
     <script type="text/javascript">
    
        $(function () {
            $('.showhide').mouseover(function () {   
          // Use this is for mouseover.
           // $('.showhide').click(function () {           
     // Use this is for click. 
    
                $(this).closest("tr td").find(".slidediv").slideToggle();
            });
        });
    
    </script>
    <style type="text/css">
        .slidediv
        {
            width: 85%;
            padding: 20px;
            color: #fff;
            margin-top: 10px;
            border: 1px solid #313131;
            display: none;
        }
    </style>
    

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: