Kendo Progress Bar Modifications - angularjs

Question

Inside a Kendo Tree List for Angular Js I have added a Graph as a kendo template.
<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>
And I bind it to the tree list as part of column declaration
{ field: "Status", template: $("#progressStatus").html(), width: "170px" }
So far good. And I am able to display the value in UI.
However I am not sure how to show following
How to make it of type percent, i tried with k-type='percent' but no luck
If Percentage > 50 show the graph in yellow and text (50%) in red

Answer 1

Unfortunately, some options seems not to work with angular directives. I could not get to work k-type (like you). In my dojo that attribute seems to break the widget. After checking this page, I could use type the following way:
<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. That will make percent type work.
Now, changing the color of the widget based on the value is another problem. The ProgressBar don't have any kind templates and it is poor in events(only complete and change). It seems that your bar doesn't changes it's value, it's is static, right? So I tried to realize a way to call change event with animation which should call change after being complete. It would be like an initialization event. But, animation doesn't seems to work either. I tried with k-animation and in the init options, but no luck. Double checked for typos but I'm sure that wasn't the case. It's a shame.
Anyway, you can use the ugly and non-straightforward way using a function which you should call in your grid's dataBound event:
var changeBarColor = function()
{
$('[data-role="progressbar"]').each(function() {
$(this).find(".k-state-selected").addClass(
$(this).data("kendoProgressBar").value() < 50
? "yellow-bar"
: "red-bar"
);
});
};
Demo. Again: It's a shame the widget lacks of such a simple and useful feature like that.
I hope I'm wrong but that is the far I could get on this. Good luck.