progressbar in a column

8 posts, 2 answers
  1. David Ocasio
    David Ocasio avatar
    159 posts
    Member since:
    Nov 2009

    Posted 28 Jun 2017 Link to this post

    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>
  2. Answer
    Georgi
    Admin
    Georgi avatar
    501 posts

    Posted 30 Jun 2017 Link to this post

    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.
  3. David Ocasio
    David Ocasio avatar
    159 posts
    Member since:
    Nov 2009

    Posted 30 Jun 2017 in reply to Georgi Link to this post

    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

     

  4. David Ocasio
    David Ocasio avatar
    159 posts
    Member since:
    Nov 2009

    Posted 01 Jul 2017 in reply to David Ocasio Link to this post

    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.

  5. Answer
    Georgi
    Admin
    Georgi avatar
    501 posts

    Posted 04 Jul 2017 Link to this post

    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.
  6. David Ocasio
    David Ocasio avatar
    159 posts
    Member since:
    Nov 2009

    Posted 04 Jul 2017 in reply to Georgi Link to this post

    thanks georgi

    that works perfectly

  7. Rico
    Rico avatar
    1 posts
    Member since:
    Apr 2019

    Posted 16 Apr Link to this post

    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

  8. Tsvetomir
    Admin
    Tsvetomir avatar
    237 posts

    Posted 19 Apr Link to this post

    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.
Back to Top