Tuesday, 1 January 2013

JQuery:Remove Multiple Rows in GridView With Ctrl Key in ASP.NET using C#/VB.NET

JQuery:Remove Multiple Rows in GridView With Ctrl Key in ASP.NET using C#/VB.NET
ASP.NET:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>JQuery:Remove Multiple Rows in GridView With Ctrl Key in ASP.NET using C#/VB.NET</title>
    <style type="text/css">

        .selected
        {
            background-color: Red;
        }
    </style>
    <script src="//code.jquery.com/jquery-1.10.2.js" type ="text/javascript"></script>
    <script type="text/javascript" language="javascript">
       
        $(document).ready(function () {
            $("#gv_DeleteRows tr").each(function (index) {
                $(this).attr("id", "tr" + index);
            });
        });
        $(document).ready(function () {
            var string2 = "";
            var ids = [];
            $("#gv_DeleteRows tr").click(function (e) {
                var string1 = "";
                $(this).css("cursor", "pointer");
                if ((ids.length > 0) && !(e.ctrlKey)) {
                    $("#gv_DeleteRows tr").removeAttr("class");
                    var selTD = $(e.target).closest("tr")
                    $("#lblSelected").empty();
                    selTD.addClass("selected");
                    $("#lblSelected").append($(e.target).closest("tr").text());
                    string2 = "";
                    string2 = string2 + $(this).attr('id') + ",";
                }
                if ((e.ctrlKey) || ids.length == 0) {
                    var selTD = $(e.target).closest("tr");
                    if ($(e.target).closest("tr").attr("class") != "selected") {
                        selTD.removeAttr("style");
                        selTD.addClass("selected");                   
                        $("#lblSelected").append(selTD.text());
                        string2 = string2 + $(this).attr('id') + ",";
                        ids.push($(this).val());
                    }
                    else {
                        selTD.removeAttr("class");
                        string1 = $("#lblSelected").text();
                        $("#lblSelected").empty();
                        string1 = string1.replace(selTD.text(), " ");
                        $("#lblSelected").append(string1);
                        ids.push($(this).val());
                    }
                }
            });
            $('html').keyup(function (e) {
                if (e.keyCode == 46) {
                    var arr = string2.split(',');
                    for (i = 0; i < arr.length - 1; i++) {
                        $("#" + arr[i]).remove();
                        $("#lblSelected").empty();
                    }
                }
            })
        });
      

    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:GridView ID="gv_DeleteRows" runat="server" BackColor="White" BorderColor="#CC9966"
            BorderStyle="Solid" BorderWidth="1px" CellPadding="4" Font-Names="Georgia" Font-Size="Small"
            Width="375px">
            <%--<AlternatingRowStyle BackColor="Gray" />--%>
            <FooterStyle BackColor="Tan" />           
            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />
            <HeaderStyle BackColor="#990000" Font-Bold="True" ForeColor="#FFFFCC" />
        </asp:GridView>
    </div>
    <div>
        Selected Row value is :
        <asp:Label ID="lblSelected" runat="server" ForeColor="Red"></asp:Label></div>
        </form>
</body>
</html>
In C#:
using System.Data;

public partial class DeleteMultipleRowsCtrl : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            gv_DeleteRows.DataSource = GetData();
            gv_DeleteRows.DataBind();
        }
    }
    protected DataTable GetData()
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2] { new DataColumn("PlayerID"), new DataColumn("PlayerName") });
        dt.Rows.Add("1", "Sachin");
        dt.Rows.Add("2", "Dhoni");
        dt.Rows.Add("3", "Kohli");
        dt.Rows.Add("4", "Laxman");
        dt.Rows.Add("5", "Ganguly");
        dt.Rows.Add("6", "Sehwag");
        dt.Rows.Add("7", "Dravid");
        dt.Rows.Add("8", "Kapildev");
        dt.Rows.Add("9", "Yuvraj");
        return dt;
    }
}
In VB.NET:
Imports System.Data

Partial Public Class DeleteMultipleRowsCtrl
    Inherits System.Web.UI.Page
    Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
        If Not IsPostBack Then
            gv_DeleteRows.DataSource = GetData()
            gv_DeleteRows.DataBind()
        End If
    End Sub
    Protected Function GetData() As DataTable
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(1) {New DataColumn("PlayerID"), New DataColumn("PlayerName")})
        dt.Rows.Add("1", "Sachin")
        dt.Rows.Add("2", "Dhoni")
        dt.Rows.Add("3", "Kohli")
        dt.Rows.Add("4", "Laxman")
        dt.Rows.Add("5", "Ganguly")
        dt.Rows.Add("6", "Sehwag")
        dt.Rows.Add("7", "Dravid")
        dt.Rows.Add("8", "Kapildev")
        dt.Rows.Add("9", "Yuvraj")
        Return dt
    End Function
End Class

Output:




Posted by

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)
© 2012-2018 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.