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

[Leya]

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

[Dimiter Madjarov]

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

 

 

[Minh]

Hi Dimiter,

Can you provide a small example using the MVC Grid?

Thanks

[Dimiter Madjarov]

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

[Mosh]

im looking to get this to work with editable gird 

maybe through the template

[Dimiter Madjarov]

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

[Sven]

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

[Dimiter Madjarov]

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

[Saravana]

I am trying to add a linear gauge to a kendo grid using this approach. I am using ASP.NET Core + Javascript. My kendo grid has 1 linear gauge column. It takes around 200 to 250 ms to create linear gauge for a single row. I was able to bring this time down to 150 to 200 ms range by setting transitions option to false. Is there anything else that I can do to further bring down the loading time of the grid?

It takes about 5 minutes to load 2000 rows in a kendo grid with a linear gauge column. Without the linear gauge column, it takes about 30 seconds. 

I would really appreciate any tips on how I can further improve the performance of the grid with a linear gauge column?

[Sven]

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

[Stefan]

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