(How to fix GridView Header in ASP.NET Using jQuery) – Khi dữ liệu hiển thị trên 1 trang của Gridview quá dài, nếu người dùng muốn xem thông tin ở phía dưới sẽ phải sử dụng thanh trượt để kéo xuống. Tuy nhiên khi kéo xuống toàn bộ màn hình sẽ di chuyển theo trong đó có cả tiêu đề Gridview. Chính việc này sẽ làm cho người sử dụng rất khó theo dõi quan sát thông tin trên đó do bị mất thông tin các cột dữ liệu. Vậy có cách nào để xử lý vấn đề này không? Bài viết dưới đây sẽ hướng dẫn các bạn cách cố định tiêu đề Gridview (GridView Header) giống như chức năng Freeze trong Excel giúp người dùng dễ dàng xem và quan sát kể cả khi danh sách dữ liệu có dài.
- B1: Tạo CSDL Customers trong SQL Server
| STT | Tên trường | Kiểu trường | Ghi chú |
| 1 | AccountID | Int | Trường tự tăng |
| 2 | AccountCode | nvarchar(25) | |
| 3 | AccName | nvarchar(250) | |
| 4 | AccAddress | nvarchar(250) | |
| 5 | AccPhone | nvarchar(50) | |
| 6 | AccFAX | nvarchar(50) | |
| 7 | AccEmail | nvarchar(50) | |
| 8 | AccWebsite | nvarchar(150) | |
| 9 | AccDesc | nvarchar(1500) | |
| 10 | CreatedDate | datetime | |
| 11 | ModifiedDate | datetime |
- B3: Nhập dữ liệu cho bảng Accounts
- B4: Tạo stored procedure trong SQL Server
USE [Customers]
GO
CREATE PROCEDURE [dbo].[Pro_Accounts_List]
@Keyword nvarchar(250),
@SortField nvarchar(50),
@SortType nvarchar(10)
AS
declare @strSQL nvarchar(1000)
declare @strWhere nvarchar(500)
declare @strOrder nvarchar (50)
set @strSQL= 'Select * from Accounts'
set @strWhere =' Where 1=1 '
if @Keyword<>''
set @strWhere= @strWhere +' And (AccountCode like N''%' +@Keyword+'%''
Or AccName like N''%' +@Keyword+'%'' Or AccAddress like N''%' +@Keyword+'%''
Or AccPhone like N''%' +@Keyword+'%'' Or AccFAX like N''%' +@Keyword+'%''
Or AccEmail like N''%' +@Keyword+'%'' Or AccWebsite like N''%' +@Keyword+'%'')'
if @SortField='CreatedDate'
Begin
set @strOrder =' Order by CreatedDate'
End
Else
Begin
set @strOrder =' Order by AccName'
End
set @strSQL=@strSQL+@strWhere+@strOrder
print @strSQL
exec sp_executesql @strSQL
Go
Bạn có thể tải về bảng cơ sở dữ liệu SQL bằng cách nhấn vào liên kết tải về dưới đây
Trong Visual Studio tạo 1 Class có tên: Utility và nhập đoạn Code phía dưới cho Class này.
Imports System.Data.SqlClient
Imports System.Data
Namespace GenerateRowNumberinGridview
Public Class SqlDataProvider
#Region "Membres Prives"
Shared _IsError As Boolean = False
Private _connectionString As String
#End Region
#Region "Constructeurs"
Public Sub New()
Try
_connectionString = ConfigurationManager.ConnectionStrings("SiteSqlServer").ConnectionString
_IsError = False
Catch ex As Exception
_IsError = True
End Try
End Sub
#End Region
#Region "Proprietes"
Public ReadOnly Property ConnectionString() As String
Get
Return _connectionString
End Get
End Property
#End Region
#Region "Functions"
Public Function FillTable(ByVal ProcName As String, ByVal ParamArray Para() As ObjectPara) As DataTable
Try
Dim tb As New DataTable
Dim adap As New SqlDataAdapter(ProcName, _connectionString)
adap.SelectCommand.CommandType = CommandType.StoredProcedure
If Not Para Is Nothing Then
For Each p As ObjectPara In Para
adap.SelectCommand.Parameters.Add(New SqlParameter(p.Name, p.Value))
Next
End If
adap.Fill(tb)
Return tb
Catch ex As Exception
Return Nothing
End Try
End Function
#End Region
End Class
Public Class ObjectPara
Dim _name As String
Dim _Value As Object
Sub New(ByVal Pname As String, ByVal PValue As Object)
_name = Pname
_Value = PValue
End Sub
Public Property Name() As String
Get
Return _name
End Get
Set(ByVal value As String)
_name = value
End Set
End Property
Public Property Value() As Object
Get
Return _Value
End Get
Set(ByVal value As Object)
_Value = value
End Set
End Property
End Class
End Namespace
- B6: Mở file Default.aspx dưới dạng HTML và nhập mã HTML
C#
<%@ PageTitle="Fix GridView Header in ASP.NET Using jQuery" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FixGridViewHeader._Default" %>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<h3>
Fix GridView Header in ASP.NET Using jQuery
</h3>
<script type="text/javascript">
function pageLoad() {
$('#<%=grvObject.ClientID %>').Scrollable({
ScrollHeight: 400,
Width: 920
});
};
</script>
<asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2"cellspacing="3"width="100%">
<tr>
<td>
</td>
<tdalign="right">
<asp:Label ID="plKeyword" runat="server" Text="Keyword"></asp:Label>
<asp:TextBox ID="txtSearch" CssClass="form-control" ToolTip="Enter Keyword" runat="server" width="200px"></asp:TextBox>
<asp:ImageButton ID="cmdQuickSearch" runat="server" causesvalidation="false" OnClick="cmdQuickSearch_Click" imageurl="~/images/icon_search.gif"></asp:ImageButton>
</td>
</tr>
<trid="trMessage"runat="server"visible="false">
<tdcolspan="2">
<asp:Label ID="lblMessage" runat="server" Text="No Data"></asp:Label>
</td>
</tr>
<tr>
<tdcolspan="2">
<asp:GridView ID="grvObject" runat="server" CssClass="GridStyle" BorderColor="#cbcbcb" BorderStyle="solid"
BorderWidth="1"AutoGenerateColumns="false"DataKeyNames="AccountID"width="100%">
<AlternatingRowStyleCssClass="GridStyle_AltRowStyle"/>
<HeaderStyle CssClass="GridStyle_HeaderStyle"/>
<RowStyle CssClass="GridStyle_RowStyle"/>
<pagerstyle cssclass="GridStyle_pagination"/>
<Columns>
<asp:TemplateField>
<ItemStyle HorizontalAlign="Center"Width="3%"></ItemStyle>
<ItemTemplate>
<asp:Label ID="lblRowNumber"Text='<%# Container.DataItemIndex + 1 %>' runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="10%"DataField="AccountCode"HeaderText="AccountCode"/>
<asp:BoundField ItemStyle-Width="15%"DataField="AccName"HeaderText="AccountName"/>
<asp:BoundField ItemStyle-Width="10%"DataField="AccPhone"HeaderText="Phone"/>
<asp:BoundField ItemStyle-Width="10%"DataField="AccFAX"HeaderText="FAX"/>
<asp:BoundField ItemStyle-Width="15%"DataField="AccEmail"HeaderText="Email"/>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>
VB.NET Code
<%@ PageTitle="Fix GridView Header in ASP.NET Using jQuery" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false" EnableEventValidation= "false" CodeBehind="Default.aspx.vb"Inherits="FixGridViewHeader._Default"%>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<asp:ScriptManager ID="ScriptManager1"runat="server">
</asp:ScriptManager>
<h3>
Fix GridView Header in ASP.NET Using jQuery
</h3>
<script type = "text/javascript">
function pageLoad() {
$('#<%=grvObject.ClientID %>').Scrollable({
ScrollHeight: 400,
Width: 920
});
};
</script>
<asp:UpdatePanel ID="updatePanel"runat="server"UpdateMode="Conditional">
<ContentTemplate>
<table cellpadding="2"cellspacing="3"width="100%">
<tr>
<td>
</td>
<tdalign="right">
<asp:Label ID="plKeyword" runat="server" Text="Keyword"></asp:Label>
<asp:TextBox ID="txtSearch" CssClass="form-control" ToolTip="Enter Keyword" runat="server" width="200px"></asp:TextBox>
<asp:ImageButton ID="cmdQuickSearch" runat="server" causesvalidation="false" imageurl="~/images/icon_search.gif"></asp:ImageButton>
</td>
</tr>
<trid="trMessage"runat="server"visible="false">
<tdcolspan="2">
<asp:Label ID="lblMessage" runat="server" Text="No Data"></asp:Label>
</td>
</tr>
<tr>
<tdcolspan="2">
<asp:GridView ID="grvObject" runat="server" CssClass="GridStyle" BorderColor="#cbcbcb" BorderStyle="solid"
BorderWidth="1"AutoGenerateColumns="false"DataKeyNames="AccountID"width="100%">
<AlternatingRowStyleCssClass="GridStyle_AltRowStyle"/>
<HeaderStyle CssClass="GridStyle_HeaderStyle"/>
<RowStyle CssClass="GridStyle_RowStyle"/>
<pagerstyle cssclass="GridStyle_pagination"/>
<Columns>
<asp:TemplateField>
<ItemStyle HorizontalAlign="Center"Width="3%"></ItemStyle>
<ItemTemplate>
<asp:Label ID="lblRowNumber"Text='<%# Container.DataItemIndex + 1 %>' runat="server"/>
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField ItemStyle-Width="10%"DataField="AccountCode"HeaderText="AccountCode"/>
<asp:BoundField ItemStyle-Width="15%" DataField="AccName" HeaderText="AccountName" />
<asp:BoundField ItemStyle-Width="10%"DataField="AccPhone"HeaderText="Phone"/>
<asp:BoundField ItemStyle-Width="10%"DataField="AccFAX"HeaderText="FAX"/>
<asp:BoundField ItemStyle-Width="15%"DataField="AccEmail"HeaderText="Email"/>
</Columns>
</asp:GridView>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Content>C# Code
//Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
using Microsoft.VisualBasic;
using System;
using System.Collections;
using System.Collections.Generic;
using System.Data;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
using System.Diagnostics;
namespace FixGridViewHeader
{
public partial class _Default : System.Web.UI.Page
{
#region"Bind Data"
private voidBindAccount()
{
DataTable objBind = newDataTable();
objBind = BindData();
if (objBind != null)
{
if (objBind.Rows.Count > 0)
{
grvObject.DataSource = objBind;
grvObject.DataBind();
trMessage.Visible = false;
grvObject.Visible = true;
}
else
{
trMessage.Visible = true;
grvObject.Visible = false;
}
updatePanel.Update();
}
}
private DataTableBindData()
{
SqlDataProvider objSQL = newSqlDataProvider();
DataTable objBind = objSQL.FillTable("Pro_Accounts_List", new ObjectPara("@Keyword", txtSearch.Text), new ObjectPara("@SortField", "CreatedDate"), new ObjectPara("@SortType", "DESC"));
return objBind;
}
#endregion
#region"Event Handles"
protected voidPage_Load(object sender, System.EventArgs e)
{
try
{
if (!IsPostBack)
{
Page.Form.DefaultButton = cmdQuickSearch.UniqueID;
BindAccount();
}
}
catch
{
}
}
protected voidcmdQuickSearch_Click(object sender, System.EventArgs e)
{
BindAccount();
}
#endregion
}
}
'Visit http://www.laptrinhdotnet.com for more ASP.NET Tutorials
Imports System.Data.SqlClient
Namespace FixGridViewHeader
Public Class _Default
Inherits System.Web.UI.Page
#Region "Bind Data"
Private SubBindAccount()
Dim objBind As New DataTable
objBind = BindData()
If Not objBind Is Nothing Then
If objBind.Rows.Count > 0 Then
grvObject.DataSource = objBind
grvObject.DataBind()
trMessage.Visible = False
grvObject.Visible = True
Else
trMessage.Visible = True
grvObject.Visible = False
End If
updatePanel.Update()
End If
End Sub
Private FunctionBindData() As DataTable
Dim objSQL As New SqlDataProvider
Dim objBind As DataTable = objSQL.FillTable("Pro_Accounts_List", New ObjectPara("@Keyword", txtSearch.Text.Trim), _
New ObjectPara("@SortField", "CreatedDate"), _
New ObjectPara("@SortType", "DESC"))
Return objBind
End Function
#End Region
#Region "Event Handles"
Protected SubPage_Load(ByVal sender AsObject, ByVal e As System.EventArgs) Handles Me.Load
Try
If Page.IsPostBack = False Then
'Default Submit Button
Page.Form.DefaultButton = cmdQuickSearch.UniqueID
BindAccount()
End If
Catch ex As Exception
End Try
End Sub
Private SubcmdQuickSearch_Click(ByVal sender As Object, ByVal e As System.EventArgs) HandlescmdQuickSearch.Click
BindAccount()
End Sub
#End Region
End Class
Chúc các bạn thành công!
Quang Bình
0 comments Blogger 0 Facebook
Post a Comment