Sunday, 5 January 2014

JQuery:Select Multiple records in GridView with Ctrl Key in ASP.NET using C#/VB.NET

Hi friends,in this article I will explain about JQuery:Select Multiple records in GridView with Ctrl Key in ASP.NET using C#/VB.NET.

ASP.NET:                                                                   Previous Article>>JQuery:get GridView Cell Data
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery:Select Multiple records in GridView with Ctrl Key in ASP.NET using C#/VB.NET</title>


    <style type="text/css">
        .selected
        {
            color: Red;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script type="text/javascript" language="javascript">
        $(document).ready(function () {
            $("#gv_GetCellData tr td").each(function (index) {
                $(this).attr("id", "td" + index);
            });
        });
        $(document).ready(function () {
            var isTrue = 0;
            var x = "";
            var ids = [];
            $("#gv_GetCellData tr:has(td)").click(function (e) {
                var string1 = "";
                $(this).css("cursor", "pointer");
                if (e.ctrlKey) {
                    var selTD = $(e.target).closest("td");
                    if ($(e.target).closest("td").attr("class") != "selected") {
                        selTD.addClass("selected");
                        $("#lblSelected").append(selTD.text() + " ");
                    }
                    else {
                        selTD.removeAttr("class");
                        string1 = $("#lblSelected").text();
                        $("#lblSelected").empty();
                        string1 = string1.replace(selTD.text(), " ");
                        $("#lblSelected").append(string1);

                    }
                }
            });

        });
      

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gv_GetCellData" runat="server" BackColor="White" BorderColor="#CC9966"
            BorderStyle="Solid" BorderWidth="1px" CellPadding="4" Font-Names="Georgia" Font-Size="Small"
            Width="375px">
            <FooterStyle BackColor="Tan" />
            <AlternatingRowStyle BackColor="#E6E6E1" />
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        </asp:GridView>
    </div>
    <div>
        Selected cell value is :
        <asp:Label ID="lblSelected" runat="server" ForeColor="Red"></asp:Label></div>
    </form>
</body>
</html>

In C#:
using System.Data;

public partial class SelectMultipleCellWithCtrl : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gv_GetCellData.DataSource = GetData();
            gv_GetCellData.DataBind();
        }
    }
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("StudentID"), new DataColumn("StudentName") });
        dt.Rows.Add("1", "Kishore");
        dt.Rows.Add("2", "SaiR");
        dt.Rows.Add("3", "Satyam");
        dt.Rows.Add("4", "Raghav");
        dt.Rows.Add("5", "Nag");
        dt.Rows.Add("6", "Satya");
        return dt;
    }
}


In VB.NET:
Imports System.Data

Partial Public Class SelectMultipleCellWithCtrl
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            gv_GetCellData.DataSource = GetData()
            gv_GetCellData.DataBind()
        End If
    End Sub
    Protected Function GetData() As DataTable
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("StudentID"), New DataColumn("StudentName")})
        dt.Rows.Add("1", "Kishore")
        dt.Rows.Add("2", "SaiR")
        dt.Rows.Add("3", "Satyam")
        dt.Rows.Add("4", "Raghav")
        dt.Rows.Add("5", "Nag")
        dt.Rows.Add("6", "Satya")
        Return dt
    End Function
End Class



The output of the above page as shown in below.

You can download the code by clicking on the below Download image.
                                                                             Previous Article>>JQuery:get GridView Cell Data
"If you like my blog or articles, you can appreciate by leaving your comments or Liking my Facebook pageAspdotnet-kishore, following on Google+ Aspdotnet-Kishore, Twitter  on AspdotnetKishore, Linked in Aspdotnet-Kishore, stumbling my posts on stumble upon and subscribing on  RSSfeed Aspdotnet-Kishore for free updates directly to your Email inbox . Watch my blog  for more articles."

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.