how can maintain the original format of my GridView layout so that the width does not change on searchplease helplt Page Language34vb34 AutoEventWireup34false34 CodeBehind34SearchStudentdataaspxvb34 Inherits34UNIFORMWEB2023SearchStudentdata34 gtltDOCTYPE htmlgtlthtml xmlns34httpwwww3org1999xhtml34gtlthead runat34server34gt lttitlegtlttitlegt ltscript src34Scriptsjquery183minjs34gtltscrip

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

Keep (Maintain) jQuery DataTable Column width on search using jQuery

makumbi

SOLVED CLOSED ACTIVE ANSWERED
User: makumbi
Posted: on Aug 27, 2022 05:36 AM
Forum: jQuery and jQuery Plugins
Answer: 1
Views: 2696
Sample Code: Download

how can maintain the original format of my GridView layout so that the width does not change on search

please help

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="SearchStudentdata.aspx.vb" Inherits="UNIFORMWEB2023.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>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>&nbsp;</td>
                    <td>
                        &nbsp;</td>
                    <td rowspan="2">&nbsp;</td>
                </tr>
                <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"  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:UNIFORMConnectionString %>" 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>

dharmend...

0 5

Reply
ANSWER
User: dharmendr
Replied: on Aug 29, 2022 12:23 AM
Modified: on Sep 01, 2022 03:09 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

For more details on column width refer below link.

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

Keep (Maintain) jQuery DataTable Column width on search using jQuery

Company

Explore

Follow us

Contact Us