kendoui : kendogrid는 kendochart를 클릭하여 업데이트해야합니다.

다른 데이터 소스 즉 SQL 데이터베이스의 테이블과 바인딩 된 kendochart 및 검도 그리드를 페이지에 넣어야합니다. 나는 다른 부분에 대한 kendochart의 클릭에 kendogrid를 업데이 트해야합니다. kendochart가 사용자 A, B, C, D, E, F에 대해 5 부분을 표시 한 다음 B를 클릭하면 검도 표가 업데이트됩니다.이 기능이 html로 어떻게 구현되는지 제안하십시오.kendoui : kendogrid는 kendochart를 클릭하여 업데이트해야합니다.

출처

2014-04-18 Arvind Bhatt

는 KendoChart 유형을 제공하십시오. –

다음 코드 스 니펫으로 시도해보십시오.

<!DOCTYPE html> 
<html> 
<head> 
    <title>Test</title> 
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet" /> 
    <link href="http://cdn.kendostatic.com/2014.1.318/styles/kendo.default.min.css" rel="stylesheet" /> 
    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> 
    <script src="http://cdn.kendostatic.com/2014.1.318/js/kendo.all.min.js"></script> 
    <script type="text/javascript"> 
     var data = [ 
      { 
       "source": "Hydro", 
       "percentage": 22 
      }, 
      { 
       "source": "Solar", 
       "percentage": 2 
      }, 
      { 
       "source": "Nuclear", 
       "percentage": 49 
      }, 
      { 
       "source": "Wind", 
       "percentage": 27 
      } 
     ]; 

     var gridData = null; 

     $(document).ready(function() { 
      $("#chart").kendoChart({ 
       title: { 
        text: "Break-up of Spain Electricity Production for 2008" 
       }, 
       legend: { 
        position: "bottom" 
       }, 
       dataSource: { 
        data: data 
       }, 
       series: [{ 
        type: "pie", 
        field: "percentage", 
        categoryField: "source", 
        explodeField: "explode" 
       }], 
       seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"], 
       tooltip: { 
        visible: true, 
        template: "${ category } - ${ value }%" 
       }, 
       seriesClick: function (e) { 
        gridData = getDummyData(e.category); 
        bindGrid(); 
       } 
      }); 
     }); 

     function getDummyData(catval) { 
      var dataG = [ 
      { 
       "ID": 1, 
       "Name": catval 
      }, 
      { 
       "ID": 2, 
       "Name": catval 
      } 
     ]; 

      return dataG 
     } 

     function bindGrid() { 
      $("#grid").kendoGrid({ 
       dataSource: { 
        data: gridData, 
        schema: { 
         model: { 
          fields: { 
           ID: { type: "number" }, 
           Name: { type: "string" } 
          } 
         } 
        }, 
        pageSize: 1 
       }, 
       height: 430, 
       scrollable: true, 
       sortable: true, 
       filterable: true, 
       pageable: { 
        input: true, 
        numeric: false 
       }, 
       columns: [ 
          "ID", 
          { field: "Name" } 
         ] 
      }); 
     } 
    </script> 
</head> 
<body> 
    <div> 
     <div id="chart"> 
     </div> 
     <div id="grid"> 
     </div> 
    </div> 
</body> 
</html>

DEMO

출처

2014-04-18 05:26:02

kendoui : kendogrid는 kendochart를 클릭하여 업데이트해야합니다.

답변

관련 문제