Thursday, 8 May 2014

Jquery:How to add events in gridview using Jquery || Handling GridView event(RowCommand)

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 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

© 2012-2014 Aspdotnet-Kishore.blogspot.com. All Rights Reserved.
The content is copyrighted to Kishore and may not be reproduced on other websites without permission from the owner.