Table des matières

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: 

<select kendo-drop-down-list
    k-option-label="'Select a computer...'"
    k-data-text-field="'name'"
    k-data-value-field="'id'"
    k-data-source="vm.computers">
</select>

Dans le fichier JS: 

vm.computers = [
    { id: 1, name: "MacBook Pro" },
    { id: 2, name: "MacBook Air" },
    { id: 3, name: "Mac Pro" }
];

Méthode 2

La deuxième méthode démontre l'utilisation d'options pour le <select>.

Dans le fichier HTML: 

<select name="" id="" kendo-drop-down-list
    k-options="vm.computerOptions">
</select>

Dans le fichier JS: 

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...'
};

Angular acces

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: 

<div kendo-grid="nomduCtrl.kendoGrid" k-options="nomduCtrl.gridOptions"></div>

Sources