web-dev-qa-db-ja.com

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

ページに日付ピッカーとグリッドがあります。日付ピッカーの日付に基づいてグリッドを設定したいのですが。 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')を使用してグリッドを取得する必要があることはわかっています。しかし、どのようにして結果をグリッドにバインドしますか？

jquerytelerikkendo-ui
14
Daniel

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

すなわち。 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);
    }
});
22
Igorrious

次のようにすることもできます：

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か所に配置できます。

10
phyrisrose

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

詳細は こちら を参照してください。

$('#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;
});
3
Kiran

Igorriousに拡張すると...その正確な答えは私を助けませんでしたが、それは私を答えに導きました。

私のために働いたもの：

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

これで問題が解決しない場合は、JavaScriptデバッグを実行して、チェーン内の一部の要素[$("#my-grid")] . [data("tGrid")] . [dataBind]に_value == 'undefined'_がある理由を確認してください。

0
ancajic