I'm trying to add a bar in a column to show the percentage
I approached it by attempting to put a progressbar in the column.
I am not sure how to bind the value through.
if this is not the correct approach or I could get some help with the syntax I would appreciate any help.
9 Answers, 1 is accepted
It is not possible to use wrapper to build the Kendo ProgressBar in your case because you are using ajax binding. This means that on the server, where the wrapper builds the widget, you don't have access to the data.
So you can use MVVM binding to create a template with ProgressBar inside it. I have assembled a small sample (column-progessbar.zip) which illustrates how to create a custom client template with wrapped progress bar.
thanks georgi. that works perfectly.
a couple of other random questions on this.
your example code as well as my code utilizing your technique contains a period at the end of the bar . how do I get rid of that
also how can I center the percentage text and and a % sign.
again thanks for the code its just what I need
figured out the period at the end of progress bar column problem.
it actually was part of an ellipse . if I changed the progressbar tag to width:90% instead of width100% it goes away.
so only question left is how to center the text and add a % sign.
It is possible to specify the type of the progress bar with the attribute data-type. You can use some custom styles In order to align the label to the center.
I have modified the sample (columns-progressbar.zip) to align the label in the center and change the type of the Kendo Progress bar to percentage.
that works perfectly
If you do this, is it possible to change the text if the value is over 50%?
I saw something like this; progressStatus.text("test"); but don't know how to make it work.
Generally, programmatically changing the text of the progress bar is a possible option. However, in the specific case of being within a client template of the grid, there is not a suitable event in which this could be done. More specifically, at the time the widget is initialized, the value is one and after the dataBound event has finished executing, the values are applied to the data items. Hence, the initial text of the progress bar gets overridden. The document.ready() event is too early, as well.
In the context of changing the values, is it a possible option to render plain text instead of a progress bar, isn't it? You might opt for styling the text and use a conditional client template as shown below:
Let me know in case additional information is needed.
Is there a way to show incremental percentage in the progress bar. I have it in a grid and have to refresh the grid every 10 seconds. when ever the grid is rebinded it is starting from 0% again.
I would like to show it incrementally , like from 10 % ---> 11 % rather than 10--> 0 >>> 11.
In order to keep the progress bar's value up-to-date, you should update the respective field before refreshing the grid. Or, send the incremented value from the server. Otherwise, the progress bar cannot know what value is supposed to be shown. It shows the value of the field that it is bound to.
Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.