Descarga de la versión de prueba de Kendo UI para jQuery R2 2020 SP1
Kendo UI actualmente proporciona cuatro controles: Kendo UI para jQuery , Kendo UI para Angular , Kendo UI Support para React y Kendo UI Support para Vue . Kendo UI para jQuery es la biblioteca de UI más completa para crear aplicaciones web modernas.
Representación adaptable
Kendo UI para jQuery admite mejoras adaptativas para brindar a los clientes una experiencia uniforme en cualquier dispositivo.
Por ejemplo, cuando filtra o edita datos en un dispositivo móvil, la IU de Kendo se deslizará en la nueva pantalla del usuario, que es diferente de las operaciones en línea y emergentes en el escritorio.
Habilite el diseño receptivo
Para habilitar el renderizado adaptable, establezca el atributo móvil en verdadero o "teléfono":
- Si se establece en verdadero, el widget utilizará la representación adaptativa cuando se visualice en un navegador móvil.
- Si se establece en "teléfono", el widget se verá obligado a utilizar la representación adaptativa independientemente del tipo de navegador.
Nota importante : para el renderizado móvil, recomendamos configurar también la opción de altura. Si no se establece una altura libre, cada vista de la cuadrícula puede tener una altura diferente.
<div id = "grid"> </div>
<script>
$ ("# grid"). kendoGrid ({
columnas: [
{campo: "nombre"},
{campo: "edad"},
{comando: "destruir "}
],
fuente de datos: [
{nombre:" Jane Doe ", edad: 30},
{nombre:" John Doe ", edad: 33}
],
filtrable: verdadero,
editable: verdadero,
columnMenu: verdadero,
altura: 550,
móvil: "teléfono"
});
</script>
Configurar el panel en el dispositivo móvil
El panel móvil donde se coloca la cuadrícula adaptable no expandirá automáticamente su altura. Para agregar la cuadrícula adaptable a la aplicación móvil Kendo UI, establezca la configuración de estiramiento de cada vista en verdadero y luego aplique 100% de altura a cuadrícula. O defina una altura de cuadrícula de píxeles clara y omita la opción de estiramiento del panel.
Nota importante : cuando utilice la representación adaptativa de la cuadrícula en la aplicación móvil Kendo, aplique nuestro tema Menos basado.
El siguiente ejemplo demuestra cómo aplicar la opción Estirar.
<div id = "foo" data-role = "view" data-init = "onInit" data-stretch = "true">
<div id = "grid"> </div>
</div>
<script>
var gridConfig = {
columnas: [
{campo: "nombre"},
{campo: "edad"},
{comando: "destruir"}
],
fuente de datos: [
{nombre: "Jane Doe", edad: 30},
{nombre: " John Doe ", edad: 33}
],
filtrable: verdadero,
columnMenu: verdadero,
móvil:" teléfono ",
altura:" 100% "
};
función onInit () {
$ ("# cuadrícula"). kendoGrid (gridConfig);
}
var app = new kendo.mobile. Solicitud();
</script>
El siguiente ejemplo demuestra cómo aplicar la opción de altura.
<div id = "foo" data-role = "view" data-init = "onInit">
<div id = "grid"> </div>
</div>
<script>
var gridConfig = {
columnas: [
{campo : "nombre"},
{campo: "edad"},
{comando: "destruir"}
],
fuente de datos: [
{nombre: "Jane Doe", edad: 30},
{nombre: "John Doe", edad: 33 }
],
filtrable: verdadero,
columnMenu: verdadero,
móvil: "teléfono",
altura: "140 px" // la cuadrícula tendrá una altura de 140 px
};
$ ("# cuadrícula"). kendoGrid (gridConfig);
</script>
Cambiar el tamaño de la columna
Cuando el usuario coloca un dedo en el encabezado de la columna correspondiente, se activa la función de ajuste del tamaño de la columna en el dispositivo de pantalla táctil. Cuando aparece el icono de cambio de tamaño, el usuario puede ajustar el tamaño de la columna arrastrando.
Figura 1: Cuadrícula con columnas de tamaño variable en dispositivos móviles
Destruye la malla adaptable
En el modo adaptativo, la cuadrícula generará marcas auxiliares, si desea destruir los widgets manualmente, debe eliminarlos.
Destruye manualmente la cuadrícula:
- Llame a kendo.destroy () en el antepasado .k-pane-wrapper más cercano creado alrededor del widget Grid;
- Elimina todo el elemento .k-pane-wrapper del DOM.
Para recrear la cuadrícula, inserte un nuevo div en el mismo lugar donde se colocó originalmente la cuadrícula.