Подтвердить что ты не робот

Как изменить размер страницы динамически в сетке пользовательского интерфейса Kendo

У меня есть сетка пользовательского интерфейса Kendo, отображающая более 1000 данных. У меня также есть раскрывающийся список для разных размеров страницы - 15, 25, 50, 100. При выборе размера страницы, как мы можем изменить размер страницы сетки пользовательского интерфейса Kendo?

4b9b3361

Ответ 1

Вы можете установить размер страницы в событии изменения combobox. (Также см. пример JSBin.)

$("#comboBox").kendoComboBox({
    dataTextField: "text",
    dataValueField: "value",
    dataSource: [
        { text: 1 },
        { text: 2 },
        { text: 3 },
        { text: 4 },
        { text: 5 }
    ],
    change: function(e) {
      var grid = $("#grid").data("kendoGrid");
      grid.dataSource.pageSize(parseInt(this.value()));  // this.value() being the value selected in Combo
    }
});

Ответ 2

Здесь последний, используя ASP.NET MVC Helper

.Pageable(pager => pager.PageSizes(new int[] {20, 50, 100})) // Enable paging

Ответ 3

Он также встроен в последнюю версию сетки, выполнив следующее в js

pageable: {
    pageSizes: [10, 25, 50, 100]
}

http://docs.kendoui.com/api/web/pager

Ответ 4

Рик сказал это хорошим способом, более объясненным, если кто-то пропустит, где это будет сделано здесь, это фрагмент кода, чтобы узнать, где это сделать с коротким экраном оснастке

@(Html.Kendo().Grid(Model)
      .Name("SiteUserGrid")
      .Columns(columns =>
          {
              columns.Bound(u => u.LastName).Title("Last Name");
              columns.Bound(u => u.FirstName).Title("First Name");
              columns.Bound(u => u.UserName).Title("User Name");
              columns.Bound(u => u.EmailAddress).Title("Email Address");
              columns.Bound(u => u.AccessLevel).Title("Access Level");
              columns.Bound(u => u.Status).Title("Status");
              columns.Bound(u => u.UserId).Filterable(f => f.Enabled(false)).ClientTemplate(actionColumnTemplate).Title("Action").Sortable(false).Width(190);
          })
      .Pageable(pageable => pageable.ButtonCount(10))

.Pageable(pager = > pager.PageSizes(новый int [] {5,10,15,20,30,50,100}))

      .Selectable(selectable => selectable.Mode(GridSelectionMode.Single))
      .Sortable()
      .Filterable(filterable => filterable
                                    .Extra(false)
                                    .Operators(operators => operators
                                                                .ForString(str => str.Clear()
                                                                                     .StartsWith("Starts with")
                                                                                     .Contains("Contains")
                                                                                     .IsEqualTo("Is equal to")
                                                                ))

Надеюсь, что это поможет

Ответ 5

Чтобы расширить ответ Рик Глос:

Вы можете установить pageable PageSizes в массив общих объектов, поэтому у вас может быть опция "Все" без необходимости устанавливать pageSizes в JavaScript.

.Pageable(pager => pager.PageSizes(new object[] {20, 50, 100, "All"}))