I'm using gridview with freezing header in ASP.NET application.
But, freezing is not showing while running the application.
what is the issue in the below code...?
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Test_Pagination.aspx.cs" Inherits="Test_Pagination" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Test - Grid Freeze</title>
<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 () {
$('#gvCustomer tfoot tr').appendTo('#gvCustomer thead');
$('#gvCustomer').removeAttr('width').DataTable({
bFilter: true,
bSort: true,
scrollY: "150px",
scrollCollapse: true,
paging: false,
fixedColumns: false,
orderCellsTop: true
});
});
</script>
<%-- //********* Script for myModel - Modal Popup ******************//--%>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<%--<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>--%>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type='text/javascript'>
function openModal() {
$('[id*=PopModal]').modal('show');
}
</script>
<%-- //********* Script for myModel - Modal Popup ******************//--%>
<%-- //***** for search dropdown stylesheet and js files *************--%>
<%--<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />--%>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/css/bootstrap-select.css" />
<%--<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>--%>
<%--<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>--%>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.1/js/bootstrap-select.js"></script>
<script type="text/javascript">
$(function () {
$("[id*=drpEmployee]").selectpicker();
});
//On UpdatePanel Refresh
var prm = Sys.WebForms.PageRequestManager.getInstance();
if (prm != null) {
prm.add_endRequest(function (sender, e) {
if (sender._postBackSettings.panelsToUpdate != null) {
$("[id*=drpEmployee]").selectpicker();
}
});
};
</script>
<script type="text/javascript">
window.onload = function () {
var grid = document.getElementById('<%= gvCustomer.ClientID %>');
var tbody = grid.getElementsByTagName("tbody")[0]; //gets the first and only tbody
var firstTr = tbody.getElementsByTagName("tr")[0]; //gets the first tr, hopefully contains the th's
tbody.removeChild(firstTr); //remove tr's from table
var newTh = document.createElement('thead'); //creates thead
newTh.appendChild(firstTr); //puts ths in thead
grid.insertBefore(newTh, tbody); //puts thead behore tbody
}
</script>
<script type="text/javascript">
function SelectAll(headerCheckBox) {
//Get the reference of GridView.
var GridView = document.getElementById("gvCustomer");
//Loop through all GridView Rows except first row.
for (var i = 1; i < GridView.rows.length; i++) {
//Reference the CheckBox.
var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
checkBox.checked = headerCheckBox.checked;
}
}
</script>
<script type="text/javascript">
function SelectOne(chk) {
//Get the reference of GridView.
var GridView = chk.parentNode.parentNode.parentNode.parentNode;
//Reference the Header CheckBox.
var headerCheckBox = GridView.rows[0].cells[0].getElementsByTagName("input")[0];;
var checked = true;
//Loop through all GridView Rows.
for (var i = 1; i < GridView.rows.length; i++) {
//Reference the CheckBox.
var checkBox = GridView.rows[i].cells[0].getElementsByTagName("input")[0];
if (!checkBox.checked) {
checked = false;
break;
}
}
headerCheckBox.checked = checked;
};
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="modal fade" id="PopModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
×</button>
<h4 class="modal-title">Invoice Details</h4>
</div>
<div class="modal-body">
<div class="col-lg-12 col-sm-12 col-md-12 col-xs-12">
<div class="form-group">
<asp:Label ID="Label1" runat="server" CssClass="tdLabel" Text="File Name :"></asp:Label>
<asp:Label ID="lblFileName" CssClass="tdLabel" runat="server" Text="Label"></asp:Label>
</div>
<div class="form-group">
<asp:Label ID="lblid" runat="server" Text=""></asp:Label>
</div>
<div class="form-group">
<iframe id="iframe" runat="server" width="500" height="500"></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
<asp:ScriptManager ID="ScrMgr2" runat="server"></asp:ScriptManager>
<asp:UpdatePanel runat="server" ID="UpdatePanel1">
<ContentTemplate>
<table style="font-family: 'Blender Pro'; font-weight: bold; font-size: 16px; width: 100%; color: #22505F;">
<tr>
<td>
<asp:Label ID="lblDispName" runat="server" Text="Employee Name :"></asp:Label>
<asp:DropDownList ID="drpEmployee" runat="server"
AutoPostBack="true" class="selectpicker" data-live-search="true">
</asp:DropDownList>
</td>
<td align="left" style="width: 40%">
<asp:Button ID="btnSearch" runat="server" CssClass="btnGenerate" Text="SEARCH" OnClick="btnSearch_Click" />
<asp:Button ID="btnClear" runat="server" CssClass="btnGenerate" Text="CLEAR" OnClick="btnClear_Click" />
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
<div id="dvGrid" style="width: 100%">
<asp:UpdatePanel runat="server" ID="UpdatePanel2">
<ContentTemplate>
<asp:GridView ID="gvCustomer" Width="100%" AutoGenerateColumns="False" runat="server"
Font-Size="12px"
DataKeyNames="Id">
<AlternatingRowStyle BackColor="white" />
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="chkAll" runat="server" onclick="SelectAll(this)" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="chk" runat="server" onclick="SelectOne(this)" />
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="ID">
<ItemTemplate>
<asp:Label ID="Id" runat="server" Text='<%# Eval("Id") %>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
<HeaderTemplate>
<label style="text-align: center; display: block;">Sl No.</label>
</HeaderTemplate>
<ItemTemplate>
<%# Container.DataItemIndex + 1 %>
</ItemTemplate>
<ItemStyle HorizontalAlign="Center" />
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="left">
<HeaderTemplate>
<label style="text-align: center; display: block;">Emp No.</label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblCustNo" Style="text-align: left; line-height: 28px;"
runat="server" Text='<%# Eval("EmpId")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="left">
<HeaderTemplate>
<label style="text-align: center; display: block;">Emp Name.</label>
</HeaderTemplate>
<ItemTemplate>
<asp:Label ID="lblCustName" Style="line-height: 28px;"
runat="server" Text='<%# Eval("EmpName")%>'></asp:Label>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField ItemStyle-HorizontalAlign="Center">
<HeaderTemplate>
<label style="text-align: center; display: block;">
View File
</label>
</HeaderTemplate>
<ItemTemplate>
<asp:LinkButton ID="lnkBtnView" runat="server" Text="View"
OnClick="Display"></asp:LinkButton>
<asp:HiddenField ID="HiddenField1" runat="server"
Value='<%# Eval("FilePath")%>' />
<asp:HiddenField ID="HdnFileName" runat="server"
Value='<%# Eval("FileName")%>' />
</ItemTemplate>
</asp:TemplateField>
</Columns>
<HeaderStyle BackColor="#2F6370" Font-Names="Arial" Font-Size="12px" ForeColor="White" />
<SelectedRowStyle BackColor="#007D8C" Font-Bold="True" ForeColor="White" />
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
ASPX.CS
* *******
using System;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Configuration;
using System.IO;
namespace Test
{
public partial class Test_Pagination : System.Web.UI.Page
{
private string str = ConfigurationManager.ConnectionStrings["Connection"].ConnectionString;
string sRoot = @"\\net.venem.intranet\srv1\Team10\IT\AccFiles\";
DataTable rstData = new DataTable();
private DataSet ds = new DataSet();
public string EmpNo = string.Empty;
public string EmpName = string.Empty;
private string filename = string.Empty;
private string FileType = String.Empty;
//private DateTime dtBillDate;
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
try
{
//****** To get emp name and assign to label
//lblFileUploadName.Text = "";
if (HttpContext.Current.Session["Empno"] == null)
{
Response.Redirect("SessionExpired.aspx");
}
else
{
EmpName = HttpContext.Current.Session["EmpName"].ToString();
EmpNo = HttpContext.Current.Session["Empno"].ToString();
//lblEmpName.Text = string.Concat(EmpName, StrHyphen, EmpNo);
}
GetEmpDetails();
GetEmpAccDetails();
Session["rstData"] = rstData;
}
catch (Exception ex)
{
}
finally
{
// ds = Nothing
// ds.Dispose()
}
}
else
{
rstData = Session["rstData"] as DataTable;
}
foreach (var item in gvCustomer.Rows)
{
LinkButton btnDisplay = (LinkButton)((GridViewRow)item).FindControl("lnkBtnView");
// Get current ScriptManager on the page
ScriptManager.GetCurrent(this.Page).RegisterPostBackControl(btnDisplay);
if (!string.IsNullOrEmpty(btnDisplay.CommandArgument))
{
ScriptManager.GetCurrent(this.Page).RegisterPostBackControl(btnDisplay);
}
}
}
private void GetEmpDetails()
{
try
{
dbConn.sqlCmd.Parameters.Clear();
dbConn.sqlCmd.Parameters.AddWithValue("@Spd_TYPE", "GET_EmpList");
ds = dbConn.XcuteResult(str, CommandType.StoredProcedure, "Spd_EmpDetails_Master");
drpEmployee.DataSource = ds.Tables[0].DefaultView;
drpEmployee.DataTextField = ds.Tables[0].Columns[0].ColumnName;
drpEmployee.DataValueField = ds.Tables[0].Columns[0].ColumnName;
drpEmployee.DataBind();
}
catch (Exception ex)
{
}
finally
{
ds = null;
}
}
private void GetEmpAccDetails()
{
try
{
dbConn.sqlCmd.Parameters.Clear();
dbConn.sqlCmd.Parameters.AddWithValue("@Spd_Type", "GetEmpAccDetails");
//dbConn.sqlCmd.Parameters.AddWithValue("@Spd_Flag", Flag.ToString().Trim());
ds = dbConn.XcuteResult(str, CommandType.StoredProcedure, "Spd_EmpDetails_Master");
if ((ds.Tables[0].Rows.Count > 0))
{
//gvBills.Visible = true;
rstData = ds.Tables[0];
gvCustomer.DataSource = rstData;
gvCustomer.DataBind();
//lblNoRecord.Visible = false;
}
else
{
}
}
catch (Exception ex)
{
}
finally
{
ds = null;
}
}
protected void btnSearch_Click(object sender, EventArgs e)
{
string ddlEmpvalue = string.Empty;
if (drpEmployee.SelectedValue == "")
{
ddlEmpvalue = "";
}
else
{
ddlEmpvalue = drpEmployee.SelectedValue;
}
try
{
dbConn.sqlCmd.Parameters.Clear();
dbConn.sqlCmd.Parameters.AddWithValue("@Spd_TYPE", "Search_EmpDetails");
dbConn.sqlCmd.Parameters.AddWithValue("@Spd_EmpNo", ddlEmpvalue.ToString().Trim()); //Employee value
ds = dbConn.XcuteResult(str, CommandType.StoredProcedure, "Spd_EmpDetails_Master");
if (ds.Tables[0].Rows.Count > 0)
{
gvCustomer.DataSource = ds.Tables[0];
gvCustomer.DataBind();
}
else
{
ds.Tables[0].Rows.Add(ds.Tables[0].NewRow());
gvCustomer.DataSource = ds.Tables[0];
gvCustomer.DataBind();
int TotalColumns = gvCustomer.Rows[0].Cells.Count;
gvCustomer.Rows[0].Cells.Clear();
//gvCustomer.Rows[0].Cells.Add(new TableCell());
gvCustomer.Rows[0].Cells[0].ColumnSpan = TotalColumns;
gvCustomer.Rows[0].Cells[0].Text = "No record(s) Found";
}
}
catch (Exception ex)
{
}
finally
{
ds = null;
}
}
protected void btnClear_Click(object sender, EventArgs e)
{
drpEmployee.SelectedIndex = -1;
GetEmpAccDetails();
}
protected void Display(object sender, EventArgs e)
{
Session["FPath"] = null;
int rowIndex = Convert.ToInt32(((sender as LinkButton).NamingContainer as GridViewRow).RowIndex);
GridViewRow row = gvCustomer.Rows[rowIndex];
string FPath = (row.FindControl("HiddenField1") as HiddenField).Value;
Session["FPath"] = FPath;
HiddenField HiddenField1 = (row.FindControl("HiddenField1") as HiddenField);
string FileName = (row.FindControl("HdnFileName") as HiddenField).Value;
string sMineType = MimeMapping.GetMimeMapping(FPath);
if (!string.IsNullOrEmpty(FPath))
{
if (File.Exists(FPath))
{
lblFileName.Text = FileName.ToString();
byte[] rawFile = File.ReadAllBytes(FPath);
iframe.Attributes["src"] = $@"data:{sMineType};base64,{Convert.ToBase64String(rawFile)}";
ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);
}
else
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "No Data", "alert(\'File is missing in the folder..!.\');", true);
}
}
else
{
ScriptManager.RegisterStartupScript(this, this.GetType(), "No Data", "alert(\'No data found..!.\');", true);
}
HiddenField1.Visible = false; //Hide the path
}
}
}