Looking for kendo-grid Answers? Try Ask4KnowledgeBase
Looking for kendo-grid Keywords? Try Ask4Keywords

kendo-gridIniziare con la kendo-grid


Osservazioni

La griglia UI di Kendo è un potente widget che ti permette di visualizzare e modificare i dati tramite la sua rappresentazione tabellare. Fornisce una varietà di opzioni su come presentare ed eseguire operazioni sui dati sottostanti, come paging, ordinamento, filtraggio, raggruppamento, modifica, ecc. Per alimentare la griglia con i dati, è possibile fornire dati locali o remoti tramite il Kendo Componente DataSource UI, utilizzato come mediatore.

dimostrazione

Dojo (puoi creare demo online e condividerle con altri)

Documento

Installazione o configurazione

Possiamo aggiungere la griglia Kendo-UI in HTML5 / Javascript, ASP.NET MVC, JSP e progetto / applicazione PHP.


Segui i passaggi seguenti per aggiungere la griglia di Kendo-UI nella pagina HTML5.

  1. Crea una pagina HTML vuota.

  2. Includere kendo.common.min.css e kendo.default.min.css . Aggiungi un tag link all'interno del tag head.

  3. La libreria Kendo-UI dipende da Jquery. Quindi, includi kendo.all.min.js e kendo.aspnetmvc.min.js dopo jQuery.

  4. Esistono due modi per creare un'istanza di una griglia di KI UI.

    • Da un elemento div vuoto. In questo caso tutte le impostazioni Grid sono fornite nell'istruzione dello script di inizializzazione.
    • Da un elemento tabella HTML esistente. In questo caso, alcune delle impostazioni della griglia possono essere desunte dalla struttura della tabella e dagli attributi HTML degli elementi.

    In entrambi i casi la griglia è registrata come plugin jQuery.

    Puoi trovare il percorso cdn qui per i file sopra citati.


Esempio: Griglia Kendo-UI nella pagina HTML5 - Elemento div vuoto

<!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>
 

Esempio: griglia Kendo-UI nella pagina HTML5 - Elemento tabella HTML esistente

<!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>
 

Seguire i seguenti passaggi per aggiungere la griglia di Kendo-UI nell'applicazione MVC di ASP.NET.


  1. Creare un progetto MVC ASP.NET
  2. Include file Javascript e CSS. Esistono due opzioni che includono una copia locale di tali file o utilizzano i servizi CDN per l'UI di Kendo.
  • Utilizza JavaScript locale e CSS

    Passare al percorso di installazione dell'interfaccia utente di Telerik per ASP.NET MVC. Per impostazione predefinita, si trova in C: \ Programmi (x86) \ Telerik.

    Copia la directory js dal percorso di installazione e incollalo nella cartella Script dell'applicazione.

    Copiare la directory degli stili dal percorso di installazione e incollarla nella cartella Contenuto dell'applicazione.

    Rinominare la directory Scripts / js in Scripts / kendo . Rinominare il contenuto / gli stili in Content / kendo .

    Apri App_Start / BundleConfig.cs per aggiungere i pacchetti sotto lo script e lo stile per l'interfaccia utente di Telerik per 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.
 

Sposta il pacchetto jQuery sul tag head della pagina. È alla fine della pagina per impostazione predefinita. Renderizza l'interfaccia utente di Telerik per il pacchetto di script ASP.NET MVC dopo jQuery.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
 
  • Utilizzare i servizi CDN

    Includere kendo.common.min.css e kendo.default.min.css . Aggiungi un tag link all'interno del tag head del layout.

    Includi kendo.all.min.js e kendo.aspnetmvc.min.js dopo jQuery.

    Se si utilizza il wrapper Telerik MVC Scheduler, includere kendo.timezones.min.js dopo kendo.all.min.js .

    Puoi trovare il percorso cdn qui per i file sopra citati.

    Aggiungi il riferimento a Kendo.Mvc.dll nel tuo progetto e la DLL è disponibile nei wrapper di posizione / aspnetmvc / Binaries / MVC *.

    Il passaggio successivo è consentire a ASP.NET MVC di conoscere lo spazio dei nomi Kendo.Mvc.UI in cui si trovano i wrapper lato server. Per questo aggiungi <add namespace="Kendo.Mvc.UI" /> tag dello spazio dei nomi in root web.config e visualizza web.config.

  1. Per verificare la tua configurazione, aggiungi sotto il widget DatePicker UI di Kendo nella pagina di visualizzazione / aspx.

Rasoio

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

ASPX

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