2012-01-03 10 views
2

TelerikのKendoUIを使用して、ジェネリックハンドラから動的JSONにバインドするためのツリービューを取得しようとしています。KendoUI TreeView Dynamic JSON

私のジェネリックハンドラでは、Newtonsoft.Jsonを使用してListをJSON結果に変換しています。これは素晴らしいKendoUIコントロール(チャート)で動作します。ここで

は、私は、ツリービューを構築する限りジャバスクリプトとして持っているものである:ここでは

var treeSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url: "Services/CategoryHandler.ashx", 
         dataType: "json", 
         contentType: "application/json; charset=utf-8", 
         type: "GET" 
        } 
       } 
      }); 

      $("#treeview").kendoTreeView({ 
       dataSource: treeSource 
      }); 

は返さJSONの短縮例です。

[ 
    { 
     "text":"Node 1", 
     "expanded":true, 
     "items":null 
    }, 
    { 
     "text":"Node 2", 
     "expanded":true, 
     "items":null 
    } 
] 

「の項目は、」サブコレクションになります木の中。

私のようなデータソースに直接アイテムを追加する場合:

var treeview = $("#treeview").kendoTreeView({ 
          dataSource: [ 
           { text: "Item 1", expanded: true, items: [ 
            { text: "Item 1.1" }, 
            { text: "Item 1.2" }, 
            { text: "Item 1.3" } 
           ] }, 
           { text: "Item 2", items: [ 
            { text: "Item 2.1" }, 
            { text: "Item 2.2" }, 
            { text: "Item 2.3" } 
           ] }, 
           { text: "Item 3" } 
          ] 
         }) 

それだけで正常に動作します。 JSONを書き出すサービスを呼び出すと機能しませんし、それが機能しないということは、データが表示されないこと、空白だということです。

私は自分のデータがサービスから返されていることを確認したり、データソースを正しく充填したりすることができない場合がありますか? 11月8日として

おかげ

答えて

3

重要、2012 KendoUIはすでにそれをサポートしています。

剣道ツリービューは、データソースへのバインディングをまだサポートしていません。良いニュースは、これが計画にあり、すぐに実装されるということです(次のリリース)。

+1

オーケー感謝を。私は$ .ajax GETを行ったところで回避策を見つけ、文字列の結果をツリービューにバインドするために使用しました。私はKendoUIアップデートを楽しみにしています:)もう一度感謝します。 – CodeLikeBeaker

+0

KendoUIグリッドはHttpHandlerにバインドされますか? –

0

それは私のためのトリックで動作します。私はコントローラでシリアル化されたJsonで動的なViewBagを使用しているため、ノードは大きく描画されています。

私の問題は、イベントが正常に動作していないようです。例えば、私はonDropをキャッチしてそのようなノードの実際の値を表示する警告を出し、代わりにすべてのノードのテキストを表示したいと思います。これは途中で私を夢中にさせている。

これは私のコードです、希望は誰かを助けることができます。

function onDrop(e) { 
     alert(treeView.text(e.sourceNode)); 
    } 

Aテンプレートが動作するために割り当てる必要があります。

template: "<span rel='#= item.Id #'> #=item.text #</span>",