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.

Scrollable GridView using JQuery


Attachments

Comments

Author: Phagu Mahato18 Sep 2013 Member Level: Gold   Points : 0

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;
}
}

Author: naveensanagasetti18 Sep 2013 Member Level: Gold   Points : 2

Hi Phagu Mahato,

Can you please tell me what scenario did you use for scrolling purpose on here. I can't get your code properly what part is used for scrolling purpose..?
This code is used for biding grid purpose. Using this code Scrolling is possible...?
If it possible then please highlight that part...

Author: Dotnet Developer-201511 Sep 2015 Member Level: Gold   Points : 3

Hi
naveensanagasetti

Good Post

But some issue in your code. Can you update them.

1. Where is in your grid name design side grid name this ---> gvdetails
But you mention server side how it will be work?

2.where is this method in your c# code?

Bind_Material

3. How to invoke this line and go next step?

DataTable dt1= // bind your Data;

4. I try your complete code when will you bind records?

Dont mistaken me . I tried this source i face the issue so i point out

Author: naveensanagasetti11 Sep 2015 Member Level: Gold   Points : 5

Hi DotnetDeveloper,

Good points, I given just overview how to achieve it, any how I try to do modification for the same. But the resource is locked by editors, if any big issues only they will be unlocked I guess. I will provide the details for your understanding.


1. Where is in your grid name design side grid name this ---> gvdetails
But you mention server side how it will be work?

A) Yes, that's wrong we need to use the same gridview name.

2.where is this method in your c# code?

Bind_Material

A) This is custom method to do some action while binding records in gridview, this is not a mandatory field for this requirement.

3. How to invoke this line and go next step?

DataTable dt1= // bind your Data;

A) In DataTable you can get your database data, if you have any method for that use that method and store the result in datatable.

Hope you understood.

Author: srikanth29 Sep 2015 Member Level: Silver   Points : 0

nice articles, its really helpful for my new project, thank you.



  • Do not include your name, "with regards" etc in the comment. Write detailed comment, relevant to the topic.
  • No HTML formatting and links to other web sites are allowed.
  • This is a strictly moderated site. Absolutely no spam allowed.
  • Name:
    Email: