ajaxクエリからkendouiグリッドにデータをバインドする方法は？

Question

私はページ上に日付ピッカーとグリッドを持っています。私はグリッドにdatepickerの日付に基づいて値を設定する必要があります。私は、grid.dataBindを使ってTelerikのmvcグリッドでこれを行いました。

var grid = $('#Grid').data('tGrid'); 
var pDate = document.getElementById('DatePicker').value; 
$.ajax(
{ 
    type: 'POST', 
    url: '/Home/AccountSummary/', 
    dataType: 'json', 
    data: { date: pDate }, 
    success: function (result) { 
    grid.dataBind(result); 
    } 
}); 

今私は剣道のグリッドを除いて同じことをしたいと思います。私は$('#Grid').data('kendoGrid')を使ってグリッドを取得する必要があることを知っています。しかし、結果をグリッドにバインドするにはどうすればいいですか？

Answer 1

結果変数にはjavascriptオブジェクトの配列が含まれ、元のマークアップと同じ列数のデータが含まれているとします。

ie。 result = [{"AccountId":1,"Name":"AAA"},{"AccountId":2,"Name":"BBB"}];

は、以下のことを試してみてください。

$.ajax(
{ 
    type: 'POST', 
    url: '/Home/AccountSummary/', 
    dataType: 'json', 
    data: { date: pDate }, 
    success: function (result) { 
     $("#Grid").data("kendoGrid").dataSource.data(result); 
    } 
}); 

Answer 2

ます。また、このようにそれを行うことができます。

var dataSource = new kendo.data.DataSource({ 
    transport: { 
     read: function(options) { 
      $.ajax({ 
       type: "POST", 
       url: "Controller/Handler", 
       contentType: "application/json; charset=utf-8", 
       dataType: 'json', 
       data: JSON.stringify({key: "value"}), 
       success: function(data) { 
        options.success(data); 
       } 
      }); 
     } 
    } 
}); 

そして、グリッドにバインド：

var grid = $("#grid").kendoGrid({ 
    dataSource: dataSource 
} 

追加することができますこの方法を残りのCRUDアクションはあなたのトランスポートに転送され、コードはすべて1か所にまとめられます。

Answer 3

Igorriousを拡張する...その正確な答えは私を助けなかったが、答えにつながる。

何が私のために働い：

$.ajax(
    { 
    type: 'POST', 
    url: '/Controller/Action', 
    data: { 
     paramKey: paramValue 
    }, 
    success: function (result) { 
     $("#my-grid").data("tGrid").dataBind(result); 
    } 
}); 

を、これはあなたが、チェーン[$("#my-grid")] . [data("tGrid")] . [dataBind]内の要素のいくつかはvalue == 'undefined'を持っている理由を見つけるためにいくつかのJavaScriptのデバッグを行う解決しない場合。

Answer 4

グリッドにJson結果をバインドできます。また、必要に応じてモデルを渡すこともできます。たとえば、下記のコードスニペットを参照してください。

詳細はhereを参照してください。

$('#FindBtn').click(function (e) { 
    e.preventDefault(); 
    var UserDetails = 
    { 
     "FirstName": document.getElementById('FirstName').value, 
     "LastName": document.getElementById('LastName').value, 
    }; 
    $.ajax({ 
     url: "SearchJsonRequest", 
     type: 'POST', 
     contentType: "application/json;charset=utf-8", 
     data: JSON.stringify(UserDetails), 
     dataType: "json", 
     success: function (data) { 
      var grid = $('#AssociateSearch').getKendoGrid(); 
      grid.dataSource.data(data); 
      grid.refresh(); 
     } 
    }); 
    return false; 
});