Kendo Progressbar JQuery must show values greater than 100%

1 Answer 239 Views
ProgressBar
Agustin
Top achievements
Rank 2
Agustin asked on 11 Aug 2022, 07:05 PM | edited on 11 Aug 2022, 07:08 PM

Hello,

I want to show a percentage using a kendo JQuery progress bar (min: 0, max: 1.0), but percentage value can be greater than 1.0

If percent value is 1.2 then I need that progress bar show the progress bar full filled in red background color, but "120%" as value.

Now, progress bar shows 100% instead of 120%

Thanks

1 Answer, 1 is accepted

Sort by
1
Accepted
Neli
Telerik team
answered on 16 Aug 2022, 09:31 AM

Hi Agustin,

As far as I understand the scenario, you need the maximum value (max configuration) of the ProgressBar to be set to 1 (100%), but the text for the maximum value to show more than 100%. If this is the case I would suggest you to use the 'k-progress-status' class and change the text in the respective element.

For example in the Dojo linked here the value in the ProgressBar can be set between 0 and 1. In the input element above the ProgressBar values between 0 and 2 can be entered. In case a value greater than 1 is entered, then in the complete event handler of the ProgressBar the text of the $('.k-progress-status') is changed. 

complete: function(e){
          if(newValue > 1){
              var text = newValue*100 + '%'
              $('.k-progress-status').text(text)
          }
}

I hope this helps.

Regards,
Neli
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Agustin
Top achievements
Rank 2
commented on 16 Aug 2022, 05:44 PM

Thank You Neli, it's working fine
Tags
ProgressBar
Asked by
Agustin
Top achievements
Rank 2
Answers by
Neli
Telerik team
Share this question
or