Hi friends,in this article i will explain about How
to add events in gridview using Jquery || Handling GridView event(RowCommand) using JQuery
In previous articles i already explained about Binding and Sorting Grid in ASP.NET MVC using Jquery,JQuery:Check Uncheck all CheckBoxes in ASP.Net CheckBoxList control and How to Scroll Page Automatically by few pixels after every few seconds using JQuery
In previous articles i already explained about Binding and Sorting Grid in ASP.NET MVC using Jquery,JQuery:Check Uncheck all CheckBoxes in ASP.Net CheckBoxList control and How to Scroll Page Automatically by few pixels after every few seconds using JQuery
In ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to
add events in gridview using Jquery || Handling GridView event(RowCommand)
using JQuery</title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".div_img img").each(function () {
var img_click = 0;
$(this).click(function
() {
if (img_click == 0) {
$(this).attr("src",
"images/minus.jpg");
$(this).parent(".div_img").next(".panel_data").show();
img_click++;
}
else {
$(this).attr("src",
"images/plus.jpg");
$(this).parent(".div_img").next(".panel_data").hide();
img_click = 0;
}
});
});
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:GridView ID="GridEvents"
runat="server"
BackColor="White"
BorderColor="#CC9966"
AllowPaging="True"
PageSize="5"
BorderStyle="Solid"
AutoGenerateColumns="False"
BorderWidth="1px"
CellPadding="4"
Font-Names="Georgia"
DataKeyNames="User_ID"
Font-Size="Small"
OnPageIndexChanging="GridEvents_PageIndexChanging">
<Columns>
<asp:BoundField DataField="UserName"
HeaderText="User
Name" SortExpression="UserName"
ItemStyle-Font-Bold="true"
/>
<asp:TemplateField HeaderText="Show/Hide
Data">
<ItemTemplate>
<div class="div_img"
style="width:100px;" >
<img alt="" style="cursor: pointer"
src="images/plus.jpg"
width="15"
height="15"
title="ShowData"
/></div>
<asp:Panel ID="pnlData"
class="panel_data"
runat="server"
Style="display: none;">
<table>
<tr>
<td>
User ID
</td>
<td>
:
</td>
<td>
<%#Eval("User_ID")
%>
</td>
</tr>
<tr>
<td>
User Name
</td>
<td>
:
</td>
<td>
<%#Eval("UserName")%>
</td>
</tr>
<tr>
<td>
Gender
</td>
<td>
:
</td>
<td>
<%#Eval("Gender")%>
</td>
</tr>
<tr>
<td>
Country
</td>
<td>
:
</td>
<td>
<%#Eval("Country")%>
</td>
</tr>
</table>
</asp:Panel>
</div>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<FooterStyle BackColor="Tan"
/>
<FooterStyle BackColor="#FFFFCC"
ForeColor="#330099"
/>
<HeaderStyle BackColor="#990000"
Font-Bold="True"
ForeColor="#FFFFCC"
/>
</asp:GridView>
</div>
</form>
</body>
</html>
|
In C#:
using System;
using System.Web;
using System.Web.UI;
using
System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
public partial class HandlingGVEvents : System.Web.UI.Page
{
protected
void Page_Load(object
sender, EventArgs e)
{
BindGrid();
}
protected
void BindGrid()
{
SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["con"].ConnectionString);
SqlCommand cmd = new
SqlCommand("SELECT
* FROM user_details",con);
SqlDataAdapter da = new
SqlDataAdapter(cmd);
DataSet ds = new
DataSet();
da.Fill(ds);
GridEvents.DataSource
= ds;
GridEvents.DataBind();
}
protected
void GridEvents_PageIndexChanging(object sender, GridViewPageEventArgs
e)
{
GridEvents.PageIndex =
e.NewPageIndex;
BindGrid();
}
}
|
In VB.NET:
Imports System.Web
Imports System.Web.UI
Imports
System.Web.UI.WebControls
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Partial Public Class HandlingGVEvents
Inherits
System.Web.UI.Page
Protected
Sub Page_Load(sender As
Object, e As EventArgs)
BindGrid()
End
Sub
Protected
Sub BindGrid()
Dim con As New SqlConnection(ConfigurationManager.ConnectionStrings("con").ConnectionString)
Dim cmd As New SqlCommand("SELECT * FROM user_details", con)
Dim da As New SqlDataAdapter(cmd)
Dim ds As New DataSet()
da.Fill(ds)
GridEvents.DataSource
= ds
GridEvents.DataBind()
End
Sub
Protected
Sub GridEvents_PageIndexChanging(sender As Object, e As GridViewPageEventArgs)
GridEvents.PageIndex =
e.NewPageIndex
BindGrid()
End Sub
End Class
|
The output of the above code as shown in the below figure.
When we click on plus then the data in the panel will be displayed.Its works as toggle.
You can download the code by clicking on the below Download image.
No comments:
Post a Comment