New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Chunk ProgressBar

Current progress
Overall progress
channel preview channel preview

RadProgressBar can display the completed steps of a discrete process. All you need to do is:

  • Set the BarType property to Chunk.
  • Define the number of chunks through the ChunksCount property.
  • Set the maximum and current values through MaxValue and Value properties.

This demo illustrates a sample view of a TV channels tuning by incorporating two RadProgressBar controls as follows:

  • The first BarType is "Value" and shows the current channel tuning progress.
  • The second BarType is "Chunk" and shows the overall channels tuning progress.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ProgressBar.Chunk.DefaultCS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <script type="text/javascript" src="scripts.js"></script>
    <div class="demo-container no-bg">
        <div class="tvWrapper">
            <asp:Panel ID="tvScreen" runat="server" CssClass="tvContent">
                <div class="tuningBar">
                    <div>
                        <span class="rfdAspLabel">Current progress</span>
                    </div>
                    <telerik:RadProgressBar RenderMode="Lightweight" runat="server" Width="410px" ID="TuningProgressBar" BarType="Value" Value="0" ShowLabel="false">
                        <ClientEvents OnLoad="telerikDemo.tuningProgressBarLoad"
                                      OnValueChanged="telerikDemo.tuningProgressBarValueChanged"
                                      OnCompleted="telerikDemo.tuningProgressBarCompleted" />
                        <AnimationSettings Duration="0" />
                    </telerik:RadProgressBar>
                    <div style="margin-top: 30px;">
                        <span class="rfdAspLabel">Overall progress</span>
                    </div>
                    <telerik:RadProgressBar RenderMode="Lightweight" runat="server" Width="410px" ID="ChannelsProgressBar" BarType="Chunk" ChunksCount="8" MaxValue="8" Value="0">
                        <ClientEvents OnLoad="telerikDemo.channelsProgressBarLoad"
                                      OnCompleted="telerikDemo.channelsProgressBarComplete" />
                    </telerik:RadProgressBar>
                </div>
                <div class="channelPreview">
                    <img src="images/Channels/Channel_CNBC.jpg" class="imgChannel" alt="channel preview" />
                    <img src="images/Channels/TV-noise_light.gif" class="imgNoise" alt="channel preview" />
                </div>
                <div class="tuningControlsContainer">
                    <telerik:RadButton RenderMode="Lightweight" ToggleType="CustomToggle" ButtonType="SkinnedButton" ID="ToggleTuningButton" Width="80px" runat="server" AutoPostBack="false"
                                       OnClientLoad="telerikDemo.toggleTuningButtonLoad" OnClientToggleStateChanged="telerikDemo.toggleTuning" >
                        <ToggleStates>
                            <telerik:RadButtonToggleState Text="Start" />
                            <telerik:RadButtonToggleState Text="Pause" />
                        </ToggleStates>
                    </telerik:RadButton>
                </div>
            </asp:Panel>
        </div>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance