This is a migrated thread and some comments may be shown as answers.

Progress bar in each cell

8 Answers 195 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Pankaj
Top achievements
Rank 1
Pankaj asked on 21 Oct 2016, 07:08 AM

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.

8 Answers, 1 is accepted

Sort by
0
Dimiter Madjarov
Telerik team
answered on 24 Oct 2016, 08:45 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Pankaj
Top achievements
Rank 1
answered on 30 Oct 2016, 11:02 AM

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

0
Pankaj
Top achievements
Rank 1
answered on 30 Oct 2016, 11:06 AM

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

0
Dimiter Madjarov
Telerik team
answered on 31 Oct 2016, 09:05 AM

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
 
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
 
0
Russ
Top achievements
Rank 1
answered on 06 Mar 2017, 05:45 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 08 Mar 2017, 01:07 PM
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
Try our brand new, jQuery-free Angular 2 components built from groprogress barh deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Russ
Top achievements
Rank 1
answered on 08 Mar 2017, 03:14 PM

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.

0
Alex Hajigeorgieva
Telerik team
answered on 10 Mar 2017, 10:08 AM
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
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 (charts) and form elements.
Tags
Grid
Asked by
Pankaj
Top achievements
Rank 1
Answers by
Dimiter Madjarov
Telerik team
Pankaj
Top achievements
Rank 1
Russ
Top achievements
Rank 1
Alex Hajigeorgieva
Telerik team
Share this question
or