kendo-grid Tutorial
Empezando con kendo-grid
Buscar..
Observaciones
La cuadrícula de la interfaz de usuario de Kendo es un potente widget que le permite visualizar y editar datos a través de su representación en la tabla. Proporciona una variedad de opciones sobre cómo presentar y realizar operaciones sobre los datos subyacentes, como paginación, clasificación, filtrado, agrupación, edición, etc. Para alimentar la cuadrícula con datos, puede suministrar datos locales o remotos a través del Kendo. Componente UI DataSource, utilizado como mediador.
Dojo (Puedes hacer una demo en línea y compartirla con otros)
Instalación o configuración
Podemos agregar la cuadrícula de Kendo-UI en HTML5 / Javascript, ASP.NET MVC, JSP y PHP proyecto / aplicación.
Siga los pasos a continuación para agregar la cuadrícula de la interfaz de usuario de kendo en la página HTML5.
Crear una página html5 vacía.
Incluya kendo.common.min.css y kendo.default.min.css . Añadir una etiqueta de enlace dentro de la etiqueta de la cabeza.
La biblioteca de Kendo-UI depende de Jquery. Por lo tanto, incluya kendo.all.min.js y kendo.aspnetmvc.min.js después de jQuery.
Hay dos formas posibles de instanciar una cuadrícula de Kendo UI.
- De un elemento div vacío. En este caso, todas las configuraciones de Grid se proporcionan en la declaración del script de inicialización.
- A partir de un elemento de tabla HTML existente. En este caso, algunos de los ajustes de Grid se pueden inferir de la estructura de la tabla y los elementos de los atributos HTML.
En ambos casos, la cuadrícula se registra como un complemento de jQuery.
Puede encontrar la ruta cdn aquí para los archivos mencionados anteriormente.
Ejemplo: Kendo-UI Grid en la página HTML5 - Elemento div vacío
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="grid">
</div>
<script>
var products = [{
ProductID: 11,
ProductName: "Chai",
}, {
ProductID: 22,
ProductName: "Chang",
}, {
ProductID: 33,
ProductName: "Aniseed Syrup",
}, {
ProductID: 44,
ProductName: "Chef Anton's Cajun Seasoning",
}, {
ProductID: 55,
ProductName: "Chef Anton's Gumbo Mix",
}];
$(document).ready(function () {
$("#grid").kendoGrid({
dataSource: {
data: products,
schema: {
model: {
id: "ProductID",
fields: {
ProductName: {
type: "string"
}
},
}
},
pageSize: 10
},
sortable: true,
filterable: true,
pageable: true,
columns: [
{ field: "ProductID", title: "ProductID" },
{ field: "ProductName", title: "ProductName" },
{ command: ["edit", "destroy"], title: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
Ejemplo: Kendo-UI Grid en la página HTML5 - Elemento de tabla HTML existente
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});
</script>
</div>
</body>
</html>
Siga los pasos a continuación para agregar la cuadrícula de Kendo-UI en la aplicación MVC de ASP.NET.
- Crear ASP.NET MVC Project
- Incluir archivos Javascript y CSS. Hay dos opciones: incluir una copia local de esos archivos o usar los servicios CDN de la interfaz de usuario de Kendo.
Usa JavaScript local y CSS
Vaya a la ubicación de instalación de la interfaz de usuario de Telerik para ASP.NET MVC. Por defecto, está en C: \ Archivos de programa (x86) \ Telerik.
Copie el directorio js desde la ubicación de instalación y péguelo en la carpeta Scripts de la aplicación.
Copie el directorio de estilos desde la ubicación de instalación y péguelo en la carpeta Contenido de la aplicación.
Cambie el nombre del directorio Scripts / js a Scripts / kendo . Renombrar Contenido / estilos a Contenido / kendo .
Abra App_Start / BundleConfig.cs para agregar los paquetes de estilos y secuencias de comandos que se encuentran debajo de la interfaz de usuario de Telerik para ASP.NET MVC.
bundles.Add(new ScriptBundle("~/bundles/kendo").Include(
"~/Scripts/kendo/kendo.all.min.js",
// "~/Scripts/kendo/kendo.timezones.min.js", // uncomment if using the Scheduler
"~/Scripts/kendo/kendo.aspnetmvc.min.js"));
bundles.Add(new StyleBundle("~/Content/kendo/css").Include(
"~/Content/kendo/kendo.common.min.css",
"~/Content/kendo/kendo.default.min.css"));
bundles.IgnoreList.Clear(); //Tell the ASP.NET bundles to allow minified files in debug mode.
Mueva el paquete jQuery a la etiqueta de cabecera de la página. Está al final de la página por defecto. Procese el paquete de scripts Telerik UI para ASP.NET MVC después de jQuery.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
Utilice los servicios de CDN
Incluya kendo.common.min.css y kendo.default.min.css . Agregue una etiqueta de enlace dentro de la etiqueta principal del diseño.
Incluye kendo.all.min.js y kendo.aspnetmvc.min.js después de jQuery.
Si usa el envoltorio del Programador MVC de Telerik, incluya kendo.timezones.min.js después de kendo.all.min.js .
Puede encontrar la ruta cdn aquí para los archivos mencionados anteriormente.
Agregue la referencia Kendo.Mvc.dll a su proyecto y la DLL está disponible en las envolturas de ubicación / aspnetmvc / Binaries / MVC *.
El siguiente paso es hacer que ASP.NET MVC conozca el espacio de nombres Kendo.Mvc.UI donde se encuentran las envolturas del lado del servidor. Para esto, agregue
<add namespace="Kendo.Mvc.UI" />etiqueta de espacio de nombres en root web.config y View web.config.
- Para verificar su configuración, a continuación agregue el widget DatePicker de la interfaz de usuario de Kendo en la página de vista / aspx.
Maquinilla de afeitar
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>