2016-12-01 1 views
0

detailInit 기능으로 검도 그리드를 만들려고하는데 구현 방법을 몰랐습니다. 주소를 표시하는 방법 검도 그리드를 만드는 방법 detailInit

[개체 개체] 내 그리드 사용자가 세부 사항을 보여주기 위해 전환 할 수 있도록 아래의 원하는 출력의 샘플이 detailsInit 기능 데이터 : -

전류 출력 :

Name  | Phone   |  
-------------------------------- 
John Smith | (519) 420-2391 | 
-------------------------------- 
^ Location | no    | 
    ----------------------------- 
    london | 123   | 
    aus  | 456   | 

var peoples = [], 
 
    address = []; 
 

 

 
peoples = [{ 
 
    id: 1, 
 
    name: "John Smith", 
 
    phone: "(519) 420-2391", 
 
    address: [{ 
 
    Location: "london", 
 
    no: "123" 
 
    }, { 
 
    Location: "aus", 
 
    no: "456" 
 
    }] 
 
}, { 
 
    id: 2, 
 
    name: "James Seth", 
 
    phone: "(123) 212-3332", 
 
    address: [{ 
 
    Location: "Paris", 
 
    no: "789" 
 
    }, { 
 
    Location: "ita", 
 
    no: "888" 
 
    }] 
 
}]; 
 

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

 
    }, 
 

 
    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>
,129,373 :
Name  | Phone   |  Address 
------------------------------------------------ 
John Smith | (519) 420-2391 | [object Object] 
------------------------------------------------ 
James Seth | (123) 212-3332 | [object Object] 

출력을 원했다 이 데이터의로 0,313,210

답변

0

그냥 현재 행의 address 특성과의 detailInit 경우에 다른 그리드를 만들 : 그것을 수행하는 방법의

detailInit: function(e) { 
    $('<div></div>') 
     .appendTo($(e.detailRow)) 
     .kendoGrid({ 
      dataSource: { 
       data: e.data.address 
      }, 
      columns: [{ 
       field: "Location" 
      }, { 
       field: "no" 
      }] 
     }); 
} 

Official demo.

관련 문제