web-dev-qa-db-ja.com

Kendo UI Gridポストレンダリングまたはポストデータバインドイベント？

グリッドがajax経由でリロードされた後にイベントをトリガーする方法はありますか？

RequestEndイベントが表示されます。しかし、リクエストが返されたときに、グリッドが更新される前に発生するようです。

DataBoundイベントも参照してください。しかし、それはRequestEndよりも早く起こります。
DataBoundイベントを実装すると、ヘッダーが消えます。

このハックに頼らざるを得なかった

function requestEnd(o) {
    console.debug('request ended.', o);
    setTimeout(refreshEditable, 500); // enough time to render the grid
}
function refreshEditable() {
    // perform my actions on controls within grid content
}

サイドノートとして..信頼できる剣道グリッドmvc APIリファレンスを見つけるのに非常に苦労しています。 Googleで検索すると、次のようになります。 http://docs.telerik.com/kendo-ui/getting-started/using-kendo-with/aspnet-mvc/migration/widgets/grid これは小さなハウツーといくつかの「イベント」のコレクションですが、それらは私がカミソリの知性で見ているものに対応していません。

update：データバインド定義の追加

    $('#grid').kendoGrid({
        dataBound: function(e) {
            console.debug('data bound..');
        }
    });

そして、ここにグリッドajaxの定義があります

   .Ajax().Read(read => read
        .Action("FilesRead", "SomeController")
        .Data("readData"))

 function readData() {
    return {
        IncludeChildren: $("#IncludeChildren").is(':checked'),
        SearchString: $('input[id=SearchString]').val()
    };
 }

dataBoundは、戻ってきた後ではなく、ajax呼び出しの実行中にトリガーされることがわかります。

update

dataBoundイベントフックを修正しました。

dataBound関数で、新しくレンダリングされたテンプレートへの参照を取得しようとしています。

function dataBound(o) {
  console.debug($('span.editable').length);                    // returns 0 
  setTimeout("console.debug($('span.editable').length)", 500); // returns 4
}

スパンはクライアントテンプレートを使用して追加されます

.ClientTemplate(@"<span class=""editable"" ... >#=DOCUMENT_DATE_FORMATTED#</span>");

意味がわかりますか？グリッドがレンダリングされる前にデータバインドが発生します

javascriptkendo-uitelerikkendo-gridtelerik-grid
23
Sonic Soul

MVCラッパーを使用してイベントハンドラーをバインドする方法については、 documentation （イベントに関するAPIドキュメントは here ）から抜粋したこのサンプルコードを参照してください。

@(Html.Kendo().Grid(Model)
      .Name("grid")
      .Events(e => e
          .DataBound("grid_dataBound")
          .Change("grid_change")
      )
)
<script>
function grid_dataBound() {
    //Handle the dataBound event
}

function grid_change() {
    //Handle the change event
}
</script>

JavaScriptでハンドラーをバインドする場合は、次のようにグリッドにアクセスする必要があります。

var grid = $("#grid").data("kendoGrid");
grid.bind("dataBound", function(e) {});

ここでこれを行うと：

$('#grid').kendoGrid({
    dataBound: function(e) {
        console.debug('data bound..');
    }
});

実際に新しいグリッドインスタンスを作成します。

11
Lars Höppner

この方法を使用できます：

 transport: {
           read: {
           url: searchUrl,
           type: "POST",
           dataType: "json",
           data: additionalData,
           complete: function () {
              //code here :)
           }
        },                   
     },
0
Vĩnh Phú Ngô