progressbar in a column

[David Ocasio]

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.

 

<div class="row">
    <div class="col-md-12">
        @(Html.Kendo().Grid<KitViewModel>()
              .Name("kitsOverviewGrid")
              .Columns(columns =>
              {
                  columns.Bound(p => p.SeqKit).Title("Kit#");
                  columns.Bound(p => p.Assembly).Title("Assembly");
                  columns.Bound(p => p.DateToPickStart).Title("Start Date").Format("{0:MM/dd/yyyy}");
                  columns.Bound(p => p.StatusName).Title("Status");
                  columns.Bound(p => p.KitQty).Title("Kit Qty");
                  columns.Bound(p => p.PercentCompletelyIssued)
                        .Title("Completely Issued")
                        .ClientTemplate(
                                Html.Kendo()
                                        .ProgressBar()
                                        .Name(Guid.NewGuid().ToString())
                                        .Type(ProgressBarType.Percent)
                                        .ToClientTemplate().ToString());
              })
              .Pageable()
              .Sortable()
              .Scrollable()
              .Filterable()
              .HtmlAttributes(new { style = "height:550px;" })
              .DataSource(dataSource => dataSource
                  .Ajax()
                  .PageSize(20)
                  .Read(read => read.Action("GetKitsOverView", "KitsOverview"))
              )
              )
    </div>
</div>

[Georgi]

Hello David,

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.


Regards,
Georgi
Progress Telerik

[David Ocasio]

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

 

[David Ocasio]

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.

[Georgi]

Hello David,

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.

Regards,
Georgi
Progress Telerik

[David Ocasio]

thanks georgi

that works perfectly

[Rico]

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.

 

Regards,

Rico

[Tsvetomir]

Hi Rico,

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:

.ClientTemplate("#= renderTemplate(data) #");

function renderTemplate(dataItem) {
    debugger;
    if (dataItem.PercentCompletelyIssued > 50) {
        return "<div data-role='progressbar' style='width: 100 % ' data-type='percent' data-min='0' data-max='100' data-bind='value: PercentCompletelyIssued'></div>";
    } else {
        return 'Critical';
    }
}

Let me know in case additional information is needed.


Kind regards,
Tsvetomir
Progress Telerik

[Ranjith]

Hi,

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.

Regards

[Tsvetomir]

Hi David,

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.

 

Kind regards,
Tsvetomir
Progress Telerik