How to maintain scroll position of datatable.js on postback

jotapardo

I have a gridview inside an updatepanel. I implemented the Datatable.js plugin to the grid. Then, I found the option to keep the scroll stateSave: true, so that when the user selects a record the system calls the server (causing a postbak) and the scroll is kept in the same position. But it does not work.

Here is my .aspx file code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
    <ContentTemplate>

            <!-- grid de empleados -->
            <div class="bs-docs-section">


                <asp:GridView ID="grdEmployees" runat="server"
                    OnRowCreated="grdEmployees_RowCreated" OnSelectedIndexChanged="grdEmployees_SelectedIndexChanged" AutoGenerateColumns="False"
                    DataKeyNames="IdEmployee" OnRowCommand="grdEmployees_RowCommand" OnPreRender="grdEmployees_PreRender"
                    BackColor="LightGoldenrodYellow" BorderColor="Tan" BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" CssClass="responsive small">
                    <AlternatingRowStyle BackColor="PaleGoldenrod" />
                    <Columns>

                        <asp:BoundField DataField="NumberOfRecord" HeaderText="No." ReadOnly="True" SortExpression="NumberOfRecord"
                            meta:resourcekey="BoundFieldResource1"></asp:BoundField>

                        <asp:BoundField DataField="EmployeeName" HeaderText="EMPLEADO" ReadOnly="True" SortExpression="EmployeeName"
                            meta:resourcekey="BoundFieldResource3"></asp:BoundField>

                        <asp:TemplateField>
                            <ItemTemplate>

                                <asp:ImageButton ID="btnApproveEmployee" runat="server" CausesValidation="False"
                                    CommandArgument="<%# ((GridViewRow) Container).RowIndex %>" CommandName="ApproveEmployee"
                                    CssClass="glyphicon glyphicon-share-alt" ImageUrl="../images/icons/accept.png" Style="border-width: 0px; width: 20px;" ToolTip="Approve" />
                                <ajaxToolkit:ConfirmButtonExtender ID="btnApproveEmployee_ConfirmButtonExtender" runat="server"
                                    ConfirmText="¿Está seguro que desea aprobar el registro?" Enabled="True" TargetControlID="btnApproveEmployee">
                                </ajaxToolkit:ConfirmButtonExtender>
                            </ItemTemplate>
                        </asp:TemplateField>


                    </Columns>
                   
                </asp:GridView>



            </div>

        </div>
   </ContentTemplate>
</asp:UpdatePanel>


<script lang="JavaScript" type="text/javascript">

        function BindControlEvents() {
            //jQuery is wrapped in BindEvents function so it can be re-bound after each callback.
            //Your code would replace the following line:
            $('#ctl00_SheetContentPlaceHolder_grdEmployees').DataTable(
                    {
                        "scrollY": "500px",
                        "scrollCollapse": true,
                        "paging": false,
                        "scroller": true,
                        "stateSave": true
                    }
                );
            //$('div.dataTables_filter input').focus();
        }

        //Initial bind
        $(document).ready(function () {
            BindControlEvents();
        });

        //Re-bind for callbacks
        var prm = Sys.WebForms.PageRequestManager.getInstance();

        prm.add_endRequest(function () {
            BindControlEvents();
        });

    </script>