kendo-grid Tutoriel
Commencer avec le kendo-grid
Recherche…
Remarques
La grille du Kendo UI est un puissant widget qui vous permet de visualiser et de modifier des données via sa représentation sous forme de tableau. Il fournit diverses options sur la présentation et l'exécution d'opérations sur les données sous-jacentes, telles que la pagination, le tri, le filtrage, le regroupement, l'édition, etc. Pour alimenter la grille avec des données, vous pouvez fournir des données locales Composant UI DataSource, utilisé comme médiateur.
Dojo (Vous pouvez faire une démonstration en ligne et la partager avec d'autres)
Installation ou configuration
Nous pouvons ajouter une grille Kendo-UI dans HTML5 / Javascript, ASP.NET MVC, JSP et un projet / application PHP.
Veuillez suivre les étapes ci-dessous pour ajouter une grille de kendo-UI dans la page HTML5.
Créer une page HTML vide.
Incluez kendo.common.min.css et kendo.default.min.css . Ajoutez une balise de lien dans la balise head.
La bibliothèque Kendo-UI dépend de Jquery. Donc, incluez kendo.all.min.js et kendo.aspnetmvc.min.js après jQuery.
Il y a deux manières possibles d'instancier une grille du Kendo UI.
- D'un élément div vide. Dans ce cas, tous les paramètres de grille sont fournis dans l'instruction de script d'initialisation.
- A partir d'un élément de tableau HTML existant. Dans ce cas, certains paramètres de la grille peuvent être déduits de la structure de la table et des attributs HTML des éléments.
Dans les deux cas, la grille est enregistrée en tant que plug-in jQuery.
Vous pouvez trouver le chemin cdn ici pour les fichiers mentionnés ci-dessus.
Exemple: Grille Kendo-UI dans la page HTML5 - Élément div vide
<!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: " " }
],
editable: "inline"
});
});
</script>
</body>
</html>
Exemple: Grille Kendo-UI dans la page HTML5 - Elément de tableau HTML existant
<!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>
Veuillez suivre les étapes ci-dessous pour ajouter une grille de kendo-UI dans ASP.NET MVC Application.
- Créer un projet ASP.NET MVC
- Inclure les fichiers Javascript et CSS. Il existe deux options: inclure une copie locale de ces fichiers ou utiliser les services CDU Kendo UI.
Utiliser JavaScript et CSS local
Naviguez jusqu'à l'emplacement d'installation de Telerik UI pour ASP.NET MVC. Par défaut, il se trouve dans C: \ Program Files (x86) \ Telerik.
Copiez le répertoire js à partir de l'emplacement d'installation et collez-le dans le dossier Scripts de l'application.
Copiez le répertoire de styles à partir de l'emplacement d'installation et collez-le dans le dossier Contenu de l'application.
Renommez le répertoire Scripts / js en scripts / kendo . Renommez le contenu / les styles en contenu / kendo .
Ouvrez App_Start / BundleConfig.cs pour ajouter les ensembles de scripts et de styles ci-dessous pour l'interface utilisateur de Telerik pour 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.
Déplacez le bundle jQuery vers la balise head de la page. C'est à la fin de la page par défaut. Rendu l'interface utilisateur Telerik UI pour ASP.NET MVC après jQuery.
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/kendo")
Utiliser les services CDN
Incluez kendo.common.min.css et kendo.default.min.css . Ajoutez une balise de lien dans la balise head de la présentation.
Incluez kendo.all.min.js et kendo.aspnetmvc.min.js après jQuery.
Si vous utilisez le wrapper Telerik MVC Scheduler, incluez kendo.timezones.min.js après kendo.all.min.js .
Vous pouvez trouver le chemin cdn ici pour les fichiers mentionnés ci-dessus.
Ajoutez la référence Kendo.Mvc.dll dans votre projet et la DLL est disponible dans les wrappers d' emplacement / aspnetmvc / Binaries / MVC *.
L'étape suivante consiste à laisser ASP.NET MVC connaître l'espace de noms Kendo.Mvc.UI où se trouvent les wrappers côté serveur. Pour cela, ajoutez la
<add namespace="Kendo.Mvc.UI" />dans la racine web.config et View web.config.
- Pour vérifier votre configuration, veuillez ajouter ci-dessous le widget DatePicker de l'interface utilisateur Kendo dans la page view / aspx.
Le rasoir
@(Html.Kendo().DatePicker().Name("datepicker"))
ASPX
<%: Html.Kendo().DatePicker().Name("datepicker") %>