Kendo進度條修改

在Angular Js的Kendo樹列表中我添加了Graph作爲kendo模板。Kendo進度條修改

<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中顯示這個值。

但是我不知道如何表達以下

如何使它的類型％的，我試着用K型=「％的」，但沒有運氣
如果百分比> 50顯示圖形在黃色和文字（50％）紅色

來源

2016-12-05 TBA

不幸的是，有些選項似乎不適用於角度指令。我無法去工作k-type（像你）。在我的dojo這個屬性似乎打破了小部件。檢查this page後，我可以用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。這將使百分比類型工作。

現在，根據值更改小部件的顏色是另一個問題。 ProgressBar沒有任何種類的模板，並且在events（僅complete和change）中很差。看起來你的酒吧不會改變它的價值，它是靜態的，對吧？所以我試着想辦法撥打change事件animation，完成後應該叫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。再說一遍：這個小部件缺乏這樣一個簡單而有用的功能，這真是一種恥辱。

我希望我錯了，但這是我能得到的。祝你好運。

來源

2016-12-06 11:20:09 DontVoteMeDown

非常感謝花時間和幫助我。 :)我覺得用Kendo改變風格非常困難。希望他們能拿出更好的東西:) – TBA

@TBA我也是。我很樂意提供幫助。 – DontVoteMeDown

Kendo進度條修改

回答

相關問題