Kendo Progress Bar Modifications

[Sibin]

HI Team,

Inside a Kendo Tree List for Angular Js I have added a Progress Bar 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

Thanks

0down votefavorite

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

0down votefavorite

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

[Dimiter Madjarov]

Hello Sibin,

Setting the type like k-type="percent" will look for the model field named percent. You could either add such field or directly set the type as string k-type=" 'percent' ".

Regarding the second requirement, you could use the approach from the following example to achieve it - attach a handler to the change event of the ProgressBar and manually set the color of the progress.

Regards,
Dimiter Madjarov
Telerik by Progress

[Sibin]

Thanks Dimiter for your time. I got it working, as k-type was not available directly instead i used K-options to define type as percent.

[Kerry]

I am trying to do what you show in your example but the color is over ridden every time by an internal kendo-defined class.  .k-selected

[Kerry]

Never mind.  That's my class.