2012-09-13 5 views
4

나는 검도 그리드를 표시하기 위해 검도 목록을 클릭하고 검도 목록보기 내부의 링크를 원합니다. ListView 템플릿을 사용하고 있습니다.검도 UI 그리드 - 링크 클릭시 그리드 표시

HTML :

<div id="listView" ></div> 
<div id="grid" ></div> 

템플릿 : 나는 다음과 같은 코드를 사용하여이 작업을 수행하려고했으나 아무 일도 발생하지

<script type="text/x-kendo-tmplate" id="template"> 
    <div> 
    <ul> 
      <li><a class="list k-link" title="#= title #" id="#= id#" >#= name #</a></li> 
    </ul> 
    </div> 
</script> 

. id 만 올바르게 읽히지 만 요청은 만들어지지 않습니다.

$(" .list").live({click:function(){ 

    var id=$(this).attr('id'); 

    $("#grid").kendoGrid({ 
     dataSource: { 
       transport: { 
        read: "somefile.php?id="+id, 
       }, 
      schema: { 
        data:"data", 
        model: { 
         id: "id_pf", 
         fields:{ 
            first:{}, 
            second:{} 
           } 
        } 
      }, 
      total: function(response) { 
       return $(response.data).length; 
      }, 

      pageSize: 10 
     }, 

     columns: [ 
       { title: "First", field: "first"}, 
       { title: "Second", field: "second"}, 
       ] 
    }); 

}}); 
+0

Grid를 ListView로 바꾸거나 Kendo 창에서여시겠습니까? – John

+0

ListView 옆에 Grid가 필요합니다. 마스터 디테일 같은 것. – Anna

+0

AJAX를 사용하여 JSON을 반환하고 $ ("# grid")에 바인드하는 서버 메소드를 요청하는 것이 좋습니다. data ("kendoGrid") ._ 데이터가 반환됩니다 – John

답변

3

이 기능은 기능 외부의 그리드 생성을 제거하여 해결되었습니다. 먼저 그리드가 데이터없이 표시됩니다.

var ds=new kendo.data.DataSource({ 
      transport: { 
       read: "somefile.php", 
      }, 
     schema: { 
       data:"data", 
       model: { 
        id: "id_pf", 
        fields:{ 
           first:{}, 
           second:{} 
          } 
       } 
     }, 
     total: function(response) { 
      return $(response.data).length; 
     }, 

     pageSize: 10 
}); 

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

    columns: [ 
      { title: "First", field: "first"}, 
      { title: "Second", field: "second"}, 
      ] 
    }); 

링크를 클릭하면 데이터 소스가 업데이트 된 URL로 다시 읽히고 새로 고쳐지고 이제 원하는 데이터가 표시됩니다.

$(" .list").live({click:function(){ 

var id=$(this).attr('id'); 

    var gridUrl = "somefile.php?id="+ id; 

     var grid = $("#grid").data("kendoGrid"); 

     grid.dataSource.transport.options.read.url =gridUrl; 
     grid.dataSource.read(); 
     grid.dataSource.refresh(); 

    }}); 
관련 문제