Scrolling in a gridview control

I have asked this question before but did not get any correct answers.

I am using Vb.net for coding. I have a grid view control in which I want to introduce a vertical scroll bar if the value from the sql query overflows.

How do I go about it? I believe there is a j开发者_如何学JAVAavascript code for this

GridView inside <div > HTML tag
To produce GridView scrollbars with div tag, use this code:

<div style="width:100%; height:300; overflow:auto;">
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
</div>

GridView inside Panel Control
To create GridView scrollbars with a little help of Panel control, use this code:

<asp:Panel ID="Panel1" runat="server" ScrollBars="Both" Height="300" Width="100%">
 <asp:GridView ID="GridView1" runat="server">
 </asp:GridView>
</asp:Panel>

http://www.beansoftware.com/ASP.NET-FAQ/GridView-ScrollBars.aspx

Maybe you can try my solution. It can be fixed header and column in gridview.

GridViewScroll with jQuery

Hope this javascript code helpful to you...

Your Gridview

<asp:GridView ID="grdProducts" runat="server">
 </asp:GridView>

On aspx page javascript for scrolling . put this script into tages.

   <script type="text/javascript">

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

Javascript file code

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

This code working in my application... You need Latest Jquery file if it's not working then download jquery-1.4.1.min.js