How to add a linear gauge/ progress bar in an kendo mvc grid column

10 posts, 0 answers
  1. Leya
    Leya avatar
    4 posts
    Member since:
    Feb 2015

    Posted 12 Feb 2015 Link to this post

    Hi,

    Can anyone help me with this:

    How to add a linear gauge/ progress bar in an kendo mvc grid column

    I couldn't find any sample for it
  2.
  3. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 12 Feb 2015 Link to this post

    Hello Leya,

    In order to add a Kendo UI widget in a column, you could add a template with the markup required for the widget and then use the dataBound event of the Grid to initialize it. Here is a small example, that demonstrates the approach. It is basically the same in the MVC Grid.

    Regards,
    Dimiter Madjarov
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  5. Minh
    Minh avatar
    1 posts
    Member since:
    Mar 2015

    Posted 25 Sep 2015 Link to this post

    Hi Dimiter,

    Can you provide a small example using the MVC Grid?

    Thanks

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 25 Sep 2015 Link to this post

    Hello Minh,

    You should add the div elements via client template (assuming Ajax binding is used)

    columns.Bound(p => p.Freight).ClientTemplate("<div class='progress'></div>");
    attach a handler to the dataBound event of the Grid
    .Events(e => e.DataBound("dataBound"))
    and then initialize the widgets in the dataBound handler
    function dataBound() {
        var grid = this;
     
        grid.tbody.find("tr[role='row']").each(function () {
            var model = grid.dataItem(this);
     
            $(this).find(".progress").kendoProgressBar({
                value: model.Freight
            });
        });
    }

    Regards,
    Dimiter Madjarov
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  9. Mosh
    Mosh avatar
    5 posts
    Member since:
    Jun 2015

    Posted 15 Aug 2016 Link to this post

    im looking to get this to work with editable gird 

    maybe through the template

  11. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 16 Aug 2016 Link to this post

    Hello Mosh,

    There should not be any differences in the approach, when applying it to editable Grid. Let us know if we could provide assistance regarding it.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  13. Sven
    Sven avatar
    2 posts
    Member since:
    Oct 2013

    Posted 26 Feb 2017 Link to this post

    Hello Dimiter,

    would this also work for several progressbars in several columns? I would like to show printer ink levels, so I need four different progress bars in each row (CMYK). Your solution works only for one progress bar, right?

    Thanks!
    Sven

  14.
  15. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2312 posts

    Posted 28 Feb 2017 Link to this post

    Hello Sven,

    The approach could work for ProgressBars in several columns. You could for example set different CSS classes to them in order to differentiate them.
    E.g.

    columns.Bound(p => p.Freight).ClientTemplate("<div class='progress'></div>");
    columns.Bound(p => p.Freight2).ClientTemplate("<div class='progress2'></div>");

    and then use this CSS class in the dataBound event handler to find them.
    E.g.
    function dataBound() {
        var grid = this;
      
        grid.tbody.find("tr[role='row']").each(function () {
            var model = grid.dataItem(this);
      
            $(this).find(".progress").kendoProgressBar({
                value: model.Freight
            });
     
            $(this).find(".progress2").kendoProgressBar({
                value: model.Freight2
            });
        });
    }

    I hope this information helps.

    Regards,
    Dimiter Madjarov
    Telerik by Progress
    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.
  17. Sven
    Sven avatar
    2 posts
    Member since:
    Oct 2013

    Posted 02 Mar 2017 Link to this post

    Hello Dimiter,

    thanks, this works great.

    Can you please give me a hint how to style these progress bars inside the grid? I am new to ASP.Net and not sure what the best practice would be like. I would like to limit the width of the progress bars as well as their height, and I would like to color them according to printer ink (cyan, magenta and yellow).

    Thanks in advance,

    Sven

  19. Stefan
    Admin
    Stefan avatar
    3067 posts

    Posted 06 Mar 2017 Link to this post

    Hello Sven,

    I can suggest checking the demo for the custom labels in the ProgressBar:

    http://demos.telerik.com/aspnet-mvc/progressbar/customlabel

    As a best practice, we recommend the approaches shown on our demo page, how-to examples and the widgets API and this is applicable for all of the widgets:

    http://demos.telerik.com/aspnet-mvc/

    http://docs.telerik.com/aspnet-mvc/helpers/progressbar/how-to/use-with-grid-for-crud-operations

    Regards,
    Stefan
    Telerik by Progress
    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.
  20.
Back to Top