This is a migrated thread and some comments may be shown as answers.

progressbar in a column

9 Answers 121 Views
Grid
This is a migrated thread and some comments may be shown as answers.
David Ocasio
Top achievements
Rank 2
Veteran
David Ocasio asked on 28 Jun 2017, 01:26 PM

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>

9 Answers, 1 is accepted

Sort by
0
Accepted
Georgi
Telerik team
answered on 30 Jun 2017, 01:47 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 30 Jun 2017, 08:01 PM

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

 

0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 01 Jul 2017, 03:47 PM

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.

0
Accepted
Georgi
Telerik team
answered on 04 Jul 2017, 12:25 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
David Ocasio
Top achievements
Rank 2
Veteran
answered on 04 Jul 2017, 03:06 PM

thanks georgi

that works perfectly

0
Rico
Top achievements
Rank 1
answered on 16 Apr 2019, 03:01 PM

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

0
Tsvetomir
Telerik team
answered on 19 Apr 2019, 11:29 AM
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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ranjith
Top achievements
Rank 1
answered on 17 Nov 2020, 08:35 AM

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

0
Tsvetomir
Telerik team
answered on 19 Nov 2020, 02:18 PM

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

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/.

Tags
Grid
Asked by
David Ocasio
Top achievements
Rank 2
Veteran
Answers by
Georgi
Telerik team
David Ocasio
Top achievements
Rank 2
Veteran
Rico
Top achievements
Rank 1
Tsvetomir
Telerik team
Ranjith
Top achievements
Rank 1
Share this question
or