0

AjaxResponeを使用してtelerikグリッドを再バインドする方法を教えてください。ajax Responseがすべてのデータを取得し、これらのデータをTelerikグリッドにバインドするようにコントローラーでreturnメソッドを作成する方法。

4

1 に答える 1

3

グリッドには、シナリオで利用できる広範なクライアント側APIがあります。注意すべきイベントはOnDataBindingです。

グリッドの次の例を見てください。 http://demos.telerik.com/aspnet-mvc/grid/externalservicetwitter

これは、Twitterに接続してツイートを取得するデモです。ただし、Twitterに接続し、ツイートを検索し、ツイートを取得し、グリッドを結果にバインドするアクションはすべて、クライアント側から実行されます。

グリッドは最初に次のように定義されます。

<%= Html.Telerik().Grid<TwitterItem>()
        .Name("Grid")
        .Columns(columns =>
        {
            columns.Template(o => { }).Title("Author").Width(100);
            columns.Template(o => { }).Title("Avatar").Width(80);
            columns.Bound(o => o.text).Title("Post");
        })
        .ClientEvents(events => events
            .OnDataBinding("onDataBinding")
            .OnRowDataBound("onRowDataBound")
        )
        .Scrollable(scrolling=>scrolling.Height(400))
%>

ユーザーが検索ボタンをクリックすると、グリッド上でajaxrequestが発行されます。コードスニペットは次のとおりです。

$('#searchButton').click(function(e) {
     e.preventDefault();
     $('#Grid').data('tGrid').ajaxRequest();
});

これにより、OnDataBindingが起動します。ondatabindingメソッドのコードスニペットは次のとおりです。

function onDataBinding(e) {
    var grid = $(this).data('tGrid');

    $('.t-status .t-icon', grid.element).addClass('t-loading');
    // call the twitter search api
    $.ajax({
        url: 'http://search.twitter.com/search.json',
        contentType: 'application/json; charset=utf-8',
        type: 'GET',
        dataType: 'jsonp',
        error: function(xhr, status) {
            alert(status);
        },
        data: {
            q: $('#searchText').val()
        },
        success: function(result) {
            grid.dataBind(result.results);
            $('.t-status .t-icon', grid.element).removeClass('t-loading');
        }
    });
}

ご覧のとおり、Twitterにajaxリクエストを発行し、データが戻ってきたら、グリッドでdataBindメソッドを呼び出すだけです。

私があなたの質問に答えることができたと思います。

Lohith（Tech Evangelist、Telerik India）

于 2012-07-26T20:01:55.293 に答える