kendo-gridAan de slag met kendo-grid


Opmerkingen

Het Kendo UI-raster is een krachtige widget waarmee u gegevens kunt visualiseren en bewerken via de tabelweergave. Het biedt een verscheidenheid aan opties voor het presenteren en uitvoeren van bewerkingen op de onderliggende gegevens, zoals paging, sorteren, filteren, groeperen, bewerken, enz. Om het raster van gegevens te voorzien, kunt u lokale of externe gegevens leveren via de Kendo UI DataSource-component, gebruikt als bemiddelaar.

demonstratie

Dojo (u kunt een online demo maken en deze delen met anderen)

Document

Installatie of instellingen

We kunnen een Kendo-UI-raster toevoegen in HTML5 / Javascript, ASP.NET MVC, JSP en PHP project / applicatie.


Volg de onderstaande stappen om een kendo-UI-raster toe te voegen aan de HTML5-pagina.

  1. Maak een lege html5-pagina.

  2. Neem kendo.common.min.css en kendo.default.min.css op . Voeg een link-tag toe aan de head-tag.

  3. Kendo-UI-bibliotheek is afhankelijk van Jquery. Dus omvatten kendo.all.min.js en kendo.aspnetmvc.min.js na jQuery.

  4. Er zijn twee mogelijke manieren om een Kendo UI-raster te instantiëren.

    • Van een leeg div-element. In dit geval worden alle rasterinstellingen verstrekt in de initialisatiescriptverklaring.
    • Van een bestaand HTML-tabelelement. In dit geval kunnen sommige van de rasterinstellingen worden afgeleid uit de tabelstructuur en HTML-elementen van elementen.

    In beide gevallen wordt het raster geregistreerd als een jQuery-plug-in.

    U kunt hier het CDN-pad vinden voor bovengenoemde bestanden.


Voorbeeld: Kendo-UI-raster op HTML5-pagina - leeg 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>
 

Voorbeeld: Kendo-UI Grid op HTML5-pagina - Bestaand HTML-tabelelement

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

Volg de onderstaande stappen om een kendo-UI-raster toe te voegen in de ASP.NET MVC-toepassing.


  1. Maak ASP.NET MVC Project
  2. Neem Javascript- en CSS-bestanden op. Er zijn twee opties, ofwel een lokale kopie van die bestanden of de Kendo UI CDN-services gebruiken.
  • Gebruik lokale JavaScript en CSS

    Navigeer naar de installatielocatie van Telerik UI voor ASP.NET MVC. Standaard staat deze in C: \ Program Files (x86) \ Telerik.

    Kopieer de js- map van de installatielocatie en plak deze in de map Scripts van de toepassing.

    Kopieer de stijlenmap van de installatielocatie en plak deze in de map Inhoud van de toepassing.

    Wijzig de naam van de map Scripts / js in Scripts / kendo . Naam van inhoud / stijlen wijzigen in Inhoud / kendo .

    Open App_Start / BundleConfig.cs om onderstaande script- en stijlbundels toe te voegen voor Telerik UI voor 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.
 

Verplaats de jQuery-bundel naar de head-tag van de pagina. Het staat standaard aan het einde van de pagina. Render de Telerik UI voor ASP.NET MVC scriptbundel na jQuery.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
 
  • Gebruik CDN Services

    Neem kendo.common.min.css en kendo.default.min.css op . Voeg een link-tag toe binnen de head-tag van de lay-out.

    Neem kendo.all.min.js en kendo.aspnetmvc.min.js op na jQuery.

    Als u de Telerik MVC Scheduler-wrapper gebruikt, neemt u kendo.timezones.min.js op na kendo.all.min.js .

    U kunt hier het CDN-pad vinden voor bovengenoemde bestanden.

    Voeg Kendo.Mvc.dll- referentie toe aan uw project en de DLL is beschikbaar in locatie- wrappers / aspnetmvc / Binaries / MVC *.

    De volgende stap is om ASP.NET MVC op de hoogte te stellen van de Kendo.Mvc.UI-naamruimte waar zich de server-side wrappers bevinden. Voeg hiervoor <add namespace="Kendo.Mvc.UI" /> tag toe in root web.config en View web.config.

  1. Voeg hieronder de Kendo UI DatePicker-widget in view / aspx-pagina toe om uw instelling te verifiëren.

Scheermes

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

ASPX

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