多値の剣道UIグリッド

Question

多値の列を含むはずの剣道UIを私のページに追加したいと思います。

は以下のデータを想像：

| Name | Tag     | 
|--------|---------------------| 
| John | C#, JavaScript, PHP | 
| Oliver | UI, SQL    | 
| Mark | SQL, Windows Server | 

tag列はタグの実際の配列です。

私は、sqlのタグを含むすべてのレコードをフィルタリングできるようにしたいと思います。

これはkendo-uiでも可能ですか？

var grid = $("#grid").kendoGrid({ 
    dataSource: { 
    data: [ 
     { name: "John", tags: ["C#", "JavaScript", "PHP"] }, 
     { name: "Oliver", tags: ["UI", "SQL"] }, 
     { name: "Mark", tags: ["SQL", "Windows Server"] }] 
    }, 
    columns: [{ 
     field: "name", 
     title: "Name" 
    }, { 
     template: "# var t=tags.join(', '); data.tagsString=t; # #=t #", 
     title: "Tags", 
     field: "tags" 
    }] 
}).data("kendoGrid"); 

$("#filter").on("keydown", function() { 
    grid.dataSource.filter({ 
     field: "tagsString", 
     operator: "contains", 
     value: $(this).val() 
    }); 
}); 

Demo：

Answer 1

は、このグリッドの設定を試してみてください。

ご覧のとおり、外部カスタムフィルタフィールドを使用する必要があります。これは、グリッドの既定の組み込み列フィルターが配列をフィルターに掛けることができないため、dataSourceのfilter()メソッドもフィルタリングできないためです。

ので、テンプレートで、私はタグ列に表示さと同じで、私はtags.join(", ")の結果を設定した、tagsStringと呼ばれる、各データソースの項目に新しいプロパティを作成するために剣道をしました。そのプロパティセットを使用して、filter()メソッドを使用してフィルタリングし、fieldをtagsStringと設定します。