Kendo UI Grid Scrollable

时间:2015-09-16 11:11:39

标签: jquery css kendo-grid

我有一个可滚动的Kendo网格。即使我在网格中转到下一页,滚动条也会停留在上一页的相同位置。

以下是Kendo网格的代码:

@(Html.Kendo().Grid<Entrada.CustomerPortal.UI.Models.JobReport>()
.Name("JobReportGrid")
  .ToolBar(tools => tools.Pdf())
  .Pdf(pdf => pdf
  .AllPages()
  .FileName("Kendo UI Grid Export.pdf")
  .ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
  .ToolBar(tools => tools.Excel())
  .Excel(excel => excel
  .AllPages(true)
  .FileName("Kendo UI Grid Export.xlsx")
  .ProxyURL(Url.Action("Excel_Export_Save", "JobReports")))
.ColumnMenu()
.Columns(columns =>
{
    columns.Bound(p => p.JobNumber)//.Title("Job <br/> Number")
        .Width(colWidth["Job Number"]).
        ClientTemplate("<a class='jobReportGridJN' jnum='#=JobNumber#'>" + "#=JobNumber#" + "</a>"+
    @" #if(STAT== true) {#  <span><img src='" + Url.Content("~/Images/stat-icon.png") + "'> </span>#}#");
   // ClientTemplate(@Html.ActionLink("#=JobNumber#", "JobDetails", "JobDetails", new { JobNum = "#=JobNumber#" }, new { target = "DetailsViewPV" }).ToHtmlString() +
   // @" #if(STAT== true) {#  <span><img src='" + Url.Content("~/Images/stat-icon.png") + "'> </span>#}#");

    columns.Bound(p => p.DictatorID);
    columns.Bound(p => p.JobType);//.Title("Job <br/> Type");
    columns.Bound(p => p.DeviceGenerated)//.Title("Device <br/> Generated")
        .Width(colWidth["Device Generated"]);
    columns.Bound(p => p.AppointmentDate)//.Title("Appointment <br/> Date")
        .Width(colWidth["Appointment Date"])
        .Format(colFormat["Appointment Date"]);
    columns.Bound(p => p.InProcess)//.Title("In <br/> Process")
        .Width(colWidth["In Process"])
        .Format(colFormat["In Process"]);
    columns.Bound(p => p.EditingComplete)
        .Width(colWidth["Editing Complete"])
        .Format(colFormat["Editing Complete"]);
    columns.Bound(p => p.JobStatus);//.Title("Job <br/> Status");
    columns.Bound(p => p.MRN);
    columns.Bound(p => p.Patient);
})
.Groupable()
.Selectable(selectable => selectable
.Mode(GridSelectionMode.Single)
.Type(GridSelectionType.Row))
.DataSource(dataSource => dataSource
    .Ajax()
    .Read(read => read
        .Action("JobSearchPaginationGrid", "JobReports")
        .Data("residentsReadData"))
    .Events(events => events.Error("error_handler"))
    .PageSize((int)ViewData["PageSize"])
    .Group(group => group.Add<string>((string)TempData["GridGroupBy"]))
    .ServerOperation(true)
    )
.Pageable(pager => pager.Messages(Info => Info.Empty("No Results Found")))
.Sortable()
.Resizable(resize => resize.Columns(true))
.Scrollable().Selectable(s => s.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
)

优先级非常高。

谢谢,

1 个答案:

答案 0 :(得分:0)

一些解决方法:

var grid = $('#test_grid').data('kendoGrid');
var pager = grid.pager;
pager.bind('change', test_pagechange);

function test_pagechange(e){
    $('#test_grid').data('kendoGrid').content.scrollTop();
}