Add Select and Delete to ASP.Net Gridview and apply Bootstrap DataTable Plugin

Hi Waghuldey,

Check this example. Now please take its reference and correct your code.

Database

For this example I have used of NorthWind database that you can download using the link given below.

Download Northwind Database

HTML

<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/1.10.9/css/dataTables.bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://cdn.datatables.net/responsive/1.0.7/css/responsive.bootstrap.min.css" />
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/responsive/1.0.7/js/dataTables.responsive.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.9/js/dataTables.bootstrap.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('[id*=gvCustomers]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
            "responsive": true, "sPaginationType": "full_numbers", "bPaginate": true, "bSort": true, "iDisplayLength": 2
        });
    });
</script>
<div>
    <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="false" class="table table-striped"
        Width="100%">
        <Columns>
            <asp:BoundField DataField="CustomerID" HeaderText="Customer ID" />
            <asp:BoundField DataField="ContactName" HeaderText="Name" />
            <asp:BoundField DataField="Country" HeaderText="Country" />
            <asp:TemplateField HeaderText="Select">
                <ItemTemplate>
                    <asp:Button Text="Select" runat="server" OnClick="Select" CssClass="btn btn-primary" />
                </ItemTemplate>
            </asp:TemplateField>
            <asp:TemplateField HeaderText="Delete">
                <ItemTemplate>
                    <asp:Button Text="Delete" runat="server" CssClass="btn btn-danger" OnClick="Delete"
                        OnClientClick="return confirm('Are you sure you want to delete?')" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>
</div>
<hr />
<div>
    <table>
        <tr>
            <td>
                Id
            </td>
            <td>
                <asp:Label ID="lblId" runat="server" CssClass="form-control" />
            </td>
        </tr>
        <tr>
            <td>
                Name
            </td>
            <td>
                <asp:TextBox ID="txtName" runat="server" CssClass="form-control" />
            </td>
        </tr>
        <tr>
            <td>
                Country
            </td>
            <td>
                <asp:TextBox ID="txtCountry" runat="server" CssClass="form-control" />
            </td>
        </tr>
    </table>
</div>

Namespaces

C#

using System.Data.SqlClient;
using System.Configuration;
using System.Data;

VB.Net

Imports System.Data.SqlClient
Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        BindGridView();
    }
}

private void BindGridView()
{
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand("SELECT TOP 3 CustomerID,ContactName,Country FROM Customers", con))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
            {
                cmd.CommandType = CommandType.Text;
                DataTable dt = new DataTable();
                sda.Fill(dt);
                gvCustomers.DataSource = dt;
                gvCustomers.DataBind();
            }
        }
    }
}

protected void Select(object sender, EventArgs e)
{
    GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
    lblId.Text = row.Cells[0].Text.Trim();
    txtName.Text = row.Cells[1].Text.Trim();
    txtCountry.Text = row.Cells[2].Text.Trim();
    // Do code for update operation.
    BindGridView();
}

protected void Delete(object sender, EventArgs e)
{
    GridViewRow row = (sender as Button).NamingContainer as GridViewRow;
    string customerId = row.Cells[0].Text.Trim();
    // Do code for delete operation.
    BindGridView();
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        BindGridView()
    End If
End Sub

Private Sub BindGridView()
    Dim constr As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Using con As SqlConnection = New SqlConnection(constr)
        Using cmd As SqlCommand = New SqlCommand("SELECT TOP 3 CustomerID,ContactName,Country FROM Customers", con)
            Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
                cmd.CommandType = CommandType.Text
                Dim dt As DataTable = New DataTable()
                sda.Fill(dt)
                gvCustomers.DataSource = dt
                gvCustomers.DataBind()
            End Using
        End Using
    End Using
End Sub

Protected Sub [Select](ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast((TryCast(sender, Button)).NamingContainer, GridViewRow)
    lblId.Text = row.Cells(0).Text.Trim()
    txtName.Text = row.Cells(1).Text.Trim()
    txtCountry.Text = row.Cells(2).Text.Trim()
    ' Do code for update operation.
    BindGridView()
End Sub

Protected Sub Delete(ByVal sender As Object, ByVal e As EventArgs)
    Dim row As GridViewRow = TryCast((TryCast(sender, Button)).NamingContainer, GridViewRow)
    Dim customerId As String = row.Cells(0).Text.Trim()
    ' Do code for delete operation.
    BindGridView()
End Sub

Screenshot