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

kendo-gridRozpoczęcie pracy z kendo-grid


Uwagi

Siatka Kendo UI to potężny widget, który pozwala wizualizować i edytować dane poprzez reprezentację tabeli. Zapewnia różnorodne opcje prezentowania i wykonywania operacji na bazowych danych, takich jak stronicowanie, sortowanie, filtrowanie, grupowanie, edycja itp. Aby zasilić siatkę danymi, możesz dostarczyć dane lokalne lub zdalne za pośrednictwem Kendo Komponent DataSource interfejsu użytkownika, używany jako mediator.

Próbny

Dojo (możesz zrobić demo online i udostępnić je innym)

Dokument

Instalacja lub konfiguracja

Możemy dodać siatkę Kendo-UI w projektach / aplikacjach HTML5 / JavaScript, ASP.NET MVC, JSP i PHP.


Wykonaj poniższe kroki, aby dodać siatkę kendo-UI na stronie HTML5.

  1. Utwórz pustą stronę HTML5.

  2. Dołącz kendo.common.min.css i kendo.default.min.css . Dodaj tag link w tagu head.

  3. Biblioteka Kendo-UI zależy od Jquery. Więc dołącz kendo.all.min.js i kendo.aspnetmvc.min.js po jQuery.

  4. Istnieją dwa sposoby na utworzenie instancji siatki interfejsu Kendo.

    • Z pustego elementu div. W takim przypadku wszystkie ustawienia siatki są podane w instrukcji skryptu inicjalizacji.
    • Z istniejącego elementu tabeli HTML. W takim przypadku niektóre ustawienia siatki można wywnioskować ze struktury tabeli i atrybutów HTML elementów.

    W obu przypadkach siatka jest zarejestrowana jako wtyczka jQuery.

    Ścieżkę cdn można znaleźć tutaj dla wyżej wymienionych plików.


Przykład: Siatka Kendo-UI na stronie HTML5 - Pusty element div

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

Przykład: Siatka Kendo-UI na stronie HTML5 - Istniejący element tabeli HTML

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

Wykonaj poniższe kroki, aby dodać siatkę kendo-UI w aplikacji ASP.NET MVC.


  1. Utwórz projekt ASP.NET MVC
  2. Dołącz pliki JavaScript i CSS. Dostępne są dwie opcje: lokalna kopia tych plików lub skorzystanie z usług CDN Kendo UI.
  • Użyj lokalnego JavaScript i CSS

    Przejdź do lokalizacji instalacji interfejsu Telerik dla ASP.NET MVC. Domyślnie jest w C: \ Program Files (x86) \ Telerik.

    Skopiuj katalog js z lokalizacji instalacji i wklej go do folderu Scripts aplikacji.

    Skopiuj katalog styli z miejsca instalacji i wklej go w folderze Zawartość aplikacji.

    Zmień nazwę katalogu Scripts / js na Scripts / kendo . Zmień nazwę zawartości / stylów na zawartość / kendo .

    Otwórz App_Start / BundleConfig.cs, aby dodać poniższe pakiety skryptów i stylów dla interfejsu Telerik dla 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.
 

Przenieś pakiet jQuery do tagu head strony. Domyślnie znajduje się na końcu strony. Renderuj pakiet skryptu Telerik UI dla ASP.NET MVC po jQuery.

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
 
  • Skorzystaj z usług CDN

    Dołącz kendo.common.min.css i kendo.default.min.css . Dodaj tag łącza w tagu head układu.

    Dołącz kendo.all.min.js i kendo.aspnetmvc.min.js po jQuery.

    Jeśli używasz opakowania Telerik MVC Scheduler, dołącz kendo.timezones.min.js po kendo.all.min.js .

    Ścieżkę cdn można znaleźć tutaj dla wyżej wymienionych plików.

    Dodaj odniesienie Kendo.Mvc.dll do swojego projektu, a biblioteka DLL jest dostępna w wrapperach lokalizacji / aspnetmvc / Binaries / MVC *.

    Następnym krokiem jest powiadomienie ASP.NET MVC o przestrzeni nazw Kendo.Mvc.UI, w której znajdują się opakowania po stronie serwera. W tym celu dodaj <add namespace="Kendo.Mvc.UI" /> w katalogu głównym web.config i View web.config.

  1. Aby zweryfikować konfigurację, dodaj poniżej widżet Kendo UI DatePicker na stronie widoku / aspx.

Brzytwa

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

ASPX

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