web-dev-qa-db-ja.com

AngularJSを使用したKendo Grid列テンプレートの関数の使用方法

レンダリング時に特定のロジックを実行したい剣道グリッドに列があり、Angularを使用しています。 k-columnsディレクティブを使用してグリッド列を設定しています。

ドキュメント を見た後、それは単純に思えました。列にテンプレートオプションを追加し、ロジックを実行する関数を定義して、dataItem値を渡すことができます。次のようになります。

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

ただし、これを実行すると、関数のブロックの開始を形成する文字「{」について文法エラーが発生します。

この形式でテンプレート関数を定義するいくつかの例を見てきました。これが機能するために必要な他のことはありますか？何か間違ったことをしていますか？テンプレートを関数として定義し、列データをそれに渡す別の方法はありますか？ （私は$ scopeで関数を作成しようとしましたが、データが関数に渡される方法を理解できなかった以外は機能しました。）

ご協力ありがとうございました。

javascriptangularjstemplateskendo-uigrid
10
MWinstead

AngularJSとKendoを使用する場合、この方法で列テンプレートを定義することはサポートされていないようです。このアプローチは、Angular（標準MVVM））を使用しないプロジェクトで機能しますが、これを含めると失敗します。

私の同僚が発見した回避策は、ng-bindを使用してテンプレートを構築し、すべての範囲内で$ scopeにテンプレート関数を指定することです。

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

これは、TelerikがKendo-Angularソースコードで実装するデフォルトの列テンプレートアプローチです。 data.Name値が必要かどうかはまだわかりませんが、これでうまくいきます。

14
MWinstead

警告：現時点ではコードをテストするための剣道へのアクセス権はありませんが、これは非常に近いはずです

あなたのケースでは、k-columnsの値に文字列を割り当てており、その文字列にはWord functionと中括弧{が含まれています

関数が実行されることを確認する必要があります...次のようなもの：

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

違いに注意してください：

オブジェクトを作成します-誠実に正直なオブジェクトであり、 [〜＃〜] iife [〜＃〜] を使用してtemplateプロパティを設定します。

5
Jeremy J Starcher

多分、それは誰かにとって役に立つでしょう-このコードも私にとってはうまくいきます：

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

そして、あなたはこのようなもので双方向バインディングを取得します：

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

これはcolumns.templateパラメータは、そのパラメータが行を表すオブジェクトであるコールバック関数を提供します。行にnameという名前のフィールドを与えると、これは参照するオブジェクトのプロパティになります。

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

詳細は 剣道のcolumns.templateリファレンスページ を参照してください。

0
Bucket

何時間もの検索の後。うまくいった結論は次のとおりです。グリッドデータに{{dataItem.masterNoteId}}としてアクセスし、$ scopeデータにプロパティ名または関数としてアクセスします。

例

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

私はこれが誰かの生命を守ることを本当に願っています:)

0
Nour Lababidi