在按 F12 键之前，Kendo 中的“每页项目数”和“{0} - {1} of {2}”不会显示在 UI 上

Question

我在 MVC 应用程序中使用 Kendo Grid。

@(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. 用户界面上未显示 {0} - {1}（共 {2} 个）
3. 当页面在浏览器上呈现时，页面大小下拉列表显示 1,2,3.. 但不是我的 pageSize 值（6,25,50,100），当我按 F12 键时，页面大小下拉列表显示正确。

有人可以帮我吗？

Answer 1

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

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

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

调用它的一个好地方是网格DataBound事件。