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

Random Order

  • Demo Configurator

Telerik RadRotator can be configured to shows random items by setting its EnableRandomOrder="true" property. If this property is set to true then, the third item can be shown first, for example. This does not change the item's index, however, and if the first item is clicked (and it is actually the third one in the rotator's item collection) its index will be 2 (the indexes start from 0)

In this example, RadRotator shows the content of a directory. The images are loaded using the GetFilesInFolder method, shown in the codebehind file.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="vb" AutoEventWireup="true" Inherits="Telerik.Web.Examples.Rotator.RandomOrder.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<!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" type="text/css" />
</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">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="chbEnableRandomOrder">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadRotator1" />
                    <telerik:AjaxUpdatedControl ControlID="chbEnableRandomOrder" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <div class="demo-container size-medium">
        <div class="rotatorBackground">
            <telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="348px" Height="91px" CssClass="horizontalRotator"
                                ScrollDuration="500" FrameDuration="2000" ItemHeight="91" ItemWidth="58" EnableRandomOrder="true"
                                PauseOnMouseOver="false" Skin="Windows7">
                <ItemTemplate>
                    <div class="itemTemplate">
                        <asp:Image ID="Image1" runat="server" ImageUrl='<%# Container.DataItem  %>' AlternateText="<%# VirtualPathUtility.GetFileName(Container.DataItem.ToString()) %>">
                        </asp:Image>
                    </div>
                </ItemTemplate>
            </telerik:RadRotator>
        </div>
    </div>
    <qsf:ConfiguratorPanel runat="server">
        <Views>
            <qsf:View runat="server">
                <p>
                    <asp:CheckBox ID="chbEnableRandomOrder" runat="server" Text="EnableRandomOrder" Checked="true"
                                  AutoPostBack="true" OnCheckedChanged="chbEnableRandomOrder_CheckedChanged"></asp:CheckBox>
                </p>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance