Here is my current DataTable which i am failing to modify to have fixed columnsPlease helplt Page Language34vb34 AutoEventWireup34false34 CodeBehind34SearchStudentdataaspxvb34 Inherits34SulaSignarSearchStudentdata34 gtltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34Scriptsjquery183minjs34gtltscriptgt ltscript src

Hi makumbiPlease refer below sampleDatabaseFor this example I have used of Northwind database that you can download using the link given belowDownload Northwind DatabaseHTMLltdivgt lttable class34autostyle134gt lttrgt lttd colspan34534gt ltaspUpdatePanel ID34UpdatePanel234 runat34server34gt ltContentTemplategt ltaspScriptManager ID34ScriptManager134 runat34server34gt ltaspScriptManagergt ltaspGridView ID34gvCustomers34 runat34server34 AutoGenerateColumns34False34 CellSpacing34134 ClientIDMode34Static34 EnableSortingAndPagingCallbacks34True34 ShowFooter34True34 Width34600px34gt ltColumnsgt ltaspButtonField CommandName34Staf

ASP.Net GridView with Fixed Header using jQuery DataTable Plugin

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Aug 29, 2022 10:45 PM
Forum: Data Controls
Answer: 1
Views: 3392
Sample Code: Download

Here is my current DataTable which i am failing to modify to have fixed columns.

Please help

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SearchStudentdata.aspx.vb" Inherits="SulaSignar.SearchStudentdata" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="../Scripts/jquery-1.8.3.min.js"></script>
    <script src="../Datatables/datatables.js"></script>
    <link href="../Datatables/datatables.min.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript">
        $(function () {
            $("[id*=StudentGrid]").DataTable(
                {
                    bLengthChange: true,
                    lengthMenu: [[15, 20, -1], [15, 20, "All"]],
                    bFilter: true,
                    bSort: true,
                    bPaginate: true
                });
        });
    </script>
</head> 
<body>
    <form id="form1" runat="server">
        <div>
            <table class="auto-style1">
                <tr>
                    <td colspan="4">
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <asp:GridView ID="StudentGrid" runat="server" AutoGenerateColumns="False"   ItemStyle-Width="Auto" CellSpacing="1" ClientIDMode="Static" EnableSortingAndPagingCallbacks="True" Height="124px" ShowFooter="True" Width="541px">
            <Columns>
                    <asp:ButtonField CommandName="Staff" HeaderText="Staff" Text="Staff" />
                <asp:TemplateField HeaderText="Prno" SortExpression="account">
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("admno") %>'></asp:TextBox>
                    </EditItemTemplate>
                    <FooterTemplate>
                        <asp:Button ID="Button2" runat="server" OnClick="Button2_Click1" Text="AddNew" />
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="Admno" runat="server" Text='<%# Bind("admno") %>'></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"></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("Age") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                    <asp:TemplateField HeaderText="PType">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox5" runat="server"></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("STDTYPE") %>'></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("Phone") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                    <asp:TemplateField HeaderText="Addresss" SortExpression="address">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("address") %>'></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="FAddress" runat="server"></asp:TextBox>
                        </FooterTemplate>
                        <ItemTemplate>
                            <asp:Label ID="Label2" runat="server" Text='<%# Bind("address") %>'></asp:Label>
                        </ItemTemplate>
                    </asp:TemplateField>
                    <asp:TemplateField HeaderText="Date" SortExpression="Dates">
                        <EditItemTemplate>
                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Dates") %>' Height="16px" Width="70px"></asp:TextBox>
                        </EditItemTemplate>
                        <FooterTemplate>
                            <asp:TextBox ID="FDates" runat="server" Width="66px"></asp:TextBox>
                        </FooterTemplate>
                    </asp:TemplateField>
                <asp:TemplateField HeaderText="Sex">
                    <FooterTemplate>
                        <asp:DropDownList ID="ddlSexF" runat="server" DataSourceID="SqlDataSource1SEXD" DataTextField="Sex" DataValueField="Sex" >
                        </asp:DropDownList>
                        <asp:SqlDataSource ID="SqlDataSource1SEXD" runat="server" ConnectionString="<%$ ConnectionStrings:TRIALSIGNARConnectionString %>" SelectCommand="SELECT DISTINCT Sex FROM Student"></asp:SqlDataSource>
                    </FooterTemplate>
                    <ItemTemplate>
                        <asp:Label ID="lblCategory4" runat="server" Text='<%# Eval("Sex") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                    <asp:ButtonField CommandName="Payment" HeaderText="Payment" Text="Paydetails" />            
            </Columns>
        </asp:GridView>
    </ContentTemplate>
</asp:UpdatePanel>
                    </td>
                </tr>
                <tr>
                    <td colspan="5">
                        &nbsp;</td>
                </tr>
            </table>
        </div>
    </form>
</body>
</html>

here is the example i was look at

https://datatables.net/extensions/fixedcolumns/examples/initialisation/size_fixed.html

KasimA

0 2

Reply
ANSWER
User: KasimA
Replied: on Aug 30, 2022 01:56 AM
Modified: on Aug 30, 2022 01:58 AM
Report

Hi makumbi,

Please refer below sample.

Database

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

Download Northwind Database

HTML

<div>
    <table class="auto-style1">       
        <tr>
            <td colspan="5">
                <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                    <ContentTemplate>
                        <asp:ScriptManager ID="ScriptManager1" runat="server">
                        </asp:ScriptManager>
                        <asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" CellSpacing="1" ClientIDMode="Static"
                            EnableSortingAndPagingCallbacks="True" ShowFooter="True" Width="600px">
                            <Columns>
                                <asp:ButtonField CommandName="Staff" HeaderText="Staff" Text="Staff" />
                                <asp:TemplateField HeaderText="Name">
                                    <FooterTemplate>
                                        <asp:TextBox ID="txtName" runat="server" Text='<%# Bind("ContactName") %>'></asp:TextBox>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblName" runat="server" Text='<%# Bind("ContactName") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="City">
                                    <FooterTemplate>
                                        <asp:TextBox ID="txtCity" runat="server" Text='<%# Bind("City") %>'></asp:TextBox>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblCity" runat="server" Text='<%# Bind("City") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Country">
                                    <FooterTemplate>
                                        <asp:TextBox ID="txtCountry" runat="server" Text='<%# Bind("Country") %>'></asp:TextBox>
                                    </FooterTemplate>
                                    <ItemTemplate>
                                        <asp:Label ID="lblCountry" runat="server" Text='<%# Bind("Country") %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:ButtonField CommandName="Payment" HeaderText="Payment" Text="View" />
                            </Columns>
                        </asp:GridView>
                    </ContentTemplate>
                </asp:UpdatePanel>
            </td>
        </tr>
    </table>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.12.1/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/fixedcolumns/4.1.0/js/dataTables.fixedColumns.min.js"></script>
<link href="https://cdn.datatables.net/1.12.1/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<link href="https://cdn.datatables.net/fixedcolumns/4.1.0/css/fixedColumns.dataTables.min.css" rel="stylesheet" type="text/css" />
<style type="text/css">
    .auto-style1 { width: 600px; border-style: solid; border-width: 2px; }
    .dataTables_scrollHead { width: 600px !important; }
    .dataTables_scrollHeadInner { width: 600px !important; }
    .dataTables_scrollBody { width: 600px !important; }
</style>
<script type="text/javascript">
    $(function () {
        $('#gvCustomers tfoot tr').appendTo('#gvCustomers thead');
        $('#gvCustomers').removeAttr('width').DataTable({
            bFilter: true,
            bSort: true,
            scrollY: "250px",
            scrollX: true,
            scrollCollapse: true,
            paging: false,
            fixedColumns: false,
            orderCellsTop: true
        });
    });
</script>

Namespaces

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

VB.Net

Imports System.Data
Imports System.Configuration
Imports System.Data.SqlClient

Code

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        string query = "SELECT * FROM Customers";
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlCommand cmd = new SqlCommand(query))
            {
                using (SqlDataAdapter sda = new SqlDataAdapter())
                {
                    cmd.Connection = con;
                    sda.SelectCommand = cmd;
                    using (DataTable dt = new DataTable())
                    {
                        sda.Fill(dt);
                        gvCustomers.DataSource = dt;
                        gvCustomers.DataBind();
                        gvCustomers.UseAccessibleHeader = true;
                        gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader;
                        gvCustomers.FooterRow.TableSection = TableRowSection.TableFooter;
                    }
                }
            }
        }
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim conString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
        Dim query As String = "SELECT * FROM Customers"
        Using con As SqlConnection = New SqlConnection(conString)
            Using cmd As SqlCommand = New SqlCommand(query)
                Using sda As SqlDataAdapter = New SqlDataAdapter()
                    cmd.Connection = con
                    sda.SelectCommand = cmd
                    Using dt As DataTable = New DataTable()
                        sda.Fill(dt)
                        gvCustomers.DataSource = dt
                        gvCustomers.DataBind()
                        gvCustomers.UseAccessibleHeader = True
                        gvCustomers.HeaderRow.TableSection = TableRowSection.TableHeader
                        gvCustomers.FooterRow.TableSection = TableRowSection.TableFooter
                    End Using
                End Using
            End Using
        End Using
    End If
End Sub

Screenshot

ASP.Net GridView with Fixed Header using jQuery DataTable Plugin

Company

Explore

Follow us

Contact Us