Scrollable GridView using JQuery
In this Artical i'm trying to explain about scrollable gridview with fixed Headers using JQuery. Why i'm introducing Fixed Headers means for reducing post back to the page and improve the performence of the page we introduce GridView with scrollable headers.
Scrollable GridView with fixed Headers usin JQuery:
I have a Gridview, in my GridView i have thousands of Rows. Previously i'm displaying my Grid using pagging concept. But now my comapny is not like that why because using Pagging, the page is post back on each and every page selection. To Overcome the above issue now i'm introduced the concept scrollable GridView with fixed headers. In my page it self header is fixed and if i want to see all rows using scrolling i want to move top to bottom and check the data. Using this we overcome the postback. Here i'm explain step by step process of this. STEP 1:
Creat CSS Class:
Using below styles we give some colors of the headers and set the position.
< style type="text/css">
.GVFixedHeader
{
font-weight: bold;
background-color:DarkBlue;
color:White;
position: relative;
top: expression(this.parentNode.parentNode.parentNode.scrollTop-1);
}
.GridviewScrollPager
{
border-top: 1px solid #AAAAAA;
background-color: #FFFFFF;
}
</style> STEP 2:
And call this class in GridView HeaderStyle and FoterStyle properties itself. Use the below sample code
<HeaderStyle Font-Bold="True" ForeColor="White" CssClass="GVFixedHeader" />
<PagerStyle ForeColor="White" HorizontalAlign="Center" CssClass="GridviewScrollPager" /> STEP 3:
Add JQuery Plugins, for this we download from below link use the below link and download the plugins.
http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js
http://gridviewscroll.aspcity.idv.tw/
Using above links download JQuery plugins and add that to scripts folder. STEP 4:
After download JQuery plugins call that plugins using below lines of code
<script type="text/javascript" src="../Scripts/jquery1.8.2.min.js"></script>
<script type="text/javascript" src="../Scripts/jquery1.9.1.min.js"></script>
<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
gridviewScroll();
});
function gridviewScroll() {
$('#<%=GV.ClientID%>').gridviewScroll({
width: 1100,
height: 200
});
}
</script> STEP 5:
Design your page like below.
<asp:GridView runat="server" ID="GV"
AutoGenerateColumns="false">
<RowStyle BackColor="#EFF3FB" />
<PagerStyle BackColor="#2461BF" ForeColor="White"
HorizontalAlign="Center" /<
<HeaderStyle CssClass="GVFixedHeader" />
<FooterStyle CssClass="GVFixedFooter" />
<AlternatingRowStyle BackColor="White" />
<Columns>
<asp:TemplateField HeaderText="Material" HeaderStyle-Width="8%">
<ItemTemplate>
<asp:Label ID="lblMaterial" runat="server" Text='<%# Bind_Material(Convert.ToString(Eval("Material")))%>'/>
<asp:Label ID="lblMaterial_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Material_Id") %>' Visible="false"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Items" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
<ItemTemplate>
<asp:Label ID="lblItem" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Item") %>'/>
<asp:Label ID="lblItem_Id" runat="server" Text='<%# DataBinder.Eval(Container.DataItem,"Item_Id") %>' Visible="false"/>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Grade" HeaderStyle-Width="8%" HeaderStyle-HorizontalAlign="center">
<ItemTemplate>
<asp:Label ID="lblGrade" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade") %>'/>
<asp:Label ID="lblGrade_Id" runat="server" Text='<%#DataBinder.Eval(Container.DataItem,"Grade_Id") %>' Visible="false"/>
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView> STEP 6:
In code behind wrote below lines of code and see the result
protected void Page_Load(Object sender, EventArgs e)
{
DataTable dt1= // bind your Data;
if(dt1.Rows.Count>0)
{
gvdetails.DataSource=dt1;
gvdetails.DataBind();
}
else
{
DataTable dt = new DataTable();
dt.Columns.Add("Material");
dt.Columns.Add("Material_Id");
dt.Columns.Add("Grade");
dt.Columns.Add("Grade_Id");
dt.Columns.Add("Item");
dt.Columns.Add("Item_Id");
DataRow dr;
dr = dt.NewRow();
dt.Rows.Add(dt.NewRow().ItemArray);
GV.DataSource = dt;
GV.DataBind();
GV.Rows[0].Visible = false;
GV.Rows[0].Controls.Clear();
}
}
follow above mentioned all points and see the result.
Attachments
Follow
Thank you dear Naveen for posting a valuable resource on Scrollable GridView with fixed Headers using JQuery. I created in the Page Load event to Scrollable GridView JQuery
Code:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
public partial class Default2 : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
SqlConnection connects = new SqlConnection(@"Data Source=.;Initial Catalog=erxample;Persist Security Info=True;User ID=Admin;Password=admin";
SqlDataAdapter adap = new SqlDataAdapter("select * from employee",connects);
DataSet dataset1=new DataSet();
adap.Fill(dataset1,"employee");
GridView1.DataSource = dataset1.Tables["employee"];
GridView1.DataBind();
GridView1.UseAccessibleHeader = true;
GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}