开发者

Razor WebGrid doesn't keep scrollbar position

Whenever I page or sort my ajax enabled webgrid, my scrollbar position is reset to the top of the page. Is there a way to maintain the scrollbar position?

@model Registrar.WebUI.Models.InstructorPageViewModel

@{
var grid = new WebGrid(canPage: true, 
                        canSort: true, 
                        rowsPerPage: Model.PagingInfo.ItemsPerPage, 
                        ajaxUpdateContainerId: "grid");
grid.Bind(Model.Instructors, rowCount:Model.PagingInfo.TotalItems, autoSortAndPage:false);
grid.Pager(WebGridPagerModes.All);
}

<div id="grid">
 @grid.GetHtml(columns: grid.Columns(
   开发者_如何学Python                     grid.Column(format: x => Html.ActionLink("Edit", "Edit", new {id=x.Id})),
                        grid.Column("FirstName", "First Name"),
                        grid.Column("LastName", "Last Name"),
                        grid.Column("Email"),
                        grid.Column("UserName", "User Name"),
                        grid.Column("Phone")                            )
                  )                      
</div>


This is because generated sort link in your header has href="#". I've got the same problem and this is my solution.

This is my _grid.cshtml partial view

@{
  var grid = new WebGrid(Model.LeaseOffers, canPage: false, ajaxUpdateContainerId: "offerGrid", ajaxUpdateCallback: "afterLoad()");
}
<div id="offerGrid" class="offer-table-wrapper">
@grid.GetHtml(
  rowStyle: "offer-table-tr-odd",
  alternatingRowStyle: "offer-table-tr-even",
  columns: grid.Columns(
    grid.Column("ProviderLogo", "", format: @<img src="@Url.Content(string.Format(Constants.LeaseOfferProviderLogoContentUrlFormat, item.ProviderId))" />, style: "col-first", canSort: false),
    grid.Column("ProviderName", "Leasingodawca", format: @<div>@item.ProviderName</div>, style: "col-name"),
    grid.Column("DownPayment", "Udział Własny", format: @<div>@item.DownPayment.ToString(Constants.PercentDataToStringFormat)</div>, style: "col-third"),
    grid.Column("LeasePeriod", "Okres leasingu", format: @<div>@string.Format(Constants.LeasePeriodDataFormat, item.LeasePeriod)</div>),
    grid.Column("LeasePayment", "Rata leasingu", format: @<div>@string.Format(Constants.MoneyDataFormat, item.LeasePayment)</div>),
    grid.Column("ResidualValue", "Wartość wykupu", format: @<div>@item.ResidualValue.ToString(Constants.PercentDataToStringFormat)</div>),
    grid.Column("TotalLeasePayments", "Suma opłat", format: @<div>@item.TotalLeasePayments.ToString(Constants.PercentDataToStringFormat)</div>),
    grid.Column("Actions", "", format: @<div><a href="@Url.LeaseAssetDetailsWithLeaseOffer(Model.LeaseAssetId, (int)item.Id)"><img src="@Href("~/Modules/LeaseBroker.Orchard.Module/Content/Images/Mockups/wezleasing.png")"/></a></div>, style: "col-last", canSort: false)
  ),
  htmlAttributes: new { cellpadding = "0", cellspacing = "0" }
)
<script language="javascript">
  function afterLoad() {
    $("#offerGrid > table > thead > tr > th > a").attr('href', 'javascript:void(0)');
  }
  jQuery(document).ready(function ($) {
    afterLoad();
  });
</script>

Just after grid is loading i'm replacing all href attributes in header links into "javascript:void(0)"


You need to make sure that autopostback is disabled, It sounds like your page is redirecting, you just may not be noticing as it is happening so fast.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜