it-swarm.com.de

So verwenden Sie die Funktion in der Kendo Grid Column Template mit AngularJS

Ich habe eine Spalte in einem Kendo-Grid, für die ich beim Rendern eine bestimmte Logik ausführen möchte, und verwende Angular. Ich habe die Rasterspalten mit der k-column-Direktive eingerichtet.

Nachdem ich die Dokumentation angesehen hatte, erschien es einfach: Ich konnte die Template-Option zu meiner Spalte hinzufügen, die Funktion definieren, die meine Logik ausführt, und den dataItem-Wert übergeben.

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

Das Ausführen dieses Befehls verursacht jedoch einen Syntaxfehler, der über das Zeichen '{' klagt, das die Öffnung des Blocks in meiner Funktion bildet. 

Ich habe mehrere Beispiele für die Definition einer Vorlagenfunktion in diesem Format gesehen. Gibt es noch etwas, das getan werden muss, damit dies funktioniert? Mache ich etwas falsch? Gibt es eine andere Möglichkeit, die Vorlage als Funktion zu definieren und die Spaltendaten an sie zu übergeben? (Ich habe versucht, eine Funktion für meinen $ scope zu erstellen, was funktioniert hat, es sei denn, ich konnte nicht herausfinden, wie man Daten an die Funktion übergeben kann.) 

Danke für deine Hilfe.

10
MWinstead

Es scheint, dass das Definieren einer Spaltenvorlage auf diese Weise bei der Verwendung von AngularJS und Kendo nicht unterstützt wird. Dieser Ansatz funktioniert für Projekte, die Angular (Standard-MVVM) nicht verwenden, schlägt jedoch fehl.

Ein Workaround, den ein Kollege von mir entdeckt hat, besteht darin, die Vorlage mit ng-bind zu erstellen, um eine Template-Funktion für den $ scope anzugeben, alles innerhalb eines Bereichs:

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

Dies ist der Standardansatz für die Erstellung von Spalten, der von Telerik in seinem Kendo-Angular-Quellcode implementiert wird. Ich weiß noch nicht, ob der data.Name-Wert erforderlich ist oder nicht, aber das funktioniert für uns.

14
MWinstead

Warnung: Ich habe momentan keinen Zugriff auf Kendo, um den Code zu testen. Dies sollte jedoch sehr nahe sein.

In Ihrem Fall weisen Sie dem Wert von k-column eine Zeichenfolge zu. Diese Zeichenfolge enthält das Wort function und Ihre geschweifte Klammer {.

Sie müssen sicherstellen, dass die Funktion ausgeführt wird ... in etwa wie folgt:

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

Beachten Sie den Unterschied:

Wir erstellen ein Objekt - ein echtes Objekt, das ehrlich ist - und wir verwenden ein IIFE , um die template-Eigenschaft aufzufüllen.

5

Vielleicht ist es für jemanden nützlich - dieser Code funktioniert auch für mich:

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

und Sie erhalten die bidirektionale Bindung mit etwas wie diesem:

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

Dies kann über das columns.template Parameter durch Bereitstellung einer Rückruffunktion, deren Parameter ein Objekt ist, das die Zeile darstellt. Wenn Sie der Zeile ein Feld mit dem Namen name geben, ist dies die Eigenschaft des Objekts, auf das Sie verweisen:

$("#grid").kendoGrid({
  columns: [ {
    field: "name",
    title: "Name",
    template: function(data) {
        return data.name + "has my respect."
    }
  }],
  dataSource: [ { name: "Jane Doe" }, { name: "John Doe" } ]
});

Weitere Informationen finden Sie auf Kendo's columns.template Referenzseite .

0
Bucket

Nach stundenlangem Suchen. Hier ist die Schlussfolgerung, die sich bewährt hat: Greifen Sie als {{dataItem.masterNoteId}} auf Ihre Grid-Daten zu und Ihre $ scope-Daten einfach als Eigenschaftsname oder Funktion. 

Beispiel

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

Ich hoffe wirklich, dass dies jemanden das Leben rettet :)

0
Nour Lababidi