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

6 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. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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.

     
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. 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

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 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
  6. Mosh
    Mosh avatar
    2 posts
    Member since:
    Jun 2015

    Posted 15 Aug Link to this post

    im looking to get this to work with editable gird 

    maybe through the template

  7. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2153 posts

    Posted 16 Aug 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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready