- Get link
- X
- Other Apps
Hi Guys today I am going to show you how we can toggle the Rows on click event of any image or button or link by Jquery.
Toggling (Hiding and Showing) the Rows is very useful when we have huge data on Page and for making the page convenient we can minimize or Hide the Rows to get the compact View of Required Table.
Similarly we can show the Rows on demand while clicking on the button or image or link which we had used / clicked to hide the respective Row(s).
I had this situation when I was displaying Department Table on asp.net webpage via DataList Control as the table had huge data hence I need to Hide the Child Row on click of 'Toggle_Plus' image shown in Parent Rows. Below I am showing the sample video of the table for you convenient to understand. I hope this will help you greatly to understand the exact requirement.
Toggle Rows of HTML Table via Jquery.
In this example the Gray part is the Header and Navy Blue parts are the Parent Rows and the Pink parts are Child Rows.
On Click of Parent Rows Plus Sign Button the child row will get hidden and the next click again will show the rows back to User.
The sample codes are shown Below the Video as well as I'll attach the Sample Code.
Default.aspx :
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="JqueryPractise.Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>DataList Toogle</title>
<script src="JS/jquery-1.9.1.js" type="text/javascript"></script>
<style type="text/css">
.Parent
{
border: 1px solid #000000;
font-weight: 100;
font-family: Arial;
background-color: Navy;
color: White;
border: 1px solid #000000;
}
.Child
{
border: 1px solid #000000;
font-weight: normal;
font-size: 8pt;
font-family: Arial;
background-color: Fuchsia;
color: White;
border: 1px solid #000000;
}
</style>
<script type="text/javascript">
$(document).ready(function () {
$("a.Pa").click(function () {
var myImg = $(this).closest("tr").find("#imgToggle")
$(this).closest("tr").next().slideToggle(30, "linear", function () {
if ($(this).is(':visible') === true) {
myImg.attr("src", "images/minus.jpg");
} else { myImg.attr("src", "images/plus.jpg"); }
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:DataList ID="DataList1" runat="server" DataSourceID="SqlDataSource1" DataKeyField="DepartmentID"
Width="672px" BorderStyle="None">
<HeaderTemplate>
<tr style="font-weight: bold; font-family: Arial; background-color: Gray; border: 1px solid #000000;">
<td>
DepartmentID
</td>
<td>
Name
</td>
<td>
Group Name
</td>
<td>
Modified Date
</td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr class="Parent">
<td>
<a class="Pa">
<img id="imgToggle" src="images/minus.jpg" alt="" /></a><asp:Label ID="DepartmentIDLabel"
runat="server" Text='<%# Eval("DepartmentID") %>' />
</td>
<td>
<asp:Label ID="NameLabel" runat="server" Text='<%# Eval("Name") %>' />
</td>
<td>
<asp:Label ID="GroupNameLabel" runat="server" Text='<%# Eval("GroupName") %>' />
</td>
<td>
<asp:Label ID="ModifiedDateLabel" runat="server" Text='<%# Eval("ModifiedDate") %>' />
</td>
</tr>
<tr class="Child">
<td>
</td>
<td colspan="3">
<div>
Hi Anand Mani Tiwari... Hi Anand Mani Tiwari... Hi Anand Mani Tiwari... Hi Anand
Mani Tiwari... Hi Anand Mani Tiwari... Hi Anand Mani Tiwari... Hi Anand Mani Tiwari...
Hi Anand Mani Tiwari... Hi Anand Mani Tiwari... Hi Anand Mani Tiwari... Hi Anand
Mani Tiwari...</div>
</td>
<td>
</td>
<td>
</td>
</tr>
</ItemTemplate>
</asp:DataList>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:AdventureWorksConnectionString %>"
SelectCommand="SELECT DepartmentID, Name, GroupName, ModifiedDate FROM HumanResources.Department">
</asp:SqlDataSource>
<br />
</div>
</form>
</body>
</html>
Please Comment .
This post is really a great help in my current Project... I was looking for this functionality for a HTML report in my Project.
ReplyDeleteThank you very much Anand Mani Tiwari.
Keep Posting stuff like this, I really appreciate this help...
Thank you. I am trying to help as much I can.
ReplyDeleteThanks again and keep visiting my blog for more stuffs...