ProgressBar - Orientation

80
80

Demo Configurator

Orientation


Reversed


Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

By default, the RadProgressBar control's orientation is horizontal and the progress indicator's fill direction is from left to right.

You can change the orientation and direction of the Telerik Progress Bar via the Orientation and Reversed properties.

In this demo, you can set different combinations of these options to examine how the layout of the RadProgressBar changes.

Note that when the RadProgressBar control is set to RTL mode, the default Progress Indicator directions is reversed, but the Reversed property will be still set to False.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#"  CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.ProgressBar.Orientation.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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" />

    <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="progressContainer" />
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1"></telerik:RadAjaxLoadingPanel>

    <div class="demo-container" runat="server" id="progressContainer">
        <telerik:RadProgressBar RenderMode="Lightweight" runat="server" ID="ValueProgressBar" BarType="Value" Value="80" MinValue="0" MaxValue="100">
        </telerik:RadProgressBar>
        <telerik:RadProgressBar RenderMode="Lightweight" runat="server" ID="ChunkProgressBar" BarType="Chunk" Value="2" MinValue="0" MaxValue="5">
        </telerik:RadProgressBar>
        <telerik:RadProgressBar RenderMode="Lightweight" runat="server" ID="IndeterminateProgressBar" BarType="Chunk" Indeterminate="true"></telerik:RadProgressBar>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View runat="server">
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <qsf:RadioButtonList runat="server" Label="Orientation" ID="OrientationConfigurator" AutoPostBack="true"
                                         OnSelectedIndexChanged="OrientationConfigurator_SelectedIndexChanged">
                        <asp:ListItem Text="Horizontal" Value="Horizontal" Selected="true" />
                        <asp:ListItem Text="Vertical" Value="Vertical" />
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <qsf:RadioButtonList runat="server" ID="ReversedConfigurator" Label="Reversed" AutoPostBack="true"
                                         OnSelectedIndexChanged="ReversedConfigurator_SelectedIndexChanged">
                        <asp:ListItem Text="True" Value="true" />
                        <asp:ListItem Text="False" Value="false" Selected="true" />
                    </qsf:RadioButtonList>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?