剑道中的"Items per page"和"{0} - {1} of {2}"在我按 F12 键之前不会显示在 UI 上

Question

我在MVC应用程序中使用Kendo网格。

@(Html.Kendo().PanelBar().Name("panelbar").ExpandMode(PanelBarExpandMode.Single).SelectedIndex(0).Items(panelbar =>
{
panelbar.Add().Encoded(false).Text("<div Customer </div>").Content(@<div>
@(Html.Kendo().Grid(Model).Name("grid_messageGroup").Columns(columns =>
{
columns.Bound(f => f.Title).Title("TitleName");
columns.Bound(f => f.Message).Title("MessageTitle");
columns.Bound(f => f.MessageBoard).Hidden().IncludeInMenu(false);
})
.Events(e => e.CustomEvent)
.Reorderable(reoder => reoder.Columns(true))
.HtmlAttributes(new { @class = "styleCSS" })
.Sortable(sortable => sortable.AllowUnsort(false))
.ColumnMenu(columnMenu => columnMenu
.Messages(columnMenuMessages => columnMenuMessages
.SortAscending(SortAscending)
.SortDescending(SortDescending)
.Columns(Columns)
.Filter(Filter)
)
)
.Selectable().Sortable().Filterable(filterable => filterable.Extra(true)
.Messages(messages => messages.Filter(Filter).Clear(Clear).Info(Info))
.Operators(operators => operators.ForString(str => str.Clear().Contains(ContainsColumnFilterOperator)).ForEnums(en => en.Clear().IsEqualTo(EqualsColumnFilterOperator)))).Resizable(resize => resize.Columns(true))
.ClientDetailTemplateId("template")
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false))
.Filterable(filterable => filterable.Extra(false).Operators(operators => operators.ForString(str => str.Clear().Contains(ContainsColumnFilterOperator))
.ForDate(d => d.Clear().IsEqualTo(EqualsColumnFilterOperator)
.IsLessThan(LessThanColumnFilterOperator)
.IsGreaterThan(GreaterThanColumnFilterOperator))
.ForEnums(en => en.Clear().IsEqualTo(EqualsColumnFilterOperator))))
.Pageable(pager => pager
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(new[] { 6, 25, 50, 100 })
.Messages(pagerMessages => pagerMessages
.Display(KendoGrid.Display)
.Empty(KendoGrid.EmptyListView)
.First(KendoGrid.FirstPageText)
.ItemsPerPage(KendoGrid.ItemsPerPage)
.Last(KendoGrid.LastPageText)
.Next(KendoGrid.NextPageText)
.Previous(KendoGrid.PreviousPageText)
.MorePages(KendoGrid.MorePagesText)
.AllPages(KendoGrid.AllPages)
)
)
.NoRecords(GridNoRecordsFound))
</div>);
panelbar.Add().Encoded(false).Text("<div> PublicMessageAddCustomers </div>").Content(@<div>
@(Html.Kendo().Grid(Model).Name("grid_recipient").Columns(columns =>
{
columns.Bound(f => f.Name).Title("CustomName");
columns.Bound(f => f.CustomName).Title("CustomTitle");
})
.HtmlAttributes(new { @class = "CSSStyleClass" })
.ColumnMenu(columnMenu => columnMenu
.Messages(columnMenuMessages => columnMenuMessages
.SortAscending(SortAscending)
.SortDescending(SortDescending)
.Columns(Columns)
.Filter(Filter)
)
)
.Reorderable(reoder => reoder.Columns(true))
.Selectable()
.Sortable()
.Scrollable()
.Resizable(resize => resize.Columns(true))
.Pageable(pager => pager
.Numeric(true)
.Info(true)
.PreviousNext(true)
.Refresh(false)
.PageSizes(new[] {6, 25, 50, 100})
.Messages(pagerMessages => pagerMessages
.Display(KendoGrid.Display)
.Empty(KendoGrid.EmptyListView)
.First(KendoGrid.FirstPageText)
.ItemsPerPage(KendoGrid.ItemsPerPage)
.Last(KendoGrid.LastPageText)
.Next(KendoGrid.NextPageText)
.Previous(KendoGrid.PreviousPageText)
.MorePages(KendoGrid.MorePagesText)
.AllPages(KendoGrid.AllPages)
)
)
.NoRecords(GridNoRecordsFound)
.DataSource(dataSource => dataSource.Ajax().ServerOperation(false))
.Filterable(filterable => filterable.Extra(false)
.Messages(messages => messages.Filter(Filter).Clear(Clear).Info(Info))
.Operators(operators => operators.ForString(str => str.Clear().Contains(ContainsColumnFilterOperator)).ForEnums(en => en.Clear().IsEqualTo(EqualsColumnFilterOperator)))).Resizable(resize => resize.Columns(true)))
</div>);
}))

除了，一切都很好

1. ">每页项目数"；直到我按下F12键，文本才显示在UI中，这是一种奇怪的行为
2. ｛2｝的｛0｝-｛1｝未显示在UI上
3. 当在浏览器上呈现页面时，页面大小下拉列表显示1,2,3..，但不是我的页面大小值(6,25,50100(。当我按F12键时，页面尺寸下拉列表显示正确

有人能帮我吗？

Answer 1

在面板中使用网格时，我也遇到过同样的问题。当您按F12时，您正在触发窗口上的调整大小，这也会导致寻呼机调整大小并看起来像您期望的那样。

我目前使用的修复方法是调用网格的寻呼机控件上的resize函数。

<script>
var grid = $("#grid_messageGroup").data("kendoGrid");
grid.pager.resize();
</script>

一个很好的调用方法是从网格的DataBound事件调用。