kendo-ui - mvc - telerik jquery demo

Cómo cambiar el tamaño de la página dinámicamente en Kendo UI Grid

Question

Tengo una cuadrícula de interfaz de usuario de Kendo que muestra más de 1000 datos. También tengo una lista desplegable para diferentes tamaños de página: 15, 25, 50, 100. Al seleccionar un tamaño de página, ¿cómo podemos cambiar el tamaño de página de la cuadrícula de la interfaz de usuario de Kendo?

Answer 1

Aquí está el último uso de ASP.NET MVC Helper

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

Answer 2

Para ampliar la respuesta de Rick Glos :

Puede configurar el Tamaño de página paginable en una matriz de objetos genéricos, por lo que puede tener una opción "Todos" sin tener que configurar los tamaños de página en JavaScript.

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

Answer 3

Puede establecer el tamaño de página en el evento de cambio del cuadro combinado. (También vea el ejemplo de 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
    }
});

Answer 4

Rick lo ha dicho de una buena manera y más explicado si alguien pierde dónde se debe hacer aquí es una pieza de código para saber dónde se debe hacer con una captura de pantalla corta

@(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 (nuevo 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")
                                                                ))

Espero que esto ayude

Answer 5

También está integrado en la última versión de la cuadrícula haciendo lo siguiente en js

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

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

Answer 6

http://docs.kendoui.com/api/wrappers/php/Kendo/UI/GridPageable

$pageable = new /Kendo/UI/GridPageable();
$pageable->pageSizes(array(20,50,100));