Skip to content

Commit ac2a513

Browse files
danail-vasilevdanail-vasilev
committed
Merge pull request #140 from telerik/RotatorButtonsSize
Rotator buttons size
2 parents 344f1ff + 3eda5ed commit ac2a513

File tree

5 files changed

+318
-19
lines changed

5 files changed

+318
-19
lines changed

‎controls/rotator/getting-started/how-to-configure-animations.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: How To Configure Animations
55
slug: rotator/getting-started/how-to-configure-animations
66
tags: how,to,configure,animations
77
published: True
8-
position: 1
8+
position: 2
99
---
1010

1111
# How To Configure Animations

‎controls/rotator/getting-started/how-to-configure-size-of-rotator-with-buttons.md‎

Lines changed: 287 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,287 @@
1+
---
2+
title: How To Configure Size of Rotator with Buttons
3+
page_title: How To Configure Size of Rotator with Buttons | RadRotator for ASP.NET AJAX Documentation
4+
description: How To Configure Size of Rotator with Buttons
5+
slug: rotator/getting-started/how-to-configure-size-of-rotator-with-buttons
6+
tags: how,to,configure,size,of,rotator,with,buttons
7+
published: True
8+
position: 1
9+
---
10+
11+
# How to Configure Size of Rotator with Buttons
12+
13+
This help article illustrates how to properly configure the size of a rotator with buttons so that the items are not cut or misaligned on initial showing or during animiation playing.
14+
15+
* [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration)
16+
17+
* [Configure Rotator with Buttons](#configure-rotator-with-buttons)
18+
19+
* [Example (RadRotatorSizeConfigurator Class Implementation)](#example-radrotatorsizeconfigurator-class-implementation)
20+
21+
## Configure Rotator with Buttons
22+
23+
To configure a rotator with buttons, you should do the following:
24+
* Define the proper dimensions for the rotator, its items and item template as per the [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration) article.
25+
* Determine the size of the buttons and just add it to the rotator's width/height.
26+
27+
For example, if we want to show four items (100x100 pixels) in a horizontal rotator with buttons for the black skin with Lightweight render mode, we can follow the steps below:
28+
1. Set the single item's dimensions - `ItemWidth`="100" `ItemHeight`="100".
29+
1. Set the item template dimensions - .itemTemplate {width: 100px; height: 100px;}.
30+
1. Inspect the size of a single button - 30x30.
31+
32+
![rotator-size-buttons](images/inspect-button-size.png)
33+
34+
1. Calculate and set the rotator's width - (4 items * 100) + 2 buttons * 30 = 400 + 60 = 460px.
35+
36+
>tip All of the explained logic stays the same if the `ScrollDirection`="Up, Down" is set, but it should be applied to the `Height` and `ItemHeight` properties, respectively.
37+
38+
>caption **Figure 1**: A snapshot of a rotator with buttons that has 4 items. The code that creates it is available in **Example 1**.
39+
40+
![rotator-size-buttons](images/rotator-size-buttons.png)
41+
42+
>caption **Example 1**: Configure rotator with button that will have 4 items.
43+
44+
````CSS
45+
<style type="text/css">
46+
body {
47+
font-size: 14px;
48+
}
49+
50+
.itemTemplate {
51+
width: 100px;
52+
height: 100px;
53+
}
54+
</style>
55+
````
56+
57+
````ASPX
58+
<telerik:RadRotator ID="RadRotator1" runat="server" Width="460" ItemWidth="100" Height="100" RotatorType="Buttons" RenderMode="Lightweight" Skin="Black"
59+
ItemHeight="100" DataSourceID="SqlDataSource1" FrameDuration="1000">
60+
<ItemTemplate>
61+
<asp:Image CssClass="itemTemplate" ID="Image1" runat="server" ImageUrl='<%# Eval("CustomerID", "~/Img/Northwind/Customers/{0}.jpg") %>'
62+
AlternateText="IMAGE" />
63+
</ItemTemplate>
64+
</telerik:RadRotator>
65+
66+
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
67+
SelectCommand="SELECT [CustomerID] FROM [Customers]"></asp:SqlDataSource>
68+
````
69+
70+
You can find the list of the button sizes for the different skins in **Classic** and **Lightweight** render mode in **List 1** and **List 2**. The base is 14px font-size.
71+
72+
>caption **List 1**: RadRotator button sizes for all the skins with "Lightweight" render mode.
73+
* **Bootstrap** - 34px
74+
* **Material** - 38px
75+
* The rest of the skins - 30px
76+
77+
>caption **List 2**: RadRotator button sizes for all the skins with "Classic" render mode.
78+
* **Glow**, **Silk**, **MetroTouch**, **BlackMetroTouch** - 28px
79+
* **Bootstrap** - 34px
80+
* The rest of the skins - 20px
81+
82+
## Example (RadRotatorSizeConfigurator Class Implementation)
83+
84+
In the example below you can see a helper class (i.e., RadRotatorSizeConfigurator) that automatically calculates and sets the rotator's width based on the desired number of items, the set skin and render mode. The class accepts three parameters: the instance of the rotator, the number of the visible items in the view port and the skin (optional).
85+
86+
>caption **Example 2**: Configure rotator with buttons that has 4 items (100px x 100px) per view. The method that calculates the actual width is shown in **Example 3**.
87+
88+
````CSS
89+
<style type="text/css">
90+
body {
91+
font-size: 14px;
92+
}
93+
94+
.itemTemplate {
95+
width: 100px;
96+
height: 100px;
97+
}
98+
</style>
99+
````
100+
101+
````ASPX
102+
<telerik:RadRotator ID="RadRotator1" runat="server" ItemWidth="100" Height="100" RotatorType="Buttons" RenderMode="Lightweight" Skin="Black"
103+
ItemHeight="100" DataSourceID="SqlDataSource1" FrameDuration="1000">
104+
<ItemTemplate>
105+
<asp:Image CssClass="itemTemplate" ID="Image1" runat="server" ImageUrl='<%# Eval("CustomerID", "~/Img/Northwind/Customers/{0}.jpg") %>'
106+
AlternateText="IMAGE" />
107+
</ItemTemplate>
108+
</telerik:RadRotator>
109+
110+
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
111+
SelectCommand="SELECT [CustomerID] FROM [Customers]"></asp:SqlDataSource>
112+
````
113+
114+
````C#
115+
protected void Page_Load(object sender, EventArgs e)
116+
{
117+
RadRotatorSizeConfigurator.ConfigureSize(RadRotator1, 4);
118+
}
119+
````
120+
````VB
121+
Protected Sub Page_Load(sender As Object, e As EventArgs)
122+
RadRotatorSizeConfigurator.ConfigureSize(RadRotator1, 4)
123+
End Sub
124+
````
125+
126+
>caption **Example 3**: The implementation of the RadRotatorSizeConfigurator class that determines and sets the actual size of the rotator for the particular skin.
127+
128+
````C#
129+
public static class RadRotatorSizeConfigurator
130+
{
131+
const int classicButtonStandardSize = 20;
132+
const int liteButtonStandardSize = 30;
133+
134+
static Dictionary<string, int> largeButtonsSkins = new Dictionary<string, int>()
135+
{
136+
{ "Glow", 28 },
137+
{ "Silk", 28 },
138+
{ "MetroTouch", 28 },
139+
{ "BlackMetroTouch", 28 },
140+
{ "Bootstrap", 34 },
141+
{ "LiteBootstrap", 34 },
142+
{ "LiteMaterial", 38 }
143+
};
144+
static RotatorType[] buttonModes = { RotatorType.Buttons, RotatorType.ButtonsOver, RotatorType.SlideShowButtons, RotatorType.CarouselButtons };
145+
static RotatorType[] animationModes = { RotatorType.Carousel, RotatorType.CarouselButtons, RotatorType.CoverFlow, RotatorType.CoverFlowButtons };
146+
147+
public static void ConfigureSize(RadRotator rotator, int itemsPerView)
148+
{
149+
ConfigureSize(rotator, itemsPerView, GetCurrentSkin());
150+
}
151+
152+
public static void ConfigureSize(RadRotator rotator, int itemsPerView, string selectedSkin)
153+
{
154+
if (Array.IndexOf(animationModes, rotator.RotatorType) != -1) return;
155+
156+
int buttonsSize = GetButtonsSize(rotator, selectedSkin);
157+
158+
bool isHorizontal = (rotator.ScrollDirection == (RotatorScrollDirection.Left | RotatorScrollDirection.Right) ||
159+
rotator.ScrollDirection == RotatorScrollDirection.Right ||
160+
rotator.ScrollDirection == RotatorScrollDirection.Left);
161+
162+
if (isHorizontal)
163+
{
164+
rotator.Width = Unit.Pixel(Convert.ToInt32(rotator.ItemWidth.Value) * itemsPerView + buttonsSize);
165+
rotator.Height = rotator.ItemHeight;
166+
}
167+
else
168+
{
169+
rotator.Height = Unit.Pixel(Convert.ToInt32(rotator.ItemHeight.Value) * itemsPerView + buttonsSize);
170+
rotator.Width = rotator.ItemWidth;
171+
}
172+
}
173+
174+
public static int GetButtonsSize(RadRotator rotator)
175+
{
176+
return GetButtonsSize(rotator, GetCurrentSkin());
177+
}
178+
179+
public static int GetButtonsSize(RadRotator rotator, string selectedSkin)
180+
{
181+
int buttonStandardSize;
182+
if (rotator.ResolvedRenderMode == RenderMode.Lightweight)
183+
{
184+
selectedSkin = "Lite" + selectedSkin;
185+
buttonStandardSize = liteButtonStandardSize;
186+
}
187+
else
188+
{
189+
buttonStandardSize = classicButtonStandardSize;
190+
}
191+
192+
int buttonSize = (!largeButtonsSkins.ContainsKey(selectedSkin)) ? buttonStandardSize : largeButtonsSkins[selectedSkin];
193+
int buttonsCount = 1;
194+
if (Array.IndexOf(buttonModes, rotator.RotatorType) == -1)
195+
{
196+
buttonsCount = 0;
197+
}
198+
else if (rotator.ScrollDirection == (RotatorScrollDirection.Left | RotatorScrollDirection.Right) ||
199+
rotator.ScrollDirection == (RotatorScrollDirection.Down | RotatorScrollDirection.Up))
200+
{
201+
buttonsCount = 2;
202+
}
203+
204+
return buttonSize * buttonsCount;
205+
}
206+
207+
private static string GetCurrentSkin()
208+
{
209+
return (string)((((Page)HttpContext.Current.Handler).FindControl("RadRotator1") as RadRotator).Skin ?? ConfigurationManager.AppSettings["Telerik.Skin"]);
210+
}
211+
}
212+
````
213+
````VB
214+
Public NotInheritable Class RadRotatorSizeConfigurator
215+
Private Sub New()
216+
End Sub
217+
Const classicButtonStandardSize As Integer = 20
218+
Const liteButtonStandardSize As Integer = 30
219+
220+
Shared largeButtonsSkins As New Dictionary(Of String, Integer)() From { _
221+
{"Glow", 28}, _
222+
{"Silk", 28}, _
223+
{"MetroTouch", 28}, _
224+
{"BlackMetroTouch", 28}, _
225+
{"Bootstrap", 34}, _
226+
{"LiteBootstrap", 34}, _
227+
{"LiteMaterial", 38} _
228+
}
229+
Shared buttonModes As RotatorType() = {RotatorType.Buttons, RotatorType.ButtonsOver, RotatorType.SlideShowButtons, RotatorType.CarouselButtons}
230+
Shared animationModes As RotatorType() = {RotatorType.Carousel, RotatorType.CarouselButtons, RotatorType.CoverFlow, RotatorType.CoverFlowButtons}
231+
232+
Public Shared Sub ConfigureSize(rotator As RadRotator, itemsPerView As Integer)
233+
ConfigureSize(rotator, itemsPerView, GetCurrentSkin())
234+
End Sub
235+
236+
Public Shared Sub ConfigureSize(rotator As RadRotator, itemsPerView As Integer, selectedSkin As String)
237+
If Array.IndexOf(animationModes, rotator.RotatorType) <> -1 Then
238+
Return
239+
End If
240+
241+
Dim buttonsSize As Integer = GetButtonsSize(rotator, selectedSkin)
242+
243+
Dim isHorizontal As Boolean = (rotator.ScrollDirection = (RotatorScrollDirection.Left Or RotatorScrollDirection.Right) OrElse rotator.ScrollDirection = RotatorScrollDirection.Right OrElse rotator.ScrollDirection = RotatorScrollDirection.Left)
244+
245+
If isHorizontal Then
246+
rotator.Width = Unit.Pixel(Convert.ToInt32(rotator.ItemWidth.Value) * itemsPerView + buttonsSize)
247+
rotator.Height = rotator.ItemHeight
248+
Else
249+
rotator.Height = Unit.Pixel(Convert.ToInt32(rotator.ItemHeight.Value) * itemsPerView + buttonsSize)
250+
rotator.Width = rotator.ItemWidth
251+
End If
252+
End Sub
253+
254+
Public Shared Function GetButtonsSize(rotator As RadRotator) As Integer
255+
Return GetButtonsSize(rotator, GetCurrentSkin())
256+
End Function
257+
258+
Public Shared Function GetButtonsSize(rotator As RadRotator, selectedSkin As String) As Integer
259+
Dim buttonStandardSize As Integer
260+
If rotator.ResolvedRenderMode = RenderMode.Lightweight Then
261+
selectedSkin = "Lite" & selectedSkin
262+
buttonStandardSize = liteButtonStandardSize
263+
Else
264+
buttonStandardSize = classicButtonStandardSize
265+
End If
266+
267+
Dim buttonSize As Integer = If((Not largeButtonsSkins.ContainsKey(selectedSkin)), buttonStandardSize, largeButtonsSkins(selectedSkin))
268+
Dim buttonsCount As Integer = 1
269+
If Array.IndexOf(buttonModes, rotator.RotatorType) = -1 Then
270+
buttonsCount = 0
271+
ElseIf rotator.ScrollDirection = (RotatorScrollDirection.Left Or RotatorScrollDirection.Right) OrElse rotator.ScrollDirection = (RotatorScrollDirection.Down Or RotatorScrollDirection.Up) Then
272+
buttonsCount = 2
273+
End If
274+
275+
Return buttonSize * buttonsCount
276+
End Function
277+
278+
Private Shared Function GetCurrentSkin() As String
279+
Return DirectCast(If(TryCast(DirectCast(HttpContext.Current.Handler, Page).FindControl("RadRotator1"), RadRotator).Skin, ConfigurationManager.AppSettings("Telerik.Skin")), String)
280+
End Function
281+
End Class
282+
````
283+
284+
# See Also
285+
286+
* [RadRotator Dimensions Configuration]({%slug rotator/getting-started/overview%}#radrotator-dimensions-configuration)
287+

‎controls/rotator/getting-started/images/inspect-button-size.png‎

11.4 KB
Loading

‎controls/rotator/getting-started/images/rotator-size-buttons.png‎

71.2 KB
Loading

‎controls/rotator/getting-started/overview.md‎

Lines changed: 30 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,40 @@ position: 0
1010

1111
# Getting Started Overview
1212

13-
**These steps should be followed in order to configure RadRotator control:**
13+
This help article illustrates how to configure a RadRotator control.
1414

15-
**RadRotator** is a dynamic control that moves its content. To do that the control should be "aware" of its items size. The *ItemWidth* and *ItemHeight* properties are intended to provide this information to the control. If these properties are not set accordingly to the ItemTemplate's *size*, then the **RadRotator** may behave inconsistently in different browsers.
15+
* [RadRotator Basic Configuration](#radrotator-basic-configuration)
1616

17-
* The items are not shown when the control is first loaded. After clicking the "Refresh" button the items become visible.
17+
* [RadRotator Dimensions Configuration](#radrotator-dimensions-configuration)
1818

19-
* Rotator shows only a part of a loaded item (the items are not synchronized)
19+
## RadRotator Basic Configuration
2020

21-
* A gap occurs between the item like an empty item.
21+
To configure a rotator control you can follow the steps below:
22+
23+
* Add the control on the page. You can simply drag and drop it from the Visual Studio Toolbox. Please note that it requires an asp:ScriptManager to be declared on the page as well.
24+
25+
* Add a data source control and set the RadRotator's DataSourceID property to its ID.
26+
27+
* Declare the ItemTemplate's content.
2228

23-
* Rotator does not rotate its content
29+
* It is recommended that if you want to declare multiple elements inside the rotator's ItemTemplate, you should add a div that wraps the content in the ItemTemplate and set a class to that div. The *width* and *height* CSS properties applied through this class should be synchronized with the values set to the RadRotator's `ItemWidth` and `ItemHeight` properties. The margin and padding of the elements declared inside the `ItemTemplate` should be taken into account as well.
2430

25-
This example demonstrates the purpose of the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties:
31+
* Set the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties. You can refer to the next section, ([RadRotator Dimensions Configuration](#radrotator-dimensions-configuration)), for details on the matter.
2632

27-
* Add the control on the page. You can simply drag and drop it from the Visual Studio's Toolbox. Please note that it requires an asp:ScriptManager to be declared on the page as well
2833

29-
* Add a data source control and set the RadRotator's DataSourceID property to its ID
34+
## RadRotator Dimensions Configuration
3035

31-
* Declare the ItemTemplate's content
36+
**RadRotator** is a dynamic control that moves its content. To do that the control should be "aware" of its item's size. The `ItemWidth` and `ItemHeight` properties are intended to provide this information to the control. If these properties are not set accordingly in the ItemTemplate's *size*, then the **RadRotator** may behave inconsistently in different browsers.
37+
38+
* The items are not shown when the control is first loaded. After clicking the "Refresh" button the items become visible.
39+
40+
* Rotator shows only a part of a loaded item (the items are not synchronized).
41+
42+
* A gap occurs between the item like an empty item.
3243

33-
* It is recommended, if multiple elements are declared inside the rotator's ItemTemplate, to add a div that wraps the content in the ItemTemplate and set a class to that div. The *width* and *height* CSS properties applied through this class should be synchronized with the values set to the RadRotator's *ItemWidth* and *ItemHeight* properties. The margin and padding of the elements declared inside the ItemTemplate should be taken into account as well.
44+
* Rotator does not rotate its content.
3445

35-
* Set the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties:
46+
This example below demonstrates the purpose of the [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%}) properties:
3647

3748
````XML
3849
<telerik:RadRotator RenderMode="Lightweight" ID="RadRotator1" runat="server" Width="200" ItemWidth="100" Height="100"
@@ -54,15 +65,16 @@ This example demonstrates the purpose of the [Width, ItemWidth, Height and ItemH
5465
}
5566
````
5667

57-
After implementing the above steps two items will be shown in the **RadRotator**'s viewport, because of the *Width="200"* and *ItemWidth="100"* properties.
68+
After implementing the above steps, two items will be shown in the **RadRotator**'s viewport, because of the `Width="200"` and `ItemWidth="100"` properties.
5869

5970
![](images/rotator-rotatorconfig.jpg)
6071

61-
In case that the requirement is to show 3 items in the viewport, then the *Width* property should be changed to "300". Also, if one of the **RadRotator**'s buttons' type is used , then the *Width* property should be set to *"240"* (the buttons have dimensions: 20x20 pixels).
72+
In the case that the requirement is to show 3 items in the viewport, then the `Width` property should be changed to "300". Also, if one of the **RadRotator**'s buttons' type is used, then the buttons' size should be added to the rotator's `Width` property. For example if the button is 30x30 then the width should be 360. You can find more information in the article, [How To Configure Size of Rotator with Buttons]({%slug rotator/getting-started/how-to-configure-size-of-rotator-with-buttons%}).
6273

63-
All of the explained logic stays the same if the *ScrollDirection="Up, Down"* is set, but it should be applied to the *Height* and *ItemHeight* properties, respectively.
74+
All of the explained logic stays the same if the `ScrollDirection="Up, Down"` is set, but it should be applied to the `Height` and `ItemHeight` properties, respectively.
6475

65-
>important The built-in skin **MetroTouch** (introduced with the Q2 2012 release) requires some additional modifications of the values that should be set in the properties **Width** and **Height** of **RadRotator** :
66-
* You should always add 14px to the **Width** and the **Height** of **RadRotator** .
67-
* If the **RadRotator** is configured in a mode that uses control buttons (for example **Buttons** , **ButtonsOver** ) you should add 28px for every button (the buttons have dimensions: 28x28 pixels). In case the **RadRotator** has horizontal orientation the pixels are added to the **Width** property and in case the rotator control is oriented vertically, you should increase the **Height** property.
76+
# See Also
6877

78+
* [How To Configure Size of Rotator with Buttons]({%slug rotator/getting-started/how-to-configure-size-of-rotator-with-buttons%})
79+
80+
* [Width, ItemWidth, Height and ItemHeight]({%slug rotator/server-side-programming/overview%})

0 commit comments

Comments
 (0)