2

Kendo UI のバージョン 2012.1.322 を使用しています。

私は剣道UI ListViewを持っています。トランスポート剣道データ ソースを使用しています (JSON を返す GET を使用して Web サービスを呼び出します)。ListView がバインドされた後にいくつかの JavaScript を実行したいと思います。

私の目標は、各リスト項目でkendo のドラッグ アンド ドロップ フレームワークを使用することです。

「dataBound」、「success」、またはこれを実現するための何らかのトリックのようなイベントはありますか。

サンプルコードはこちら

<script type="text/javascript">
  $(document).ready(function() {
    $("#fileAlist").kendoListView({
        template: "<li class=\"draggable\">${Name}</li>",
        dataSource:
            new kendo.data.DataSource({
                transport: {
                    read: {
                        url: 'http://www.somedomain.com/search',
                        dataType: "json",
                        type: "GET",
                        contentType: "application/json; charset=utf-8"
                    }
                }
            })
    });
  });
</script>

データが非同期データ ソースを介してバインドされた後にこれを起動して、それぞれ<li>がドラッグ可能なオブジェクトになるようにします。

$(".draggable").kendoDraggable();

私が試したいくつかのこと

  • dataBound eventを使用してみましたが、これはデータを取得した直後に発生し、まだリストをレンダリングしていません。

  • change eventを試しましたが、これはデータ バインディング プロセス中に発生しないようです。レンダリングが終了した後に発生することを期待していました。そのような幸運はありません。

4

2 に答える 2

2

これを試してください：

リスト ビューのマークアップ。リスト ビューの境界線が箇条書きの真ん中で奇妙に見えるため、スタイルの変更が必要になります。これにより、どちらの方法でも目的の機能が実証されます。

<ul>
     <div id="contactList" style="width: 400px;"></div>
</ul>

ケンドウイ JavaScript

<script type="text/javascript" >
  $(document).ready(function () {
      var datasource = new kendo.data.DataSource({
          transport: {
              read: {
                  url: "...",  
                  dataType: "json",
                  contentType: "application/json; charset=utf-8",
                  type: "GET"
              }
          }
      });

      var contactsListView = $("#contactList").kendoListView({
          dataSource: datasource,
          template: '<li>${ Name }</li>'
      }); 

      contactsListView.kendoDraggable({
          filter: "div > li",  //select all li elements in the #contactList div
          hint: function(row) {
              return row.clone();  //returns the same mark up as the template <li>some name</li>
          }
      });
  });

</script>​
于 2012-06-27T15:38:23.587 に答える