Progress bar in each cell

[Pankaj]

Hi,

I want something like progress bar in each cell. Please see attachment. so let say in my cell, i show something like 100/1000 (i.e 10%) then a small progress bar should be shown under the value of cell. please see attachment's "Total" column. also it should be dynamically changing. so lets say user changes some value in other cell and due to this, at client side, the total becomes (200/1000) then progress bar should be changed accordingly.

if its not provided by telerik, can you please guide how to achieve the same.

[Dimiter Madjarov]

Hello Pankaj,

You could apply a template to the column and initialize a Kendo UI ProgressBar widget in each cell. Here is a sample implementation demonstrating the approach.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Pankaj]

hi,

The requirement is that the progress bar will show progress as per user input in grid cells.

for e.g let say there are three columns "Marks", "Total" and "percentage". "Marks" and "Total" are user input. if any of the cell value changes, the progress bar should show the progress accordingly.

please guide

[Pankaj]

Hi,

The requirement is that the progress bar in cell should change dynamically.

lets say grid has three columns "Marks","Total" and "Percentage". "Percentage" column contains is progress bar. "Marks" and "Total" columns are user input. whenever user changes any of values of columns "Marks" or "Total", the progress bar should reflect change based on user input values

Please guide

[Dimiter Madjarov]

Hello Pankaj,

In this case I would recommend to check our Grid editing demos:

http://demos.telerik.com/kendo-ui/grid/editing

http://demos.telerik.com/kendo-ui/grid/editing-inline

http://demos.telerik.com/kendo-ui/grid/editing-popup

All of those could be combined with the example from my previous post, in which the ProgressBar will reflect the value of the corresponding model property.

Regards,
Dimiter Madjarov
Telerik by Progress

 

 

[Russ]

Could you suggest a way to make the cells with the progress bar in them incell editable?

 As it is with your jsbin example now, if you change the grid to editable incell, clicking to edit the value in progress bar field replaces the cell with the edit container (good) but on blur (value changed or not) the template is reinvoked, but the needed code (in dataBound) is not, so the progress bars are not recreated.

[Alex Hajigeorgieva]

Hi Russ,

Unfortunately, the "" editable Kendo UI Grid does not fire a "cancel" event at present, so a little creativity is needed to persist the Kendo UI Progress bar in the Kendo UI Grid.

One way I can think of is to recreate the progress bar when the input of the automatically generated numeric text box editor becomes blurred.

I updated my colleague's runnable demo using this approach at:

http://dojo.telerik.com/OhAkA

Let me know what you think. Should you have any questions, I will be pleased to clarify.

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress

[Russ]

Thanks Alex,

That approach works well enough for what I needed.   Note, I had to add a ticks value to the setTimeout to get it to work, forcing it later that the blur event that calls closeCell.

A few downsides, obviously.   Not generic to the type of incell editor, requires duplicating the progress bar initialization code (or moving it to a common function), and is wasteful when the cell edited wasn't actually the progress bar cell.   If one has enough of these widgets in different columns, the edit event callback can get a bit messy also (btw, it would be cool if the edit event would pass the field being edited as a parameter when incell editing).

I would definitely like to see Kendo UI address this in a more generic way, such as with an event on closeCell.  I guess I can just override the closeCell function myself.

[Alex Hajigeorgieva]

Hello Russ,

Indeed, such event would be beneficial for scenarios such as the one discussed in this thread.

We have an idea in the UserVoice item which addresses the same need. You may cast your vote for it to support it. The items in highest demand are reviewed by the Product Management and implemented with priority.

http://kendoui-feedback.telerik.com/forums/127393-kendo-ui-feedback/suggestions/5716576-event-for-switching-grid-from-edit-to-view-mode-in

Kind Regards,
Alex Hajigeorgieva
Telerik by Progress