Ep

Ep

How to make fixed header GridView scrollable div browser compatible - Asp.Net

C# - Scrollable GridView with fixed headers in Asp .Net


Here in this post I will explain how to make GridView with static header with the browser compatibility. Find the source code below:-

fixed header gridview,gridview control,display data in gridview,grid in asp,fixed header,  aspnet gridview,static header,browser compatibility,sample code

Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>How to make fixed header GridView scrollable with Jquery - ASP.Net</title>

    <script src="jquery-1.4.1.min.js" type="text/javascript"></script>

    <script type="text/javascript">
     function MakeScrollable(a, b) {
            var c = a.offsetWidth;
            var d = a.offsetHeight;
            var e = new Array;
            for (var f = 0; f < a.getElementsByTagName("TH").length; f++) {
                e[f] = a.getElementsByTagName("TH")[f].offsetWidth
            }
            a.parentNode.appendChild(document.createElement("div"));
            var g = a.parentNode;
            var h = document.createElement("table");
            for (f = 0; f < a.attributes.length; f++) {
                if (a.attributes[f].specified && a.attributes[f].name != "id") {
                    h.setAttribute(a.attributes[f].name, a.attributes[f].value)
                }
            }
            h.style.cssText = a.style.cssText;
            h.style.width = c + "px";
            h.appendChild(document.createElement("tbody"));
            h.getElementsByTagName("tbody")[0].appendChild(a.getElementsByTagName("TR")[0]);
            var i = h.getElementsByTagName("TH");
            var j = a.getElementsByTagName("TR")[0];
            for (var f = 0; f < i.length; f++) {
                var k;
                if (e[f] > j.getElementsByTagName("TD")[f].offsetWidth) {
                    k = e[f]
                } else {
                    k = j.getElementsByTagName("TD")[f].offsetWidth
                }
                i[f].style.width = parseInt(k - 3) + "px";
                j.getElementsByTagName("TD")[f].style.width = parseInt(k - 3) + "px"
            }
            g.removeChild(a);
            var l = document.createElement("div");
            l.appendChild(h);
            g.appendChild(l);
            if (b.Width > 0) {
                c = b.Width
            }
            var m = document.createElement("div");
            if (parseInt(d) > b.ScrollHeight) {
                c = parseInt(c) + 17
            }
            m.style.cssText = "overflow:auto;height:" + b.ScrollHeight + "px;width:" + c + "px";
            m.appendChild(a);
            g.appendChild(m)
        }(function (a) {
            a.fn.Scrollable = function (b) {
                var c = {
                    ScrollHeight: 300,
                    Width: 0,
                    IsInUpdatePanel: false
                };
                var b = a.extend(c, b);
                return this.each(function () {
                    var c = a(this).get(0);
                    var d = c.id;
                    MakeScrollable(c, b);
                    if (b.IsInUpdatePanel) {
                        var e = Sys.WebForms.PageRequestManager.getInstance();
                        if (e != null) {
                            e.add_endRequest(function (c, e) {
                                MakeScrollable(a("#" + d).get(0), b)
                            })
                        }
                    }
                })
            }
})(jQuery);
    </script>

    <script type="text/javascript">
    $(document).ready(function () {
        $('#<%=GridView1.ClientID %>').Scrollable({
            ScrollHeight: 300,
            IsInUpdatePanel: true
        });
    });
    </script>

</head>

<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="up1" runat="server">
        <ContentTemplate>
            <div style="border: 5px; border-color: Gray;">
                <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" CellPadding="4"
                    ForeColor="#333333" GridLines="None">
                    <RowStyle BackColor="#F7F6F3" ForeColor="#333333" />
                    <Columns>
                        <asp:BoundField DataField="ContactName" HeaderText="Contact Name" />
                        <asp:BoundField DataField="City" HeaderText="City" />
                        <asp:BoundField DataField="Country" HeaderText="Country" />
                    </Columns>
                    <FooterStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#284775" ForeColor="White" HorizontalAlign="Center" />
                    <SelectedRowStyle BackColor="#E2DED6" Font-Bold="True" ForeColor="#333333" />
                    <HeaderStyle BackColor="#5D7B9D" Font-Bold="True" ForeColor="White" />
                    <EditRowStyle BackColor="#999999" />
                    <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                </asp:GridView>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    </form>
</body>
</html>
  
Default.cs
using System;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            DataSet ds = new DataSet();

            ds.ReadXml(Server.MapPath("~/App_Data/Customers.xml"));
            GridView1.DataSource = ds;
            GridView1.DataBind();          
        }
    }
}

 Download the source code click here ..

How to make fixed header GridView scrollable div browser compatible - Asp.Net Reviewed by Ravi Kumar on 12:18:00 PM Rating: 5

3 comments:

  1. Hi Ravi, Do you have any sample in Vb.net? any help for this..thanks..

    ReplyDelete
    Replies
    1. Hello Grace,

      find the source code below in vb.net

      Imports System.Data
      Partial Class DefaultVB
      Inherits System.Web.UI.Page

      Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
      If Not IsPostBack Then
      Dim ds As New DataSet()

      ds.ReadXml(Server.MapPath("~/App_Data/Customers.xml"))
      GridView1.DataSource = ds

      GridView1.DataBind()
      End If
      End Sub
      End Class

      you can also download the sample code from https://sites.google.com/site/aspdotnetcsharpcodes/downloads/GridViewFixedHeaderScrollableVBplus.rar?attredirects=0&d=1

      Delete
  2. Thanks You So much.......one week stuck for this task.....finally i got the solution..... thanks...

    ReplyDelete

All Rights Reserved by Etechpulse © 2012 - 2017
Powered By Blogger

Contact Form

Name

Email *

Message *

Powered by Blogger.