2012-01-03 3 views
2

Telerik의 KendoUI를 사용하여 트리 뷰를 가져 와서 일반 JSON 핸들러에서 바인딩하려고합니다.KendoUI TreeView Dynamic JSON

제 일반적인 핸들러에서 Newtonsoft.Json을 사용하여 목록을 JSend 결과로 변환합니다.이 JSON 결과는 다른 KendoUI 컨트롤 (차트)에서도 훌륭하게 작동합니다.

[ 
    { 
     "text":"Node 1", 
     "expanded":true, 
     "items":null 
    }, 
    { 
     "text":"Node 2", 
     "expanded":true, 
     "items":null 
    } 
] 

"항목은"하위 컬렉션이 될 것입니다 :

여기
var treeSource = new kendo.data.DataSource({ 
       transport: { 
        read: { 
         url: "Services/CategoryHandler.ashx", 
         dataType: "json", 
         contentType: "application/json; charset=utf-8", 
         type: "GET" 
        } 
       } 
      }); 

      $("#treeview").kendoTreeView({ 
       dataSource: treeSource 
      }); 

반환 된 JSON의 단축 예입니다 : 여기

내가 트 리뷰를 구축하기 위해 자바 스크립트로까지 무엇을 가지고 나무에. 내가 같은 데이터 소스에 직접 항목을 추가 할 때

는 :

var treeview = $("#treeview").kendoTreeView({ 
          dataSource: [ 
           { text: "Item 1", expanded: true, items: [ 
            { text: "Item 1.1" }, 
            { text: "Item 1.2" }, 
            { text: "Item 1.3" } 
           ] }, 
           { text: "Item 2", items: [ 
            { text: "Item 2.1" }, 
            { text: "Item 2.2" }, 
            { text: "Item 2.3" } 
           ] }, 
           { text: "Item 3" } 
          ] 
         }) 

그냥 잘 작동합니다. JSON을 작성하는 서비스를 호출 할 때 작동하지 않습니다. 작동하지 않으면 데이터가 표시되지 않으며 비어 있습니다.

누락 된 부분에 대한 생각이나 내 데이터가 서비스에서 반환되고 심지어 데이터 소스가 제대로 채워지는지도 확인할 수있는 방법에 대한 의견이 있으십니까?

감사

11 월 8로

답변

3

중요 2012 KendoUI 이미 지원합니다.

Kendo TreeView는 데이터 소스에 대한 바인딩을 아직 지원하지 않습니다. 좋은 소식은 이것이 계획에 있으며 곧 구현 될 것이라는 것입니다 (다음 릴리스).

+1

좋아요 감사 :

function onDrop(e) { alert(treeView.text(e.sourceNode)); } 

템플릿이 작동하기 위해 할당해야합니다. 나는 $ .ajax GET을 수행하고 문자열 결과를 사용하여 트리 뷰에 바인드하는 임시 해결 방법을 발견했습니다. KendoUI 업데이트를 기다리고 있습니다 :) 다시 한번 감사드립니다. – CodeLikeBeaker

+0

KendoUI Grid가 HttpHandler에 바인딩됩니까? –

0

트릭으로 저에게 효과적입니다. 컨트롤러에서 직렬화 된 Json을 사용하여 동적 ViewBag를 사용하고 있으므로 노드가 크게 그려지고 있습니다.

제 문제는 이벤트가 제대로 작동하지 않는 것입니다. 예를 들어, onDrop을 잡아서 그 노드의 실제 값을 표시하는 경고를 발생시키고 대신 모든 노드의 텍스트를 표시합니다. 이것은 나를 미치게 만들었다.

이것은 내 코드이며, 누군가를 도울 수 있기를 바랍니다.

template: "<span rel='#= item.Id #'> #=item.text #</span>",