Hi makumbi,
Please refer below sample code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
HTML
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
<style type="text/css">
body { font-family: Arial; font-size: 10pt; }
</style>
<div>
</div>
<div class="container">
<div class="table-responsive">
<asp:GridView ID="GridView1" AutoGenerateColumns="False" runat="server" CssClass="table table-bordered table-hover table-striped thead-dark GridCustomers"
ShowFooter="True" Height="246px">
<Columns>
<asp:TemplateField HeaderText="Customer ID">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("CustomerID") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="admno" runat="server" Text='<%# Bind("CustomerID") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Company Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("CompanyName") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Fname" runat="server" Text='<%# Bind("CompanyName") %>' Width="216px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Name" runat="server" Text='<%# Bind("CompanyName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="ClassdllF" runat="server">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>P1</asp:ListItem>
<asp:ListItem>P2</asp:ListItem>
<asp:ListItem>P3</asp:ListItem>
<asp:ListItem>P4</asp:ListItem>
<asp:ListItem>P5</asp:ListItem>
<asp:ListItem>P6</asp:ListItem>
<asp:ListItem>P7</asp:ListItem>
<asp:ListItem>PRE</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Class" runat="server" Text='<%# Bind("ContactName") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Contact Title">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Stream" runat="server" Text='<%# Bind("ContactTitle") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="City">
<EditItemTemplate>
<asp:TextBox ID="TextBox8" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="DropDownList2" runat="server">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>UAE</asp:ListItem>
<asp:ListItem>USA</asp:ListItem>
<asp:ListItem>Berlin</asp:ListItem>
<asp:ListItem>Russia</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Sex" runat="server" Text='<%# Bind("City") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Address">
<EditItemTemplate>
<asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("Address") %>'></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="Button1" runat="server" Text="AddNew" CssClass="btn btn-primary"
Height="25px" OnClick="Button1_Click" />
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Stdype" runat="server" Text='<%# Bind("Address") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="PostalCode">
<EditItemTemplate>
<asp:TextBox ID="TextBox7" runat="server" Text='<%# Bind("PostalCode") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="House" runat="server" Text='<%# Bind("PostalCode") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Country">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
</EditItemTemplate>
<ItemTemplate>
<asp:Label ID="Rclass" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<ItemTemplate>
<asp:LinkButton ID="lnkEdit" href="#" data-target="#MyPopup" data-toggle="modal"
runat="server">Edit</asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Pay">
<ItemTemplate>
<asp:LinkButton ID="lnkBtnEdit" runat="server" Text="Pay Now" CssClass="btn btn-info"
OnClick="Display"></asp:LinkButton>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</div>
</div>
<div id="MyPopup" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">
Update Payments
</h4>
</div>
<div class="modal-body">
<table class="table table-bordered table-hover table-striped thead-dark">
<tr>
<td>
admno
</td>
<td>
<asp:TextBox runat="server" ID="admno" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
<asp:TextBox runat="server" ID="txtName" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Class
</td>
<td>
<asp:TextBox runat="server" ID="txtCountry" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Stream
</td>
<td>
<asp:DropDownList ID="Streamddl" runat="server" DataTextField="stream" DataValueField="stream"
CssClass="dropdown" AutoPostBack="true" OnSelectedIndexChanged="OnUpdate2000">
<asp:ListItem Text="USA" Value="1"></asp:ListItem>
<asp:ListItem Text="UK" Value="2"></asp:ListItem>
<asp:ListItem Text="LONDON" Value="3"></asp:ListItem>
<asp:ListItem Text="PARIS" Value="4"></asp:ListItem>
</asp:DropDownList>
<%--<asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:UNIFORMConnectionString %>"
SelectCommand="SELECT stream FROM streamdata GROUP BY stream"></asp:SqlDataSource>--%>
</td>
</tr>
<tr>
<td>
Pay Date
</td>
<td>
<asp:TextBox runat="server" ID="TDate" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Amount
</td>
<td>
<asp:TextBox runat="server" ID="Pay" CssClass="form-control" />
</td>
</tr>
<tr>
<td>
Reciept No/ Bank Slip No
</td>
<td>
<asp:TextBox runat="server" ID="Reciept" CssClass="form-control" />
</td>
</tr>
<td>
Details
</td>
<td>
<asp:TextBox runat="server" ID="Comment" CssClass="form-control" />
</td>
<tr>
<td>
Sex
</td>
<td>
<asp:DropDownList ID="Sexdll" runat="server" CssClass="form-control" Height="30px"
Width="125px">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>MALE</asp:ListItem>
<asp:ListItem>FEMALE</asp:ListItem>
</asp:DropDownList>
</td>
<asp:Panel ID="Panel1" runat="server" Width="261px">
<tr>
<td>
Transaction Details
</td>
<td>
<asp:DropDownList ID="DropDownList1" runat="server" CssClass="form-control" Height="30px"
Width="125px" OnSelectedIndexChanged="Colourdll2000" AutoPostBack="true">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>CASH</asp:ListItem>
<asp:ListItem>TROPICAL</asp:ListItem>
<asp:ListItem>DFCU BANK</asp:ListItem>
</asp:DropDownList>
</td>
<td>
House
</td>
<td>
<asp:DropDownList ID="Colourdll" runat="server" CssClass="form-control">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>Red</asp:ListItem>
<asp:ListItem>Green</asp:ListItem>
<asp:ListItem>Blue</asp:ListItem>
<asp:ListItem>Yellow</asp:ListItem>
</asp:DropDownList>
</td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</asp:Panel>
<tr>
<td>
<asp:TextBox runat="server" ID="Sexd" CssClass="form-control" Visible="false" />
</td>
<td>
<asp:TextBox runat="server" ID="Rclassd" CssClass="form-control" Visible="false" />
</td>
<td>
<asp:TextBox runat="server" ID="Stdype" CssClass="form-control" Visible="false" />
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<asp:Button ID="btnUpdate" Text="Update" runat="server" CssClass="btn btn-primary "
OnClick="OnUpdate" />
<input type="button" value="Close" class="btn btn-danger" data-dismiss="modal" />
</div>
</div>
</div>
</div>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.20/css/jquery.dataTables.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="../BootStrap/Css/BootStrap3.3.2.css" />
<script type="text/javascript" src="../BootStrap/Jquery3.4.1.js"></script>
<script type="text/javascript" src="../BootStrap/Bootstrap3.3.2.min.js"></script>
<script type="text/javascript" src="../BootStrap/Jquery.Datatables.1.10.20.js"></script>
<link href="../BootStrap/Css/1.10.20.jquery.dataTables.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../Scripts/inputmask.min.js"></script>
<script type="text/javascript" src="../Scripts/inputmask.date.extensions.min.js"></script>
<script type="text/javascript" src="../Scripts/inputmask.extensions.min.js"></script>
<link rel="stylesheet" type="text/css" href="../Scripts/inputmask.css" />
<script type="text/javascript">
$(function () {
var inputmask = new Inputmask("99/99/9999", { placeholder: 'dd/mm/yyyy' });
inputmask.mask($('[id*=TDate]'));
$(".GridCustomers").DataTable({
bLengthChange: true,
lengthMenu: [[10, 15, -1], [10, 15, "All"]],
bFilter: true,
bSort: true,
bPaginate: true
});
$("[id*=lnkEdit]").click(function () {
$('[id*=admno]').val($(this).closest('tr').find('td').eq(0).html());
$('[id*=txtName]').val($(this).closest('tr').find('td').eq(1).html());
$('[id*=txtCountry]').val($(this).closest('tr').find('td').eq(2).html());
$('[id*=Streamddl]').val($(this).closest('tr').find('td').eq(3).html());
$('#MyPopup').modal('show');
return false;
});
});
</script>
<script type='text/javascript'>
function openModal() {
$('[id*=MyPopup]').modal('show');
}
</script>
</asp:Content>
Code
protected void Page_Load(object sender, EventArgs e)
{
DataTable dt = new DataTable();
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
string query = "SELECT TOP 3 * FROM Customers";
using(SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(query,con))
{
sda.Fill(dt);
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
}
Screenshot
