Progress bar in each cell

9 posts, 0 answers
  1. Pankaj
    Pankaj avatar
    10 posts
    Member since:
    Feb 2016

    Posted 21 Oct 2016 Link to this post

    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.

  2. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 24 Oct 2016 Link to this post

    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.
     
  3. Pankaj
    Pankaj avatar
    10 posts
    Member since:
    Feb 2016

    Posted 30 Oct 2016 in reply to Dimiter Madjarov Link to this post

    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

  4. Pankaj
    Pankaj avatar
    10 posts
    Member since:
    Feb 2016

    Posted 30 Oct 2016 in reply to Dimiter Madjarov Link to this post

    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

  5. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2211 posts

    Posted 31 Oct 2016 Link to this post

    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.
     
  6. Russ
    Russ avatar
    2 posts
    Member since:
    May 2014

    Posted 06 Mar Link to this post

    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.

  7. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    290 posts

    Posted 08 Mar Link to this post

    Hi Russ,

    Unfortunately, the "incell" 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.
  8. Russ
    Russ avatar
    2 posts
    Member since:
    May 2014

    Posted 08 Mar Link to this post

    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.

  9. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    290 posts

    Posted 10 Mar Link to this post

    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 visualization (charts) and form elements.
Back to Top