검도 UI 데이터 소스 및 복합 JSON

Question

webservice에서 반환 된 복잡한 json으로 표를 채 웁니다. 내 JSON은 두 가지를 포함

• 데이터를 다음 그리드
• 열을 채울 것입니다 레코드 배열 : 그리드

의 구성 (레이아웃)와 배열이 나는 성공적으로 채워진 한 그리드를 "데이터"로 바꾸고 schema.data을 지정하십시오.

내 문제는 내 gridOptions에서 모눈 속성을 설정할 수 있도록 데이터 원본에서 "열"(JSON) 가져 오는 방법입니다. 할 방법이 있습니까? 여기

내 JSON

{ 
    "data": [ 
    { 
     "id": 0, 
     "firstname": "Dalton", 
     "lastname": "Holden", 
     "gender": "male", 
     "email": "daltonholden@tellifly.com", 
     "phone": "871-407-2973", 
     "address": "22 National Drive, Brenton, Louisiana", 
     "birthday": "21/04/1965", 
     "currency": "GBP" 
    }, 
    { 
     "id": 1, 
     "firstname": "Allyson", 
     "lastname": "Odom", 
     "gender": "female", 
     "email": "allysonodom@tellifly.com", 
     "phone": "922-548-2725", 
     "address": "44 Quincy Street, Thynedale, Georgia", 
     "birthday": "28/08/1961", 
     "currency": "CHF" 
    }, 
    { 
     "id": 2, 
     "firstname": "Sweet", 
     "lastname": "Branch", 
     "gender": "male", 
     "email": "sweetbranch@tellifly.com", 
     "phone": "880-593-2244", 
     "address": "81 Fenimore Street, Veguita, Missouri", 
     "birthday": "08/08/1953", 
     "currency": "AUD" 
    } 
    ], 

    "columns": [ 
    { 
     "field": "firstname", 
     "title": "Frist Name", 
     "width": 200, 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "lastname", 
     "title": "Last Name", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "gender", 
     "title": "Gender", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "email", 
     "title": "e-mail", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "phone", 
     "title": "Phone Number", 
     "attributes": { 
     "class": "", 
     "style": "text-align: right;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: right;" 
     } 
    }, 
    { 
     "field": "address", 
     "title": "Address", 
     "attributes": { 
     "class": "", 
     "style": "text-align: left;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: left;" 
     } 
    }, 
    { 
     "field": "birthday", 
     "title": "Birthday", 
     "attributes": { 
     "class": "", 
     "style": "text-align: center;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: center;" 
     } 
    }, 
    { 
     "field": "currency", 
     "title": "Currency", 
     "attributes": { 
     "class": "", 
     "style": "text-align: center;" 
     }, 
     "headerAttributes": { 
     "class": "table-header-cell", 
     "style": "text-align: center;" 
     } 
    } 
    ] 
} 

입니다 그리고 여기 내 코드입니다 :

var customersSource = new kendo.data.DataSource({ 
     transport: { 
      read: { 
       url: "http://....", 
       dataType: "json" 
      } 
     }, 
     schema: { 
      data: "data" 
     } 
    }); 

$scope.mainGridOptions = { 
     dataSource: customersSource, 
     //columns: Here it should be something like --> customersSource.columns, 
     height: 500, 
     scrollable: true, 
     selectable: true 
    }; 

Answer 1

스키마 만 가져 오는하고 데이터 소스를 위해 필요한 데이터를 파싱 처리됩니다 보기, 필터, 정렬 등을 만들 수 있습니다.

내장 방식이 없습니다. 하나의 Ajax 요청에서 온 "하이브리드"컨텐츠.

하지만 해결 방법이 있습니다. requestEnd 이벤트를 사용하고 누락 된 데이터에 액세스 한 다음 나중에 저장하십시오.

var customersSource = new kendo.data.DataSource({ 
    transport: { 
     read: { 
      url: "http://....", 
      dataType: "json" 
     } 
    }, 
    schema: { 
     data: "data" 
    }, 
    requestEnd: function(e) { 
     // According to the documentation, this gives you a reference to the datasource instance itself. 
     this.whatever = e.response.columns; 
    } 
}); 

이제이 항목을 나중에 사용할 수 있습니다.

$scope.mainGridOptions = { 
    dataSource: customersSource, 
    columns: customersSource.whatever, 
    height: 500, 
    scrollable: true, 
    selectable: true 
};