CODEWITHSUNDEEP
gridviewscrollfixed
user3253276
user3253276

Reputation: 11

Maintaining GridView Scroll Position and fixed header in gridview asp

I need to keep the column headers when i scroll down and the scroll position when i e.g. do an edit and the page does a postback.

I can't figure out how to do both things at the same time but i can do them separately. I have no idea how to do this with javascript. this is how it looks with both functions.

I used this link for saving the scroll position and this link to keep the column headers fixed.

As I said they each work separately but how do I combine them?

<head id="Head1" runat="server">
    <title>Fixed Header GridView</title>
    <link href="Styles/GridviewScroll.css" rel="stylesheet" type="text/css" />
    <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>
    <script src="Scripts/gridviewScroll.min.js" type="text/javascript"></script>
    <script type="text/javascript">

        $(document).ready(function () {
            gridviewScroll();
        });

        function gridviewScroll() {
            $('#<%=GridView1.ClientID%>').gridviewScroll({
                width: 5300,
                height: 950,
                startHorizontal: 0,
                wheelstep: 10,
                barhovercolor: "#3399FF",
                barcolor: "#3399FF"
            });
        }

        function scrollPosition() {
            var scroll = {
                Y: '#<%= hfScrollPosition.ClientID %>'
            };

            $(document).ready(function () {
                $("#scrollable-container").scrollTop($(scroll.Y).val());
            });
        }



       </script>
</head>
<body>
    <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" Width="660px" 
                AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableModelValidation="True" ShowFooter="True" HorizontalAlign="Left">
                <Columns>

Upvotes: 1

Views: 6195

Answers (2)

men
men

Reputation: 131

To maintain the scroll position after Postback I used the excellent solution at: http://www.codeproject.com/Articles/30235/Maintain-GridView-Scroll-Position-and-Header-Insid

However the HeaderFreez described there did not work for me and I tried tens of solutions until I got to the conclusion that one can simply duplicate the gridview. The first one will have the header only, the second one will only contain data.

In order to show header and no rows, just use the ShowHeaderWhenEmpty="True" property of teh gridview. You still must bind this grid (limited to a header) and write some query that will not return any data (like select * from people where age = -100)

Upvotes: 0

Sam
Sam

Reputation: 687

<script type="text/javascript" src="../Scripts/gridviewScroll.min.js"></script> 
<script type="text/javascript">

    $(document).ready(function () {
        gridviewScroll();
    });

    function gridviewScroll() {
        $('#<%=GridView1.ClientID%>').gridviewScroll({
            width: 1175,
            height: 500,
            freezesize: 3,
            startVertical: $("#<%=hfGridView1SV.ClientID%>").val(),
            startHorizontal: $("#<%=hfGridView1SH.ClientID%>").val(),
            onScrollVertical: function (delta) {
                $("#<%=hfGridView1SV.ClientID%>").val(delta);
            },
            onScrollHorizontal: function (delta) {
                $("#<%=hfGridView1SH.ClientID%>").val(delta);
            }
        });
    } 


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

<asp:GridView ID="GridView1" runat="server" Width="660px" 
                AutoGenerateColumns="False" DataSourceID="SqlDataSource1" EnableModelValidation="True" ShowFooter="True" HorizontalAlign="Left">

You are missing the hidden fields from your code. Check out the demo here.

Upvotes: 1

Related Questions