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

Orientation

80
80
  • Demo Configurator

Orientation


Reversed


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>
<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