Hi makumbi,
Please refer below sample.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript">
function Capital(txt) {
txt.value = txt.value.replace(/^\s+/, '').toUpperCase();
}
</script>
<style type="text/css">
.dataTables_scrollHead {
width: 100% !important;
}
.dataTables_scrollHeadInner {
width: 100% !important;
}
.dataTables_scrollBody {
width: 100% !important;
}
.auto-style1 {
height: 20px;
}
.auto-style2 {
color: #0066CC;
}
</style>
</head>
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" />
<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.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" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
<form id="form1" runat="server">
Enter Name:
<input type="text" value=" " onkeyup="Capital(this)" />
<div>
<table class="auto-style1">
<tr>
<td><strong>
<asp:Button ID="Button3" runat="server" CssClass="auto-style2" Text="Back To Selection Menu" Width="156px" />
</strong></td>
<td rowspan="2"> </td>
</tr>
<tr>
<td>
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:GridView ID="StudentGrid" runat="server" AutoGenerateColumns="False" CellSpacing="1" ClientIDMode="Static" EnableSortingAndPagingCallbacks="True" ShowFooter="True" Width="600px" PageSize="30">
<Columns>
<asp:ButtonField CommandName="Staff" HeaderText="Staff" Text="Staff" />
<asp:TemplateField HeaderText="Prno" SortExpression="account">
<EditItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Name") %>' onkeyup="Capital(this)"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:Button ID="Button2" runat="server" Text="AddNew" />
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Admno" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Patient Name" SortExpression="Name">
<EditItemTemplate>
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Name") %>' Height="18px" Width="261px"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="Namesf" runat="server" Width="263px" onkeyup="Capital(this)"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label1" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Age">
<FooterTemplate>
<asp:TextBox ID="FAge" runat="server" Width="29px"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblCategory2" runat="server" Text='<%# Bind("CustomerId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="PType">
<EditItemTemplate>
<asp:TextBox ID="TextBox5" runat="server" onkeyup="Capital(this)"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:DropDownList ID="DdlPtype" runat="server">
<asp:ListItem>None</asp:ListItem>
<asp:ListItem>New</asp:ListItem>
<asp:ListItem>Old</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("CustomerId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Phone">
<FooterTemplate>
<asp:TextBox ID="FPhone" runat="server"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblCategory3" runat="server" Text='<%# Eval("CustomerId") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Addresss" SortExpression="address">
<EditItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Name") %>' onkeyup="Capital(this)"></asp:TextBox>
</EditItemTemplate>
<FooterTemplate>
<asp:TextBox ID="FAddress" runat="server" onkeyup="Capital(this)"></asp:TextBox>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Sex">
<FooterTemplate>
<asp:DropDownList ID="ddlSexF" runat="server" DataTextField="Name" DataValueField="Name">
<asp:ListItem>NONE</asp:ListItem>
<asp:ListItem>MALE</asp:ListItem>
<asp:ListItem>FEMALE</asp:ListItem>
</asp:DropDownList>
</FooterTemplate>
<ItemTemplate>
<asp:Label ID="lblCategory4" runat="server" Text='<%# Eval("Name") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="Name" HeaderText="DateTime" DataFormatString="{0:dd/MM/yyyy}" />
<asp:ButtonField CommandName="Payment" HeaderText="Payment" Text="Paydetails" />
</Columns>
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$('[id$=StudentGrid]').prepend($("<thead></thead>").append($('[id$=StudentGrid]').find("tr:first"))).DataTable({
"responsive": true,
"sPaginationType": "full_numbers"
});
}
});
};
</script>
</table>
</div>
</form>
</body>
</html>
Namespace
C#
using System.Data;
using System.Data.SqlClient;
using System.Configuration;
VB.Net
Imports System.Data
Imports System.Data.SqlClient
Imports System.Configuration
Code
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this.BindGrid();
}
}
private void BindGrid()
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(conString))
{
using (SqlCommand cmd = new SqlCommand("SELECT CustomerId, Name, Country FROM Customers", con))
{
using (SqlDataAdapter sda = new SqlDataAdapter(cmd))
{
using (DataTable dt = new DataTable())
{
sda.Fill(dt);
StudentGrid.DataSource = dt;
StudentGrid.DataBind();
}
}
}
}
}
VB.Net
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not Me.IsPostBack Then
Me.BindGrid()
End If
End Sub
Private Sub BindGrid()
Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
Using con As SqlConnection = New SqlConnection(conString)
Using cmd As SqlCommand = New SqlCommand("SELECT CustomerId, Name, Country FROM Customers", con)
Using sda As SqlDataAdapter = New SqlDataAdapter(cmd)
Using dt As DataTable = New DataTable()
sda.Fill(dt)
StudentGrid.DataSource = dt
StudentGrid.DataBind()
End Using
End Using
End Using
End Using
End Sub
Screenshot
