2017-08-09 11 views
0

ajaxで取得したデータで剣道グリッドを作成しようとしています。ここでアヤックスは次のとおりです。alert(result)この時剣道グリッド:ajaxからデータを入力する

var model = @Html.Raw(Json.Serialize(Model)); 

      $(document).ready(function() { 

       $.ajax({ 
        url: "/Utilities/Report/Run", 
        data: JSON.stringify(model), 
        contentType: "application/json", 
        type: "POST", 
        success: function(result) { 
         var ds = new kendo.data.DataSource({ 
          data: result 
         }); 
         alert(result); 
         $("#grid").data("kendoGrid").setDataSource(ds); 
        }, 
        error: function(result) { 
         options.error(result); 
        } 
       }); 

       $("#grid").kendoGrid({ 
        toolbar: ["excel", "pdf"], 
        excel: { 
         fileName: "test" 
        }, 
        pdf: { 
         fileName: "test" 
        }, 
       }); 
      }); 

は、データがどのように見えるかです:

[ 
    {"TEST":"one"}, 
    {"TEST":"two"}, 
    {"TEST":"three"} 
] 

AJAX呼び出しが動作しているように見え、データが私にはよさそうだが、剣道グリッドがあります更新しない場合は空白のままです。私も何の誤りもありません。私はkendoGridをajax success関数の中に同じ結果で配置しようとしました。私はとreadデータソースを使用してデータを取得しようとしましたが、それは私にエラーを与え続けました:n.slice is not a function。しかし、定義されているスキーマがなかったためだと思う人もいました。私が検索しているデータの種類のため、これを定義することはできません。サーバーから取得されたデータには、任意の列/フィールド名、および任意の数の列を含めることができます。しかし、それは複雑なJSONではありません。

グリッドにこのデータを入力させるにはどうすればよいですか?

+1

バディ、私はすでにその問題を持っていたが、私はそれを再現でもないソリューションを思い出すことができません。しかし、私が思い出した小さなことは、あなたがdataSourceに渡すオブジェクト、あなたのケースの 'result'オブジェクトの中にあるものです。それがjavascriptオブジェクトであり、文字列などではないことを確認してください( 'contentType:" application/json "'を追加したことに気付いても)。おそらく '{data:result}'として使用し、 '' schema.data: "data" 'を定義するだけで、あなたのデータを理解できるようにするのです。この問題はうんざりし、永遠に起こってから、私は彼らがそれを決して解決しないと思っています。 – DontVoteMeDown

答えて

0

私は新しいデータソースを作成し、それを成功メソッド外の既存のデータソースにマップしました。私はいずれかを見逃している場合は、あなたの必要性に従って

var newDataSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "/Utilities/Report/Run", 
       dataType: "json", 
       data: JSON.stringify(model), 

       error: function (result) { 
        options.error(result); 
       } 
      } 
     } 
    }); 

    var d1 = $("#grid").data("kendoGrid"); 
    d1.dataSource.data([]); 
    d1.setDataSource(newDataSource); 

は変更を加える: あなたは、以下の、このいずれかを試すことができます。剣道のデータバインディングは常に混乱します。D

0

剣道データソースは非常に強力です。理想的には、Ajaxを手動で呼び出す必要はありません。代わりに、DataSourceは、Gridがデータを必要とする場合、AjaxがURLからデータを要求することができます。

https://jsfiddle.net/6gxqsrzu/

$(function() { 
 
    var dataSource = new kendo.data.DataSource({ 
 
    type: "odata", 
 
    transport: { 
 
     read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders" 
 
    }, 
 
    schema: { 
 
     model: { 
 
     fields: { 
 
      OrderID: { 
 
      type: "number" 
 
      }, 
 
      Freight: { 
 
      type: "number" 
 
      }, 
 
      ShipName: { 
 
      type: "string" 
 
      }, 
 
      OrderDate: { 
 
      type: "date" 
 
      }, 
 
      ShipCity: { 
 
      type: "string" 
 
      } 
 
     } 
 
     } 
 
    }, 
 
    serverPaging: true, 
 
    pageSize: 5, 
 
    serverSorting: true, 
 
    sort: { 
 
     field: 'OrderDate', 
 
     dir: 'asc' 
 
    } 
 
    }); 
 

 
    $("#grid").kendoGrid({ 
 
    dataSource: dataSource, 
 
    sortable: true, 
 
    pageable: true, 
 
    columns: [{ 
 
     field: "OrderID", 
 
     filterable: false 
 
     }, 
 
     "Freight", { 
 
     field: "OrderDate", 
 
     title: "Order Date", 
 
     format: "{0:MM/dd/yyyy}" 
 
     }, { 
 
     field: "ShipName", 
 
     title: "Ship Name" 
 
     }, { 
 
     field: "ShipCity", 
 
     title: "Ship City" 
 
     } 
 
    ] 
 
    }); 
 
});
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common-material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.min.css" /> 
 
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.material.mobile.min.css" /> 
 

 
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script> 
 
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script> 
 
<div id="grid"></div>

関連する問題