Comenzando con kendo-grid

Instalación o configuración

Podemos agregar la cuadrícula Kendo-UI en HTML5/Javascript, ASP.NET MVC, JSP y proyecto/aplicación PHP.


Siga los pasos a continuación para agregar la cuadrícula kendo-UI en la página HTML5.


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

  2. Incluya kendo.common.min.css y kendo.default.min.css. Agregue una etiqueta de enlace dentro de la etiqueta principal.

  3. La biblioteca 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 crear una instancia de una cuadrícula de interfaz de usuario de Kendo.

    • From an empty div element. In this case all the Grid settings are provided in the initialization script statement.
    • From an existing HTML table element. In this case some of the Grid settings can be inferred from the table structure and elements HTML attributes.

    In both cases the grid is registered as a jQuery plugin.

    You can find cdn path here for above mentioned files.


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 kendo-UI en la aplicación ASP.NET MVC.


  1. Crear proyecto ASP.NET MVC
  2. Incluya 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.
  • Usar JavaScript local y CSS

     Navigate to the install location of Telerik UI for ASP.NET MVC. By default, it is in C:\Program Files (x86)\Telerik\. 
    
     Copy the **js** directory from the install location and paste it in the **Scripts** folder of the application. 
    
     Copy the **styles** directory from the install location and paste it in the **Content** folder of the application. 
    
     Rename the **Scripts/js** directory to **Scripts/kendo**. Rename **Content/styles** to **Content/kendo**.
    
     Open **App_Start/BundleConfig.cs** to add below script and style bundles for Telerik UI for 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 de jQuery a la etiqueta principal de la página. Está al final de la página por defecto. Renderice la IU de Telerik para el paquete de secuencias de comandos ASP.NET MVC después de jQuery.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
  • Usar servicios de CDN

    Include **kendo.common.min.css** and **kendo.default.min.css**. Add a link tag within the head tag of the layout.
    
    Include **kendo.all.min.js** and **kendo.aspnetmvc.min.js** after jQuery.
    

    If using the Telerik MVC Scheduler wrapper, include kendo.timezones.min.js after kendo.all.min.js.

    You can find cdn path here for above mentioned files.

    Add Kendo.Mvc.dll reference into your project and the DLL is available in location wrappers/aspnetmvc/Binaries/MVC*.

    The next step is to let ASP.NET MVC know of the Kendo.Mvc.UI namespace where the server-side wrappers are. For this add <add namespace="Kendo.Mvc.UI" /> namespace tag in root web.config and View web.config.

  1. Para verificar su configuración, agregue a continuación el widget DatePicker de la interfaz de usuario de Kendo en la página view/aspx.

Maquinilla de afeitar

@(Html.Kendo().DatePicker().Name("datepicker"))

ASPX

<%: Html.Kendo().DatePicker().Name("datepicker") %>