Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You can change the border of the RadRotator control and its items via additional CSS classes:</p> <ol> <li><p>The internal CSS class <strong>rrClipRegion</strong> can be overridden in order to set a new color for the rotator control's border:</p> <pre><code>.rrClipRegion { border: 1px solid green !important; } </code></pre></li> <li><p>You can set a default border color for the RadRotator's items via CSS and then you can change it from the code behind by defining a CSS class with new border color, as shown below:</p></li> </ol> <p><strong>The RadRotator markup:</strong></p> <pre><code> &lt;telerik:RadRotator ID="RadRotator1" runat="server" FrameDuration="3000" ScrollDirection="Left" Height="123px" ItemHeight="113px" Width="180px" ItemWidth="152px" Skin="Default" RotatorType="Buttons" OnItemClick="RadRotator1_ItemClick"&gt; &lt;ItemTemplate&gt; &lt;div&gt; &lt;img src="....." alt="" /&gt; &lt;/div&gt; &lt;/ItemTemplate&gt; &lt;/telerik:RadRotator&gt; </code></pre> <p><strong>The styles, needed for applying the borders:</strong></p> <pre><code>&lt;style type="text/css"&gt; .rrItem { margin: 4px; } .rrItem img { border: 1px solid grey; } .cssSelectedItem img { border: 1px solid red; } &lt;/style&gt; </code></pre> <p><strong>Changing the item's border color from the code-behind:</strong></p> <pre><code>protected void RadRotator1_ItemClick(object sender, RadRotatorEventArgs e) { RadRotatorItem item = (RadRotatorItem)e.Item; item.CssClass = "cssSelectedItem"; RadRotator1.InitialItemIndex = e.Item.Index; } </code></pre> <p>Note that I have set the <strong>InitialItemIndex</strong> property of the rotator control in order to preserve the current item through postback. Also, the example is designed for images with size 150x113, so if different sizes are being utilized you should change the properties <strong>Width</strong>, <strong>Height</strong>, <strong>ItemWidth</strong>, <strong>ItemHeight</strong> accordingly.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload