Progress bar in each cell

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

    Posted 21 Oct 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
    2156 posts

    Posted 24 Oct 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. Kendo UI is VS 2017 Ready
  4. Pankaj
    Pankaj avatar
    10 posts
    Member since:
    Feb 2016

    Posted 30 Oct 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

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

    Posted 30 Oct 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

  6. Dimiter Madjarov
    Admin
    Dimiter Madjarov avatar
    2156 posts

    Posted 31 Oct 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.
     
Back to Top
Kendo UI is VS 2017 Ready