MVC Webgrid issue with scrollbar plugin when updating via ajax?

Question

I have webgrid using a scrollbar plugin (link), It looks great initially, both header/pager are frozen and content are in scrollbar. But, whenever my webgrid is refreshed via ajax request. A second header and pager appear in the scrollbar. If I remove the ajax request "ajaxUpdateContainerId: "grid"", it deosn't happen.

My web grid code:

@{
    var grid = new WebGrid<MemberSearch>(ajaxUpdateContainerId: "grid",
       rowsPerPage: Model.PageSize, defaultSort: "LastName");
    grid.Bind(Model.Member, rowCount: Model.TotalRows, autoSortAndPage: false);
    // NOTE: I've created another html helper to allow a server-paged grid to be rendered in one call (complete with compiler type inference) as shown below
    //var grid = Html.ServerPagedGrid(Model.Products, Model.TotalRows, rowsPerPage: Model.PageSize);
}
<div id="grid">
@grid.GetHtml(tableStyle: "webgrid",
            headerStyle: "webgrid-header",
            footerStyle: "w-footer",
            alternatingRowStyle: "webgrid-alternating-rows",
                columns: grid.Columns(
                grid.Column(format: @<text>@Html.ActionLink("Edit", "Edit", new { Id = item.Id }) </text>),
                grid.Column("fullname", header: "Name", format: @<text>@item.fullname</text>),
                grid.Column("Email", header: "Email", format: @<text>@item.Email</text>),
                grid.Column("companyname", header: "Company", format: @<text>@item.companyname</text>),
                grid.Column("regDate", header: "Registration Date", format: @<text>@item.regDate</text>),
                grid.Column("country", header: "Country", format: @<text>@item.country</text>),
                grid.Column("modifiedDate", header: "Profile Modified", format: @<text>@item.modifiedDate</text>),
                grid.Column("ciscontactid", header: "CIS ID", format: @<text>@item.ciscontactid</text>)
                         )
                 )

</div>  

The jquery call:

 $('#grid').tableScroll({ height: 350 });

Answer 1

I made the mistake of using the container "gird" instead of the table "webgrid".

It should be:

$('#webgrid').tableScroll({ height: 350 });

Also, you need to create a javascript function to call this code and specify it in the webgrid UpdateAjaxCallback attribute.