web-dev-qa-db-fra.com

Comment utiliser la fonction dans le modèle de colonne Kendo Grid avec AngularJS

J'ai une colonne dans une grille de Kendo pour laquelle je veux effectuer une logique spécifique lors du rendu, et j'utilise Angular. Les colonnes de la grille sont configurées à l’aide de la directive k-columns.

Après avoir examiné la documentation , cela semblait simple: je pouvais ajouter l'option template à ma colonne, définir la fonction permettant d'exécuter ma logique et transmettre la valeur dataItem. Ce que j'ai ressemble à ceci:

k-columns='[{ field: "Name", title: "Name", 
    template: function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
    }
}]'

Cependant, cela provoque une erreur de syntaxe en se plaignant du caractère '{' qui constitue l'ouverture du bloc dans ma fonction. 

J'ai vu plusieurs exemples de définition d'une fonction de modèle dans ce format. Y a-t-il autre chose à faire pour que cela fonctionne? Est-ce que je fais quelque chose de mal? Existe-t-il un autre moyen de définir le modèle en tant que fonction et de lui transmettre les données de colonne? (J'ai essayé de créer une fonction sur mon $ scope, ce qui a fonctionné, sauf que je ne savais pas comment faire passer des données dans la fonction.) 

Merci de votre aide.

javascriptangularjstemplateskendo-uigrid
10
MWinstead

Il semble que la définition d'un modèle de colonne de cette manière ne soit pas prise en charge lors de l'utilisation d'AngularJS et de Kendo. Cette approche fonctionne pour les projets qui n'utilisent pas Angular (MVVM standard), mais échouent avec son inclusion.

La solution de contournement découverte par un de mes collègues consiste à créer le modèle à l'aide de ng-bind pour spécifier une fonction de modélisation sur la portée $, le tout à l'intérieur d'une plage:

template: "<span ng-bind=templateFunction(dataItem.Name)>#: data.Name# </span>"

C’est l’approche de création de modèles de colonne par défaut mise en œuvre par Telerik dans son code source Kendo-Angular. Je ne sais pas encore si la valeur data.Name est requise ou non, mais cela fonctionne pour nous.

14
MWinstead

Attention: ne pas avoir accès au Kendo pour tester le code pour le moment, mais cela devrait être très proche

Dans votre cas, vous affectez une chaîne à la valeur de k-colonnes et cette chaîne contient le mot function et votre accolade {.

Vous devez vous assurer que la fonction est exécutée ... quelque chose comme ceci:

k-columns=[
    {
       field: "Name",
       title: "Name", 
       template: (function (dataItem){
        // Perform logic on value with dataItem.Name
        // Return a string
       }())
    }
];

Notez la différence:

Nous créons un objet - un objet vraiment honnête, et nous utilisons un IIFE pour renseigner la propriété template.

5
Jeremy J Starcher

Peut-être que ce sera utile pour quelqu'un - ce code fonctionne aussi pour moi:

columns: [
                { field: "processed", title:"Processed", width: "100px",
                    template: '<input type="checkbox" ng-model="dataItem.processed" />' },

et vous obtenez la liaison à double sens avec quelque chose comme:

<div class="col-md-2">
            <label class="checkbox-inline">
                <input type="checkbox" ng-model="vm.selectedInvoice.processed">
                processed
            </label>
        </div>
3
Vladimir

Après des heures de recherche. Voici la conclusion qui a fonctionné: Accédez à vos données de grille sous forme de {{dataItem.masterNoteId}} et à vos données de portée $ simplement sous le nom de la propriété ou la fonction. 

Exemple

            template: '<a href="\\#/ops/order/{{orderId}}/note/{{dataItem.masterNoteId}}"><i class="fa fa-edit"></i></a>',

J'espère vraiment que cela sauve la vie de quelqu'un :)

0
Nour Lababidi