Kendo UI グリッドを使用して単純な Web サービス/テスト ページを動作させるのに苦労しています。Web サービスが JSON データの文字列を返しています。
[{"ord_number":"116347 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]
より正確には、これが Web サービス呼び出しから返されるものです (これは ASP.NET Web サービスです。特別なことは何もありません)。
<?xml version="1.0" encoding="utf-8"?>
<string xmlns="http://tempuri.org/">[{"ord_number":"116347 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"},{"ord_number":"116348 ","ord_company":"HERHER12","origin_cmp_id":"HERHER02","origin_cmp_name":"HERSHEY-WEST PLANT","dest_cmp_id":"EDCPAL","dest_cmp_name":"EDC III BUILDING 1918","orderby_cmp_id":"HERHER12","orderby_cmp_name":"HERSHEY","orderby_cty_nmstct":"Hershey,PA/","billto_cmp_id":"HERHER12","billto_cmp_name":"HERSHEY","billto_cty_nmstct":"Hershey,PA/","ord_status_name":"Completed"}]</string>
データを入力することを望んでいた ASP.NET ページの内容は次のとおりです。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="KendoUI.aspx.cs" Inherits="KendoUI" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.web.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="example" class="k-content">
<div id="grid"></div>
<script>
$(document).ready(function () {
dataSource = new kendo.data.DataSource({
transport: {
read: {
type: "POST",
url: "http://localhost/GridTest/Services/WebService.asmx/GetLegsJSON",
dataType: "json"
}
},
schema: {
model: {
id: "ord_number",
fields: {
ord_number: { type: "string"},
ord_company: { type: "string" },
origin_cmp_id: { type: "string" },
origin_cmp_name: { type: "string" },
dest_cmp_id: { type: "string" },
dest_cmp_name: { type: "string" },
orderby_cmp_id: { type: "string" },
orderby_cmp_name: { type: "string" },
orderby_cty_nmstct: { type: "string" },
billto_cmp_id: { type: "string" },
billto_cmp_name: { type: "string" },
billto_cty_nmstct: { type: "string" },
ord_status_name: { type: "string" }
}
}
},
pageSize: 10,
type: "json"
});
$("#grid").kendoGrid({
autobind: false,
dataSource: dataSource,
pageable: true,
columns: [
{ title: "Order #", field: "ord_number" },
{ title: "Company", field: "ord_company" },
{ title: "Origin ID", field: "origin_cmp_id" },
{ title: "Origin CN", field: "origin_cmp_name" },
{ title: "Dest ID", field: "dest_cmp_id" },
{ title: "Dest CN", field: "dest_cmp_name" },
{ title: "Order By ID", field: "orderby_cmp_id" },
{ title: "Order By CN", field: "orderby_cmp_name" },
{ title: "Order By C/S", field: "orderby_cty_nmstct" },
{ title: "BillTo ID", field: "billto_cmp_id" },
{ title: "BillTo CN", field: "billto_cmp_name" },
{ title: "BillTo C/S", field: "billto_cty_nmstct" },
{ title: "Status", field: "ord_status_name" }
]
});
});
</script>
</div>
</form>
</body>
</html>
ただし、フッターに「表示するアイテムはありません」というテーブルのヘッダー以外は何も入力されません。
私の人生では、自分が間違っていることはわかりません。