Kendo Progress Bar Modifications

5 posts, 0 answers
  1. Sibin
    Sibin avatar
    5 posts
    Member since:
    Nov 2016

    Posted 05 Dec 2016 Link to this post

    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
  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 07 Dec 2016 Link to this post

    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.
  3. Sibin
    Sibin avatar
    5 posts
    Member since:
    Nov 2016

    Posted 08 Dec 2016 in reply to Dimiter Madjarov Link to this post

    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.
  4. Kerry
    Kerry avatar
    2 posts
    Member since:
    Aug 2015

    Posted 04 Aug Link to this post

    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
  5. Kerry
    Kerry avatar
    2 posts
    Member since:
    Aug 2015

    Posted 04 Aug in reply to Kerry Link to this post

    Never mind.  That's my class.
Back to Top