Translate

Monday 22 June 2015

GridView Fixed Header and Freeze Column

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
    <link href="../Css/GridviewScroll.css" rel="stylesheet" />
    <script src="../Scripts/gridviewScroll.min.js"></script>

    <script type="text/javascript">

        var windowSize;

        // Don't try this - $(window).load(function ()
        function pageLoad() {
            windowSize = $(window).width();
            gridviewScroll();
        }

        $(window).resize(function () {
            windowSize = $(window).width();
            gridviewScroll();
        });

        function gridviewScroll() {
            $('#<%=GridView1.ClientID%>').gridviewScroll({
                width: windowSize - 44,
                height: 350
                freezesize: 2
                // Maintain Scroll position
                startVertical: $("#<%=hfGridView1SV.ClientID%>").val(),
                startHorizontal: $("#<%=hfGridView1SH.ClientID%>").val(),
                onScrollVertical: function (delta) {
                            $("#<%=hfGridView1SV.ClientID%>").val(delta);
                     },
                onScrollHorizontal: function (delta) {
                            $("#<%=hfGridView1SH.ClientID%>").val(delta);
                    }

            });
        }
    </script>

 <div style="width: 100%; margin-left: 2%; margin-right: 2%;">
<asp:GridView ID="GridView1" runat="server" Width="100%"
    AutoGenerateColumns="false" GridLines="None">
    <Columns>

    </Columns>
    <HeaderStyle CssClass="GridviewScrollHeader" />
    <RowStyle CssClass="GridviewScrollItem" />
    <PagerStyle CssClass="GridviewScrollPager" />
</asp:GridView>

<asp:HiddenField ID="hfGridView1SV" runat="server" /> 
<asp:HiddenField ID="hfGridView1SH" runat="server" />

</div>

Ref:  http://gridviewscroll.aspcity.idv.tw/Demo.aspx