Hi. There is an error in ProgressBarOptions definitions for value property:

I've a kendo progress bar defined with angularjs directive. I'm able to set the min, max and value. But I cannot find the way to set the progress status text.

The example provided is using a jQuery way:

              passProgress.progressStatus.text("Empty");}); 

 

I cannot figure out how to do it. My code looks like this.

 

              <div kendo-progress-bar="progressBar" 
                     k-min="voterStatus.progressOption.min" 
                     k-max="voterStatus.progressOption.max" 
                     k-value="voterStatus.progressOption.progress" >
                </div>

Hi,

I have a screen with multiple progress bars, all using Chunk types. These are created in the code behind as I wouldn't know the values.

It all works ok apart from if the chunkCount is 1. the progress bar looses its sizing and doesn't look right.

I tried on the demo site and it does the same thing. Is this a bug or is there a way around it?

I know it makes sense to use the type value if its only 1 chunk but as its created from the code behind I would like to keep all the bars the same.

 

Thanks

Tej

In razor I dynamically build some progress bars and would like to color the progress part of the bar dynamically.
Is this possible?

@foreach (var c in categories) {
@(Html.Kendo().ProgressBar()
.HtmlAttributes(new { @class = "page-progress-bar" })
.Name("cat-" + i)
.Type(ProgressBarType.Percent)
.Value(c.Pct)
)
}

javascript way: http://demos.telerik.com/kendo-ui/progressbar/customlabel
helper: http://docs.telerik.com/kendo-ui/api/aspnet-mvc/Kendo.Mvc.UI.Fluent/ProgressBarBuilder

Dear Guys;
We need a bar to show calculated remaning date.
I want to show the difference with different colors. If the number is negative, I want to show it as red. If the number is possitive, I want to show it as green. 
How can I do? To me, I think I can solve this problem using Progressbar widget. However, I do not know how I can use the progress for this purpose.

I added the ProgressBar to a page that implemented Responsive Design, and (after reading "All Kendo UI widgets have been updated to be 'responsive' out of the box")  I assumed that the progress bar would automatically resize itself as the window size decreased -- but it didn't on my particular page.

And the documentation for ProgressBar doesn't explain how to adjust the width so I can set it myself through media types.  Explicitly setting the width for the ProgressBar or the span it was contained in didn't make a difference, so I played around with trying to set some of the CSS styles associated with the ProgressBar but that didn't seem to help either.

So I was wondering if someone could help explain what one has to do to get the ProgressBar to resize appropriately as the browser window size changes.

I need to run some batch ajax posts and would like to use the new porgressbar to show the progress.
I'm trying to use the Kendo Window to display the progressbar. The post happens when user clicks on my kendo grid checkbox.
The issue I'm having is that the window only shows after the post is completed.

Here is my window code:

 <% Html.Kendo().Window()
    .Name("windowevent")
    .Scrollable(false)
    .Modal(true)
    .AutoFocus(true)
    .Width(500)
    .Title("Processing ...")
    .Content(() => {
        %>
            <div class="loading">
                <%= Html.Kendo().ProgressBar()
                .Name("totalProgressBar")
                .Type(ProgressBarType.Chunk)
                .ChunkCount(4)
                .Min(0)
                .Max(4)
                .Orientation(ProgressBarOrientation.Horizontal)
                .Events(e => e.Complete("onTotalComplete"))
                %>
            </div>
            <div class="loadingInfo">
                <h2>Loading styles</h2>
                <div class="statusContainer">
                    <p>
                        Loaded: <span class="loadingStatus">0%</span>
                        <br />
                        Item <span class="chunkStatus">1</span> of 4
                    </p>
                </div>
            </div>    
        <%
    })
    .Draggable()
    .Visible(false)
    .Render();
    %>


Here is my checkbox click event:

function onClick() {
            $.ajaxSetup({ async: false });

            $("#windowevent").data("kendoWindow").center().open();
            
         $.post("<%= Url.Action("AddToCatalog", "Settings")%>?CatalogID=" + <%= Model.CatalogID %> + "&ManufacturerID=" + id + "&time=" + new Date().getTime(), function (data, status) {
                    if (data != "True" || status != "success") { alert("Error trying to update. Please try again."); gridMan.dataSource.read(); };
                });
           var total = $("#totalProgressBar").data("kendoProgressBar");
           total.value(total.value() + 1);

            $.ajaxSetup({ async: true });
            
        }

Any clue how to make this an efficient sync process?


Thanks!

Is it possible to use the progressbar to update the status of a running c# code (eg. update of all items being handled in the c# code, just like with the asp.net progressarea)
Thanks.