Hi aspvijay04,
Check this example. Now please take its reference and correct your code.
HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.css" />
<script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.13/datatables.min.js"></script>
<script type="text/javascript">
$(function () {
$('[id*=GridView1]').prepend($("<thead></thead>").append($(this).find("tr:first"))).DataTable({
'aoColumnDefs': [{
'bSortable': false,
'aTargets': [0] /* index of the column which you want to disable sorting*/
}],
'iDisplayLength': 2
});
});
</script>
<div>
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false" CssClass="w3-table-all w3-hoverable"
HeaderStyle-BackColor="#FFCCCC" Width="100%" ClientIDMode="Static">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="checkAll" runat="server" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField Visible="false">
<ItemTemplate>
<asp:Label ID="lblaid" runat="server" Text='<%#Eval("aid") %>'> </asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Action Point">
<ItemTemplate>
<asp:Label ID="lblagenda" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("agenda_name") %>'>
</asp:Label>
</ItemTemplate>
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Agenda No.">
<ItemTemplate>
<asp:Label ID="lblfid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("a_id") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblghmail" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("gh_mail") %>'>
</asp:Label>
</ItemTemplate>
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Group Name">
<ItemTemplate>
<asp:Label ID="lblgname" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("group_name") %>'>
</asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblgid" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("gh_id") %>'>
</asp:Label>
</ItemTemplate>
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
HeaderText="Status">
<ItemTemplate>
<asp:Label ID="lblstatus" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("agenda_status") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblduedate" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("due_date") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblreminder" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("REMINDER_DATE") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:TemplateField HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px" HeaderStyle-ForeColor="Black"
Visible="false">
<ItemTemplate>
<asp:Label ID="lblpo" runat="server" Font-Bold="True" Font-Names="Arial" Font-Size="12px"
Text='<%#Eval("A_PO") %>'>
</asp:Label>
</ItemTemplate>
<ControlStyle Width="100px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
</asp:TemplateField>
<asp:BoundField DataField="mdate" HeaderStyle-Font-Names="Arial" HeaderStyle-Font-Size="12px"
HeaderStyle-ForeColor="Black" HeaderText="Meeting Date" ItemStyle-Font-Bold="True"
ItemStyle-Font-Names="Arial" ItemStyle-Font-Size="12px" DataFormatString="{0:dd/MMM/yyyy}">
<ControlStyle Width="60px" />
<HeaderStyle Font-Names="Arial" Font-Size="12px" ForeColor="white" />
<ItemStyle Font-Bold="True" Font-Names="Arial" Font-Size="12px" />
</asp:BoundField>
</Columns>
<HeaderStyle BackColor="#4dc3ff" />
<EmptyDataTemplate>
No Record Available
</EmptyDataTemplate>
</asp:GridView>
</div>
Code
C#
using System.Data;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
DataTable dt = new DataTable();
dt.Columns.AddRange(new DataColumn[]
{
new DataColumn("aid", typeof(int)),
new DataColumn("agenda_name", typeof(string)),
new DataColumn("a_id",typeof(string)),
new DataColumn("gh_mail", typeof(string)),
new DataColumn("group_name", typeof(string)),
new DataColumn("gh_id", typeof(string)),
new DataColumn("agenda_status", typeof(string)),
new DataColumn("due_date", typeof(DateTime)),
new DataColumn("REMINDER_DATE", typeof(DateTime)),
new DataColumn("A_PO", typeof(string)),
new DataColumn("mdate", typeof(DateTime))
});
dt.Rows.Add(1, "Name 1", "1", "test1@test.com", "Group 1", "1", "Active", "05/09/2018", "05/09/2018", "1", "05/09/2018");
dt.Rows.Add(2, "Name 2", "2", "test2@test.com", "Group 2", "2", "Inactive", "05/09/2018", "05/09/2018", "2", "05/09/2018");
dt.Rows.Add(3, "Name 3", "3", "test3@test.com", "Group 3", "3", "inactive", "05/09/2018", "05/09/2018", "3", "05/09/2018");
dt.Rows.Add(4, "Name 4", "4", "test4@test.com", "Group 4", "4", "Active", "05/09/2018", "05/09/2018", "4", "05/09/2018");
GridView1.DataSource = dt;
GridView1.DataBind();
}
}
VB.Net
Imports System.Data
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
If Not IsPostBack Then
Dim dt As DataTable = New DataTable()
dt.Columns.AddRange(New DataColumn() {New DataColumn("aid", GetType(Integer)), New DataColumn("agenda_name", GetType(String)), New DataColumn("a_id", GetType(String)), New DataColumn("gh_mail", GetType(String)), New DataColumn("group_name", GetType(String)), New DataColumn("gh_id", GetType(String)), New DataColumn("agenda_status", GetType(String)), New DataColumn("due_date", GetType(DateTime)), New DataColumn("REMINDER_DATE", GetType(DateTime)), New DataColumn("A_PO", GetType(String)), New DataColumn("mdate", GetType(DateTime))})
dt.Rows.Add(1, "Name 1", "1", "test1@test.com", "Group 1", "1", "Active", "05/09/2018", "05/09/2018", "1", "05/09/2018")
dt.Rows.Add(2, "Name 2", "2", "test2@test.com", "Group 2", "2", "Inactive", "05/09/2018", "05/09/2018", "2", "05/09/2018")
dt.Rows.Add(3, "Name 3", "3", "test3@test.com", "Group 3", "3", "inactive", "05/09/2018", "05/09/2018", "3", "05/09/2018")
dt.Rows.Add(4, "Name 4", "4", "test4@test.com", "Group 4", "4", "Active", "05/09/2018", "05/09/2018", "4", "05/09/2018")
GridView1.DataSource = dt
GridView1.DataBind()
End If
End Sub
Screenshot
