Visualizing Percentage Data as Progress Bar

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1688 posts
    Member since:
    Oct 2004

    Posted 10 May 2014 Link to this post


    Telerik Product and Version

    Supported Browsers and Platforms

    browser support all browsers supported by RadControls

    Components/Widgets used (JS frameworks, etc.)


    This code library demonstrates how to style all cells in a column in such manner, so a percentage value could be presented as a progress bar within the cell.

    This data visualization technique, despite its simplicity, allows the user to easily interpret the percentage values through the column:

    Using GridTemplateColumn

    With GridTemplateColumn you could accomplish the progress-bar-like column from the markup with CSS and some adjustments for the width and the text position for each cell. Following is a very simple example for styling a GridTemplateColumn as a progress-bar-like column (where "value" is a number between 0 and 100):

    <telerik:GridTemplateColumn HeaderText="Percentage" ItemStyle-CssClass="progressBarItem"
        DataField="value" UniqueName="value">
            <div class="progressBar" style='width: <%# Eval("value") %>%; background: #ddd;'>
                <span style="margin-right: <%# double.Parse(Eval("value").ToString()) > 20 ? "0" : "-32px" %>;">
                    <%# Eval("value") %>%

    And the CSS:
    .progressBar {
        height: 23px;
        text-align: left;
        color: #783722;
        border: 1px solid #aaa;
        border-left: 0px;
        .progressBar span {
            padding: 3px 7px 0 10px;
            display: inline-block;
            font-size: 11px;
            float: right;
    .progressBarItem {
        padding: 0!important;

    Using GridBoundColumn or GridNumericColumn

    For getting the same result with GridBoundColumn or GridNumericColumn, the server-side OnPreRender event of the RadGrid should be handled, where the AddPercentageBarToColumn() method should be called with correct parameters for the columns for which we want to display the progress bar.

    In the attached sample page you could find the three methods that you must include in your project. Those three methods are AddPercentageBarToColumn(), AddPercentageBarToFooter() (if a progress bar will be displayed in the footer) and the InterpolateColors().
    Please note that the same CSS classes (as in the GridTemplateColumn approach) should be used.

    AddPercentageBarToColumn() and AddPercentageBarToFooter() methods

    Both methods accept four parameters:
    • GridTableView object
    • Column's UniqueName
    • HEX color for 0% (StartColor)
    • HEX color for 100% (EndColor)

    When AddPercentageBarToColumn() is called, all items in the GridTableView will be traversed and a progress bar will be added to each cell in the specified column. Depending on the values in the cells, an interpolated color between the StartColor and the EndColor will be set as a background of the progress bar.

    InterpolateColors() method

    This method interpolates two colors by a given percentage and returns a HEX color as a string. It accepts three parameters:
    • Numeric value between 0 and 100
    • HEX color for 0% (StartColor)
    • HEX color for 100% (EndColor)
    InterpolateColors() method could also be used with the GridTemplateColumn approach as demonstrated in the following example:
    <telerik:GridTemplateColumn HeaderText="Percentage 2" ItemStyle-CssClass="progressBarItem"
        DataField="value2" UniqueName="value2" Aggregate="Avg" FooterAggregateFormatString="Avg: {0:n2}">
            <div class="progressBar" style='width: <%# Eval("value2") %>%; background: <%# InterpolateColors(Eval("value2"), "#ddd", "#999") %>'>
                <span style="margin-right: <%# double.Parse(Eval("value2").ToString()) > 20 ? "0" : "-32px" %>;">
                    <%# Eval("value2") %>%

Back to Top