剣道グリッドの[オブジェクトオブジェクト]の実際のデータを表示するには

私は動的な列と[オブジェクトオブジェクト]を示すデータで剣道グリッドを実装しようとしています。剣道グリッドの[オブジェクトオブジェクト]の実際のデータを表示するには

Name  | Phone   |  Address 
------------------------------------------------ 
John Smith | (519) 420-2391 | Address 1: London 
      |    | Address 2: 123

var peoples = [], 
 
    address = []; 
 

 

 
peoples = [{ 
 
    id: 1, 
 
    name: "John Smith", 
 
    phone: "(519) 420-2391", 
 
    address: [{ 
 
    address1: "london", 
 
    address2: "123" 
 
    }] 
 

 
}]; 
 

 
$("#grid").kendoGrid({ 
 
    dataSource: { 
 
    data: peoples, 
 

 
    }, 
 
    scrollable: true, 
 
    sortable: true, 
 
    resizable: true, 
 
    pageable: true, 
 
    columnMenu: true, 
 

 
    columns: [{ 
 
    field: "name", 
 
    title: "Name" 
 
    }, { 
 
    field: "phone", 
 
    title: "Phone number" 
 
    }, { 
 
    field: "address", 
 
    title: "Address" 
 
    }], 
 

 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 

 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.default.min.css"> 
 
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"> 
 

 
    <script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/angular.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/jszip.min.js"></script> 
 
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div id="example"> 
 
    <div id="grid"></div> 
 
    </div> 
 

 
</body> 
 

 
</html>

出典

2016-09-29 Austin Hoh

- ：私の剣道グリッド内のアドレス[オブジェクト、オブジェクト]データを表示するために、私はサンプル出力は下表のようになりたいと思いますどのように

希望の結果を得るには、columns.template機能を利用することができます。私も一例を示すDojo作成しました

Address 1: <span>#: address[0].address1 # </span> 
<br/> 
Address 2: <span>#: address[0].address2 # </span>

：（Reference）

は、あなたのデータ構造によっては、これに似たテンプレートを使用することができます。

出典

2016-09-29 04:39:01 Philipp

ソリューションのおかげで、それは私のデータの一部がアドレス2が含まれていない場合、テーブルは、アドレス2に示されます完璧 –

仕事：未定義を。それを削除する方法はありますか？ –

アドレスを配列として送信できます。次に、テンプレート内で 'for'ループを使用することができます。可能なことを確認するには、[Template Documentation]（http://docs.telerik.com/kendo-ui/framework/templates/overview）をご覧ください。 – Philipp

剣道グリッドの[オブジェクトオブジェクト]の実際のデータを表示するには

答えて

関連する問題