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

This question does not have replies that have been liked.