Looking for kendo-grid Keywords? Try Ask4Keywords

kendo-gridErste Schritte mit Kendo-Grid


Bemerkungen

Das Kendo UI-Grid ist ein leistungsstarkes Widget, mit dem Sie Daten über ihre Tabellendarstellung visualisieren und bearbeiten können. Es bietet eine Vielzahl von Optionen zum Darstellen und Durchführen von Vorgängen über die zugrunde liegenden Daten, z. B. Paging, Sortieren, Filtern, Gruppieren, Bearbeiten usw. Um das Raster mit Daten zu versorgen, können Sie entweder lokale oder Remote-Daten über Kendo bereitstellen DataSource-Komponente der Benutzeroberfläche, die als Vermittler verwendet wird.

Demo

Dojo (Sie können Online-Demos erstellen und mit anderen teilen)

Dokumentieren

Installation oder Setup

Wir können ein Kendo-UI-Grid in HTML5 / Javascript, ASP.NET MVC, JSP und PHP Projekt / Anwendung hinzufügen.


Befolgen Sie die folgenden Schritte, um ein Kendo-UI-Raster auf der HTML5-Seite hinzuzufügen.

  1. Erstellen Sie eine leere HTML5-Seite.

  2. Fügen Sie kendo.common.min.css und kendo.default.min.css ein . Fügen Sie ein Link-Tag innerhalb des Head-Tags hinzu.

  3. Die Kendo-UI-Bibliothek ist von Jquery abhängig. Fügen Sie also nach jQuery kendo.all.min.js und kendo.aspnetmvc.min.js ein.

  4. Es gibt zwei Möglichkeiten, ein Kendo UI-Raster zu instanziieren.

    • Aus einem leeren div-Element. In diesem Fall werden alle Rastereinstellungen in der Initialisierungsskriptanweisung bereitgestellt.
    • Aus einem vorhandenen HTML-Tabellenelement. In diesem Fall können einige der Rastereinstellungen aus den HTML-Attributen der Tabellenstruktur und der Elemente abgeleitet werden.

    In beiden Fällen wird das Grid als jQuery-Plugin registriert.

    Cdn path kann hier für die oben genannten Dateien gefunden werden.


Beispiel: Kendo-UI-Raster in HTML5-Seite - Leeres div-Element

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

Beispiel: Kendo-UI-Grid in HTML5-Seite - Vorhandenes HTML-Tabellenelement

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

Führen Sie die folgenden Schritte aus, um ein Kendo-UI-Raster in der ASP.NET MVC-Anwendung hinzuzufügen.


  1. Erstellen Sie ein ASP.NET MVC-Projekt
  2. Fügen Sie Javascript- und CSS-Dateien ein. Es gibt zwei Optionen, entweder eine lokale Kopie dieser Dateien oder die CDN-Dienste der Kendo UI.
  • Verwenden Sie lokales JavaScript und CSS

    Navigieren Sie zum Installationsort der Telerik-Benutzeroberfläche für ASP.NET MVC. Standardmäßig befindet es sich in C: \ Programme (x86) \ Telerik.

    Kopieren Sie das Verzeichnis js aus dem Installationsverzeichnis und fügen Sie es in den Ordner Scripts der Anwendung ein.

    Kopieren Sie das Stilverzeichnis aus dem Installationsverzeichnis und fügen Sie es in den Ordner Content der Anwendung ein.

    Benennen Sie das Verzeichnis Scripts / js in Scripts / Kendo um . Benennen Sie Inhalte / Stile in Inhalt / Kendo um .

    Öffnen Sie App_Start / BundleConfig.cs , um folgende Skript- und Stil-Bundles für die Telerik-Benutzeroberfläche für ASP.NET MVC hinzuzufügen.

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.
 

Verschieben Sie das jQuery-Bundle zum Head-Tag der Seite. Es ist standardmäßig am Ende der Seite. Rendern Sie das Telerik-UI für ASP.NET MVC-Skriptpaket nach jQuery.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
 
  • CDN-Dienste verwenden

    Fügen Sie kendo.common.min.css und kendo.default.min.css ein . Fügen Sie ein Link-Tag im Head-Tag des Layouts hinzu.

    Fügen Sie nach jQuery kendo.all.min.js und kendo.aspnetmvc.min.js ein .

    Wenn Sie den Telerik MVC Scheduler-Wrapper verwenden, fügen Sie nach kendo.all.min.js kendo.timezones.min.js ein .

    Cdn path kann hier für die oben genannten Dateien gefunden werden.

    Fügen Sie Ihrem Projekt Kendo.Mvc.dll- Verweis hinzu, und die DLL befindet sich in Standort- Wrapper / aspnetmvc / Binaries / MVC *.

    Der nächste Schritt besteht darin, ASP.NET MVC den Namespace Kendo.Mvc.UI mitzuteilen, in dem sich die serverseitigen Wrapper befinden. <add namespace="Kendo.Mvc.UI" /> in root web.config und View web.config hinzu.

  1. Um Ihr Setup zu überprüfen, fügen Sie das Kendo UI DatePicker-Widget in der View / Aspx-Seite hinzu.

Rasierer

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

ASPX

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