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.31k
    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" >
                <td align="left" width="330" valign="middle" >
                    <a href="#" id="click" class="showhide">View Orders</a>
                   <asp:Panel ID="pnlOrders" runat="server" class="slidediv">
                    <asp:Label ID="lblOrderDetails"  runat="server"></asp:Label>

    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();
    <style type="text/css">
            width: 85%;
            padding: 20px;
            color: #fff;
            margin-top: 10px;
            border: 1px solid #313131;
            display: none;

 0 Comment(s)

Sign In

Sign up using

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: