Skip to content

Commit 2c9081a

Browse files
Marin BratanovIankodj
Marin Bratanov
authored and
Iankodj
committed
added Primary State information for RadButton, RadLinkButton, RadPushButton
1 parent f925b69 commit 2c9081a

File tree

7 files changed

+30
-519
lines changed

7 files changed

+30
-519
lines changed

‎controls/button/appearance-and-styling/creating-a-custom-lightweight-skin.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Creating a Custom LightWeight Skin
55
slug: button/appearance-and-styling/creating-a-custom-lightweight-skin
66
tags: creating,a,custom,lightweight,skin
77
published: True
8-
position: 3
8+
position: 4
99
---
1010

1111
# Creating a Custom LightWeight Skin

‎controls/button/appearance-and-styling/creating-a-custom-skin.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Creating a Custom Skin
55
slug: button/appearance-and-styling/creating-a-custom-skin
66
tags: creating,a,custom,skin
77
published: True
8-
position: 2
8+
position: 3
99
---
1010

1111
# Creating a Custom Skin

‎controls/button/appearance-and-styling/css-classes.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: CSS Classes
55
slug: button/appearance-and-styling/css-classes
66
tags: css,classes
77
published: True
8-
position: 1
8+
position: 2
99
---
1010

1111
# CSS Classes

‎controls/button/appearance-and-styling/custom-height-tutorial.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Custom Height Tutorial
55
slug: button/appearance-and-styling/custom-height-tutorial
66
tags: custom,height,tutorial
77
published: True
8-
position: 4
8+
position: 5
99
---
1010

1111
# Custom Height Tutorial

‎controls/button/appearance-and-styling/primary-and-secondary-action-buttons.md‎

Lines changed: 26 additions & 145 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,37 @@
11
---
2-
title: Primary and Secondary Action Buttons
3-
page_title: Primary and Secondary Action Buttons | RadButton for ASP.NET AJAX Documentation
4-
description: Primary and Secondary Action Buttons
2+
title: Primary State
3+
page_title: Primary State | RadButton for ASP.NET AJAX Documentation
4+
description: Primary State
55
slug: button/appearance-and-styling/primary-and-secondary-action-buttons
6-
tags: primary,and,secondary,action,buttons
6+
tags: primary,and,secondary,action,buttons,state
77
published: True
8-
position: 5
8+
position: 1
99
---
1010

11-
# Primary and Secondary Action Buttons
11+
# Primary State
1212

13-
**RadButton** offers primary and secondary states, named primary and secondary action buttons (**Figure 1**), that share a unique innovation styles for some skins(**Bootstrap**, **Silk** and **Glow**). **Primary** action buttons use bright and saturated colors that pop up more and catch attention easily, while the **Secondary buttons** are the default ones.
1413

15-
>caption Figure 1: RadButton with primary and secondary action states for the Silk, Glow and Bootstrap skins.
14+
**RadButton** offers an additional "primary" state (**Figure 1**) that uses bright and saturated colors to have the button pop up more and catch attention easily. This feature is available as of **Q1 2016**. For older versions, see the [Older Versions](#older-versions) section.
1615

17-
![button-primary-and-secondary-action-buttons](images/button-primary-and-secondary-action-buttons.png)
16+
>caption Figure 1: RadButton in its regular and primary state.
1817
19-
In order to switch to the primary state you must set the **CssClass** property of the **RadButton** to **rbPrimaryButton** (see **Example 1** below).
18+
![Regular and primary button state](images/primary-state-button-silk.png)
2019

21-
>caption Example 1: Configure primary and secondary action buttons for the **Silk**, **Glow**and **Bootstrap** skins in **RadButton**.
20+
To switch to the primary state, set the `Primary` property of the **RadButton** control to `true` and its **[RenderMode]({%slug button/mobile-support/render-modes%})** property to `Lightweight` (**Example 1**). The property defaults to `false` result in the regular button appearance for most cases.
21+
22+
>caption Example 1: Configure the primary state of a RadButton instance.
23+
24+
````ASP.NET
25+
<telerik:RadButton runat="server" ID="RadButton1" Text="Regular Button" RenderMode="Lightweight" Skin="Silk"></telerik:RadButton>
26+
<telerik:RadButton runat="server" ID="RadButton2" Primary="true" Text="Primary Button" RenderMode="Lightweight" Skin="Silk"></telerik:RadButton>
27+
````
28+
29+
30+
## Older Versions
31+
32+
To put a button in its primary state in a version **prior to Q1 2016**, you should set its `CssClass` property to `rbPrimaryButton` (**Example 2**). This state, however, is only available for the **Silk**, **Glow** and **Bootstrap** skins.
33+
34+
>caption Example 2: Configure the primary state of a RadButton for the **Silk**, **Glow** and **Bootstrap** skins in versions **prior to Q1 2016**.
2235
2336
````ASP.NET
2437
Silk Skin:
@@ -36,140 +49,6 @@ Bootstrap Skin:
3649
<telerik:RadButton ID="RadButton6" runat="server" Text="Secondary Button" Skin="Bootstrap" />
3750
````
3851

39-
>caption Example 2: The code that renders the result in Figure 1.
40-
41-
````ASP.NET
42-
<style>
43-
.buttonsWrapper {
44-
display: inline-block;
45-
}
46-
47-
td {
48-
padding: 5px;
49-
}
50-
.skinName {
51-
margin-left: 5px;
52-
}
53-
</style>
54-
<div class="buttonsWrapper">
55-
<asp:Label ID="Label1" Text="" runat="server" Font-Bold="true" CssClass="skinName" />
56-
<table>
57-
<thead>
58-
<tr>
59-
<td>
60-
61-
</td>
62-
</tr>
63-
</thead>
64-
<tbody>
65-
<tr>
66-
<td>PRIMARY
67-
<br />
68-
BUTTONS
69-
</td>
70-
<td>SECONDARY
71-
<br />
72-
BUTTONS
73-
</td>
74-
</tr>
75-
<tr>
76-
<td>
77-
<telerik:RadButton ID="RadButton1" runat="server" Text="Normal" Width="60px" CssClass="rbPrimaryButton" />
78-
</td>
79-
<td>
80-
<telerik:RadButton ID="RadButton2" runat="server" Text="Normal" Width="60px" />
81-
</td>
82-
</tr>
83-
<tr>
84-
<td>
85-
<telerik:RadButton ID="RadButton3" runat="server" Text="Hover" Width="60px" CssClass="rbPrimaryButton" />
86-
</td>
87-
<td>
88-
<telerik:RadButton ID="RadButton4" runat="server" Text="Hover" Width="60px" />
89-
</td>
90-
</tr>
91-
<tr>
92-
<td>
93-
<telerik:RadButton ID="RadButton5" runat="server" Text="Active" Width="60px" CssClass="rbPrimaryButton" />
94-
</td>
95-
<td>
96-
<telerik:RadButton ID="RadButton6" runat="server" Text="Active" Width="60px" />
97-
</td>
98-
</tr>
99-
<tr>
100-
<td>
101-
<telerik:RadButton ID="RadButton7" runat="server" Text="Disabled" Width="60px" Enabled="false" CssClass="rbPrimaryButton" />
102-
</td>
103-
<td>
104-
<telerik:RadButton ID="RadButton8" runat="server" Text="Disabled" Width="60px" Enabled="false" />
105-
</td>
106-
</tr>
107-
</tbody>
108-
</table>
109-
</div>
110-
````
111-
112-
````C#
113-
protected void Page_Load(object sender, EventArgs e)
114-
{
115-
//Load the user control with the RadButton with Silk, Glow and BootStrap skins
116-
LoadUserControl("RadButtonsUserControl.ascx", "RadButtonsUserControl1", "Silk");
117-
LoadUserControl("RadButtonsUserControl.ascx", "RadButtonsUserControl2", "Glow");
118-
LoadUserControl("RadButtonsUserControl.ascx", "RadButtonsUserControl3", "Bootstrap");
119-
}
120-
121-
protected void LoadUserControl(string controlName, string controlID, string skin)
122-
{
123-
//Load the user control
124-
UserControl userControl = (UserControl)this.LoadControl(controlName);
125-
userControl.ID = controlID;
126-
//Set the skin for the controls inside the user control
127-
SetUserControlSkin(skin, userControl.Controls);
128-
//Add the user control to the form
129-
this.form1.Controls.Add(userControl);
130-
}
131-
132-
protected void SetUserControlSkin(string skinName, ControlCollection cc)
133-
{
134-
(cc[1] as Label).Text = skinName.ToUpper();
135-
for (int i = 2; i < cc.Count; i++)
136-
{
137-
Control currControl = cc[i];
138-
if (currControl.GetType().Name == "RadButton")
139-
{
140-
(currControl as RadButton).Skin = skinName;
141-
}
142-
}
143-
}
144-
````
145-
````VB
146-
Protected Sub Page_Load(sender As Object, e As EventArgs)
147-
'Load the user control with the RadButton with Silk, Glow and BootStrap skins
148-
LoadUserControl("RadButtonsUserControl.ascx", "RadButtonsUserControl1", "Silk")
149-
LoadUserControl("RadButtonsUserControl.ascx", "RadButtonsUserControl2", "Glow")
150-
LoadUserControl("RadButtonsUserControl.ascx", "RadButtonsUserControl3", "Bootstrap")
151-
End Sub
152-
153-
Protected Sub LoadUserControl(controlName As String, controlID As String, skin As String)
154-
'Load the user control
155-
Dim userControl As UserControl = DirectCast(Me.LoadControl(controlName), UserControl)
156-
userControl.ID = controlID
157-
'Set the skin for the controls inside the user control
158-
SetUserControlSkin(skin, userControl.Controls)
159-
'Add the user control to the form
160-
Me.form1.Controls.Add(userControl)
161-
End Sub
162-
163-
Protected Sub SetUserControlSkin(skinName As String, cc As ControlCollection)
164-
TryCast(cc(1), Label).Text = skinName.ToUpper()
165-
For i As Integer = 2 To cc.Count - 1
166-
Dim currControl As Control = cc(i)
167-
If currControl.[GetType]().Name = "RadButton" Then
168-
TryCast(currControl, RadButton).Skin = skinName
169-
End If
170-
Next
171-
End Sub
172-
````
17352

17453

17554
## See Also
@@ -181,3 +60,5 @@ End Sub
18160
* [Creating a Custom Skin]({%slug button/appearance-and-styling/creating-a-custom-skin%})
18261

18362
* [Custom Height Tutorial]({%slug button/appearance-and-styling/custom-height-tutorial%})
63+
64+
* [RenderMode]({%slug button/mobile-support/render-modes%})

0 commit comments

Comments
 (0)