Différences

Ci-dessous, les différences entre deux révisions de la page.

--- web:kendo [2015/08/08 18:05] – [Méthode 2] sgariepy
+++ web:kendo [2022/02/02 00:42] (Version actuelle) – modification externe 127.0.0.1
@@ Ligne 1: / Ligne 1: @@
 ====== Kendo UI ======
+Cette page s'intéresse à l'utilisation de Kendo UI avec AngularJS.
+TypeScript Definition : ''$ tsd query -r -o -a install kendo-ui''.  Ajouter la ligne au début du fichier:
+  /// <reference path="../../../typings/kendo-ui/kendo-ui.d.ts"/>
 ===== Kendo Dropdown List =====
 ==== Méthode 1 ====
+La première méthode démontre l'utilisation d'attributs Kendo pour le ''<select>''.
 Dans le fichier HTML:
 <code html>
-<select name="" id="" kendo-drop-down-list
+<select kendo-drop-down-list
     k-option-label="'Select a computer...'"
     k-data-text-field="'name'"
@@ Ligne 28: / Ligne 36: @@
 ==== Méthode 2 ====
+La deuxième méthode démontre l'utilisation d'options pour le ''<select>''.
 Dans le fichier HTML:
+<code html>
+<select name="" id="" kendo-drop-down-list
+    k-options="vm.computerOptions">
+</select>
+</code>
+Dans le fichier JS:
+<code javascript>
+vm.computerOptions = {
+    dataSource: {
+        data: [
+            { id: 1, name: "MacBook Pro" },
+            { id: 2, name: "MacBook Air" },
+            { id: 3, name: "Mac Pro" }
+        ]
+    },
+    dataTextField: 'name',
+    dataValueField: 'id',
+    optionLabel: 'Select a computer...'
+};
+</code>
 ====== Angular acces ======
@@ Ligne 35: / Ligne 69: @@
   angular.element("[kendo-grid]").data("kendoGrid")._data.filter(function(item) {return item.nom === "afsdf"; })
+La méthode ci-haut peut dépanner, mais le mieux c'est de nommer la grille avec l'attribut ''kendo-grid'':
+<code html>
+<div kendo-grid="nomduCtrl.kendoGrid" k-options="nomduCtrl.gridOptions"></div>
+</code>
+====== Sources ======
+  * [[http://www.pluralsight.com/courses/kendo-ui-angularjs-from-scratch|Kendo UI and AngularJS from Scratch]]