jQuery GridView with Fixed Header and Scroll inside Bootstrap Tab

Last Reply on Nov 26, 2015 07:10 AM By Shashikant

Posted on Nov 26, 2015 02:52 AM

http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-using-jQuery-Plugin.aspx

http://www.aspsnippets.com/Articles/Scrollable-GridView-with-Fixed-Headers-inside-ASPNet-UpdatePanel-using-jQuery-Plugin.aspx

Hi ,

I used the codes in the below design .but it is not working. Please help.

I prefer using jQuery.

<head id="Head2" runat="server">

<link href="assets/plugins/bootstrap/bootstrap.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script> 
<script type="text/javascript" src="assets/plugins/bootstrap/bootstrap.min.js"></script>
<link href="assets/font-awesome/css/font-awesome.css" rel="stylesheet" />
<script src="Scripts/ScrollableGridViewPlugin_ASP.NetAJAXmin.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#GridView1').Scrollable({
ScrollHeight: 300,
IsInUpdatePanel: true
});
});
</script>

</head>
<body>
<form id="form2" runat="server">
<asp:ScriptManager ID="ScriptManager2" runat="server">
</asp:ScriptManager>
<div id="page-wrapper" style="background-color:white;">
<div class="row" style="padding-top:0px">

<ul class="nav nav-tabs" style=" height:28px; margin-top: 0px;">
<li style="float:right;padding-top: 0px; width: 35px;"><a href="#Table" data-toggle="tab" style="padding-left: 5px; padding-top: 0%; padding-bottom: 0%;margin-top: 5px"><span data-toggle="tooltip" data-placement="top" title="Table"> <i class="fa fa-table fa-fw"></i></span></a>
</li>
<li class="active" style="float:right;padding-top: 0px;width: 35px;"><a href="#Chart" data-toggle="tab" style="padding-left: 6px; padding-top: 0%; padding-bottom: 0%;margin-top: 5px"><span data-toggle="tooltip" data-placement="top" title="Charts"><i class="fa fa-bar-chart-o fa-fw"></i></span></a>
</li>
</ul>
<div class="tab-content" > 
<div class="tab-pane fade " id="Table" style="width:300px;"> 
<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<ContentTemplate>
<asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="true"> 
</asp:GridView>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</div>
</div>
</div>

</form>

</body>

 

Thanks

Posted on Nov 26, 2015 07:10 AM

Hi,

Here I have created sample that will help you out.

HTML

<div>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" />
    <script src="Js/ScrollableGridPlugin.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $('#<%=GridView2.ClientID %>').Scrollable({
                ScrollHeight: 100,
                IsInUpdatePanel: true
            });
        });
    </script>
    <asp:ScriptManager ID="ScriptManager2" runat="server">
    </asp:ScriptManager>
    <div id="page-wrapper" style="background-color: white;">
        <div style="padding-top: 0px">
            <ul class="nav nav-tabs" style="height: 28px; margin-top: 0px;" role="tablist">
                <li style="float: right; padding-top: 0px; width: 35px;"><a href="#Table" role="tab"
                    data-toggle="tab" style="padding-left: 5px; padding-top: 0%; padding-bottom: 0%;"
                    aria-controls="Table"><span data-toggle="tooltip" data-placement="top" title="Table">
                        <i class="fa fa-table fa-fw"></i></span></a></li>
                <li class="active" style="float: right; padding-top: 0px; width: 35px;"><a href="#Chart"
                    data-toggle="tab" style="padding-left: 6px; padding-top: 0%; padding-bottom: 0%;"
                    aria-controls="Chart"><span data-toggle="tooltip" data-placement="top" title="Charts">
                        <i class="fa fa-bar-chart-o fa-fw"></i></span></a></li>
            </ul>
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="Table" style="width: 300px;">
                    <asp:UpdatePanel ID="UpdatePanel2" runat="server">
                        <ContentTemplate>
                            <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="true">
                            </asp:GridView>
                        </ContentTemplate>
                    </asp:UpdatePanel>
                </div>
                <div role="tabpanel" class="tab-pane" id="Chart">
                    This is Chart Tab
                </div>
            </div>
        </div>
    </div>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id", typeof(int)),
                        new DataColumn("Name", typeof(string)),
                        new DataColumn("Country",typeof(string)) });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView2.DataSource = dt;
        GridView2.DataBind();
    }
}