Looking for kendo-grid Keywords? Try Ask4Keywords

kendo-gridEmpezando con kendo-grid


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.

Manifestación

Dojo (Puedes hacer una demo en línea y compartirla con otros)

Documento

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.

  1. Crear una página html5 vacía.

  2. Incluya kendo.common.min.css y kendo.default.min.css . Añadir una etiqueta de enlace dentro de la etiqueta de la cabeza.

  3. 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.

  4. 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: "&nbsp;" }
                ],
                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.


  1. Crear ASP.NET MVC Project
  2. 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.

  1. 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") %>