This is a migrated thread and some comments may be shown as answers.

Kendo Progress Bar Modifications

4 Answers 646 Views
ProgressBar
This is a migrated thread and some comments may be shown as answers.
Sibin
Top achievements
Rank 1
Sibin asked on 06 Dec 2016, 05:27 AM

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

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

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

4 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 07 Dec 2016, 08:16 AM

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
Kendo UI is ready for Visual Studio 2017 RC! Learn more.
0
Sibin
Top achievements
Rank 1
answered on 08 Dec 2016, 11:00 AM
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.
0
Kerry
Top achievements
Rank 1
answered on 04 Aug 2017, 01:47 PM
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
0
Kerry
Top achievements
Rank 1
answered on 04 Aug 2017, 01:50 PM
Never mind.  That's my class.
Tags
ProgressBar
Asked by
Sibin
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Sibin
Top achievements
Rank 1
Kerry
Top achievements
Rank 1
Share this question
or