검도 진행률 막대 수정

Question

각도 J의 검도 트리 안쪽에 검도 템플릿으로 그래프를 추가했습니다.

<script id="progressStatus" type="text/x-kendo-template"> 
        <div ng-if="'#:Status#' == 'Loading'"> 
         <div kendo-progress-bar="progressBar1" k-min="0" k-max="100" k-value="#:Percentage#" style="width: 100%;"></div> 
        </div> 
    </script> 

은 내가

{ field: "Status", template: $("#progressStatus").html(), width: "170px" } 

지금까지 좋은 열 선언

의 일환으로 트리 목록에 바인딩. 그리고 UI에 값을 표시 할 수 있습니다. 비율> 50 그래프를 보여 주면

그러나 나는 내가 = K-유형 '퍼센트'하지만 행운

을 시도 유형 퍼센트의 그것을 만드는 방법

• 다음 표시하는 방법을 잘 모르겠습니다 노란색 및 텍스트 (50 %) 빨간색으로 표시

Answer 1

불행히도 일부 옵션은 각도 지시문과 함께 작동하지 않는 것 같습니다. 나는 k-type (당신 같은) 일을 할 수 없었다. 내 도장에서 그 속성은 위젯을 깰 것으로 보인다.

<div kendo-progress-bar="progressBar1" k-options="progressBarOptions" style="width: 100%;"></div> 

.controller("MyController", function($scope) { 
    $scope.dataSource = [ 
     'foo', 'bar', 'baz' 
    ]; 

    $scope.progressBarOptions = { 
     min: 0, 
     max: 100, 
     value: 50, 
     type: "percent" 
    }; 
    }); 

Demo : this page를 확인한 후, 나는 type 다음과 같은 방법을 사용할 수 있습니다. 그러면 퍼센트 타입 작업이됩니다.

이제 값을 기반으로 위젯의 색상을 변경하는 것이 또 다른 문제입니다. ProgressBar에는 종류 템플릿이 없으며 events (complete 및 change 만 해당)에 잘못되었습니다. 바가 값을 바꾸지 않는 것 같습니다. 정적입니다. 맞습니까? 그래서 animation으로 change 이벤트를 호출하는 방법을 깨닫려고합니다. 완료 후 change으로 전화해야합니다. 그것은 초기화 이벤트와 같을 것입니다. 그러나 애니메이션이 작동하지 않는 것 같습니다. k-animation으로 시도했지만 init 옵션에서는 운이 없었습니다. 오타가 두 번 확인되었지만 그럴 수는 없다고 확신합니다. 부끄러운 일입니다.

어쨌든, 당신은 당신이 당신의 그리드의 dataBound 이벤트에서 호출해야하는 함수를 사용하여 추악한 아닌 간단한 방법을 사용할 수 있습니다

var changeBarColor = function() 
{ 
    $('[data-role="progressbar"]').each(function() { 
    $(this).find(".k-state-selected").addClass(
     $(this).data("kendoProgressBar").value() < 50 
     ? "yellow-bar" 
     : "red-bar" 
    ); 
    }); 
}; 

Demo합니다. 다시 : 위젯이 그런 간단하고 유용한 기능이 부족한 것은 수치 스럽습니다.

내가 틀렸 으리라 생각하지만 그것이 내가 얻을 수있는 것입니다. 행운을 빕니다.