diff --git a/_config.yml b/_config.yml index 7276a115df..70c0a5f970 100644 --- a/_config.yml +++ b/_config.yml @@ -366,6 +366,9 @@ navigation: "controls/timepicker": title: "TimePicker" position: 1 + "controls/togglebutton": + title: "ToggleButton" + position: 1 "controls/toolbar": title: "ToolBar" position: 1 diff --git a/controls/togglebutton/accessibility-and-internationalization/images/togglebutton-rtl.png b/controls/togglebutton/accessibility-and-internationalization/images/togglebutton-rtl.png new file mode 100644 index 0000000000..110a3bbfdd Binary files /dev/null and b/controls/togglebutton/accessibility-and-internationalization/images/togglebutton-rtl.png differ diff --git a/controls/togglebutton/accessibility-and-internationalization/keyboard-support.md b/controls/togglebutton/accessibility-and-internationalization/keyboard-support.md new file mode 100644 index 0000000000..b67885b508 --- /dev/null +++ b/controls/togglebutton/accessibility-and-internationalization/keyboard-support.md @@ -0,0 +1,27 @@ +--- +title: Keyboard Support +page_title: Keyboard Support | RadToggleButton for ASP.NET AJAX Documentation +description: Keyboard Support +slug: togglebutton/accessibility-and-internationalization/keyboard-support +tags: keyboard,support +published: True +position: 2 +--- + +# Keyboard Support + +There are several ways to use the **RadToggleButton** via the keyboard only: + +* Set its **TabIndex** property and use the **Tab** key to navigate to the desired button and then press the **Enter** key to invoke a click on the button. + +* Set its **AccessKey** property. This allows you to use the browser's shortcut combination to invoke the click ("Alt + AccessKey in IE and Chrome", "Shift + Alt + AccessKey" for Firefox, Shift + Esc + AccessKey for Opera). + +>note Note: By default tab-access is disabled in Safari. To enable it, check "Preferences > Advanced > Press tab to highlight each item on a page". + +## See Also + + * [Live Demo: RadToggleButton Keyboard Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/keyboard-support/defaultcs.aspx) + + * [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%}) + + * [Right-to-Left Support]({%slug togglebutton/accessibility-and-internationalization/right-to-left-support%}) diff --git a/controls/togglebutton/accessibility-and-internationalization/right-to-left-support.md b/controls/togglebutton/accessibility-and-internationalization/right-to-left-support.md new file mode 100644 index 0000000000..20c045750c --- /dev/null +++ b/controls/togglebutton/accessibility-and-internationalization/right-to-left-support.md @@ -0,0 +1,42 @@ +--- +title: Right-to-Left Support +page_title: Right-to-Left Support | RadToggleButton for ASP.NET AJAX Documentation +description: Right-to-Left Support +slug: togglebutton/accessibility-and-internationalization/right-to-left-support +tags: right-to-left,support +published: True +position: 1 +--- + +# Right-to-Left Support + +The **RadToggleButton** fully supports right-to-left (RTL) language locales (**Figure 1**). In order to turn on the RTL support you should set **dir=rtl to the html or body** element or at least to its parent element (**Figure 1**). You can also use the **direction:rtl** CSS property. + +>caption Figure 1: RadToggleButton in RTL mode. + +![RadToggleButton-rtl](images/togglebutton-rtl.png) + +>caption Example 1: Set the "direction: rtl" style to the **RadToggleButton**'s wrapper element in order to enable the RTL support for the control. + +````ASP.NET +
+ + + + + + + + + + +
+```` + +## See Also + + * [Live Demo: RadToggleButton RTL Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/righttoleft/defaultcs.aspx) + + * [WCAG 2.0 and Section 508 Accessibility Compliance]({%slug togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance%}) + + * [Keyboard Support]({%slug togglebutton/accessibility-and-internationalization/keyboard-support%}) diff --git a/controls/togglebutton/accessibility-and-internationalization/wai-aria-support.md b/controls/togglebutton/accessibility-and-internationalization/wai-aria-support.md new file mode 100644 index 0000000000..ab79cab8a5 --- /dev/null +++ b/controls/togglebutton/accessibility-and-internationalization/wai-aria-support.md @@ -0,0 +1,44 @@ +--- +title: WAI-ARIA Support +page_title: WAI-ARIA Support | RadToggleButton for ASP.NET AJAX Documentation +description: WAI-ARIA Support +slug: togglebutton/accessibility-and-internationalization/wai-aria-support +tags: wai-aria,support +published: True +position: 3 +--- + +# WAI-ARIA Support + +This article demonstrates how to enable and use the WAI-ARIA support of the **RadToggleButton** control. + +The [WAI-ARIA Suite](http://www.w3.org/WAI/intro/aria) defines an approach to make web content and web applications more accessible to people with disabilities. **RadToggleButton** offers WAI-ARIA support. + +In order to enable the WAI-ARIA support, set the **RadToggleButton** control's `EnableAriaSupport` property to `true` and, optionally, set the inner properties ([DescribedBy](http://www.w3.org/TR/wai-aria/states_and_properties#aria-describedby) and [Label](http://www.w3.org/TR/wai-aria/states_and_properties#aria-label)) of the `AriaSettings` composite tag to the desired values as shown in **Example 1**. + +>caption **Example 1**: Enabling WAI-ARIA support for RadToggleButton + +````ASP.NET + + + + + + + + + +```` + +>note The implementation of the WAI ARIA support is achieved entirely client-side (using JavaScript) by appending different attributes and appropriate WAI-ARIA roles to the DOM elements. This is done because an HTML document containing ARIA attributes will not pass validation if they are added on the server. + + + + +## See Also + + * [Live Demo: RadToggleButton WAI-ARIA Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/wai-aria-support/defaultcs.aspx) + + * [W3C: WAI-ARIA Overview](http://www.w3.org/WAI/intro/aria) + + diff --git a/controls/togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance.md b/controls/togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance.md new file mode 100644 index 0000000000..7dc41e7b43 --- /dev/null +++ b/controls/togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance.md @@ -0,0 +1,29 @@ +--- +title: WCAG 2.0 and Section 508 Accessibility Compliance +page_title: WCAG 2.0 and Section 508 Accessibility Compliance | RadToggleButton for ASP.NET AJAX Documentation +description: WCAG 2.0 and Section 508 Accessibility Compliance +slug: togglebutton/accessibility-and-internationalization/wcag-2.0-and-section-508-accessibility-compliance +tags: wcag,2.0,and,section,508,accessibility,compliance +published: True +position: 0 +--- + +# WCAG 2.0 and Section 508 Accessibility Compliance + +The interface of **RadToggleButton for ASP.NET AJAX** is level AAA accessible (in compliance with the W3C Web Accessibility Guidelines 2.0) as well as Section 508 compliant. It passes the check of the [WAVE](http://wave.webaim.org/) automated content compliance tool for Section 508 and WCAG 2.0 - Compliance Level AAA. + +The control is also visible in Windows High Contrast mode when rendered with Simple skin. + +It also offers [Keyboard support]({%slug togglebutton/accessibility-and-internationalization/keyboard-support%}). + +## See Also + + * [Live Demo: RadToggleButton Accessibility Support](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/accessibility-support/defaultcs.aspx) + + * [Section 508](http://www.section508.gov/) + + * [Web Content Accessibility Guidelines (WCAG) 2.0](http://www.w3.org/TR/WCAG/) + + * [Right-to-Left Support]({%slug togglebutton/accessibility-and-internationalization/right-to-left-support%}) + + * [Keyboard Support]({%slug togglebutton/accessibility-and-internationalization/keyboard-support%}) diff --git a/controls/togglebutton/appearance-and-styling/create-a-custom-skin.md b/controls/togglebutton/appearance-and-styling/create-a-custom-skin.md new file mode 100644 index 0000000000..dc135d67ae --- /dev/null +++ b/controls/togglebutton/appearance-and-styling/create-a-custom-skin.md @@ -0,0 +1,112 @@ +--- +title: Create a Custom Skin +page_title: Create a Custom Skin | RadToggleButton for ASP.NET AJAX Documentation +description: Create a Custom Skin +slug: togglebutton/appearance-and-styling/create-a-custom-skin +tags: create,a,custom,skin +published: True +position: 3 +--- + +# Create a Custom Skin + +Each of the controls included in the **Telerik UI for ASP.NET AJAX** suite is styled with two CSS files that are loaded in a certain order. The first file – **[ControlName].css** , also called base stylesheet, contains CSS properties and values that are common for all skins, i.e., it is layout-specific, not skin-specific. These are CSS float, padding, margin, font-size, font-family, etc. In general, when creating a custom skin for a control, this file should not be edited unless the custom skin needs different sizes, padding and / or margins. + +The second file represents the actual skin of the control, and its name consists of the control name plus the skin name, e.g., - **Button.Default.css**. Upon creating a custom skin for the control, one should edit that particular file, as it contains skin-specific CSS properties and references to images, colors, borders and backgrounds. + +## Create a RadToggleButton Skin from an Existing One + +1. In your project, create a new directory named **Skins**; + +1. In the **Skins** folder if you already have some custom skin, most probably you have already a folder named: **MyCustomSkin** – if you don’t – create one; + +1. In the **Skins** folder, create a new folder named: **MyCustomSkinLite** - this is the place where your Lightweight custom skins CSS will be placed; + +1. Go to **[ControlsInstallationFolder]\Skins\DefaultLite** and copy **Button.Default.css** into your **MyCustomSkinLite** folder; + +1. Go to **[TelerikControlsInstallationFolder]\Skins\Default** and copy the **Common** folder into your **MyCustomSkin** folder; + +1. Rename **Button.Default.css** to **Button.MyCustomSkin.css**; + +1. When you are finished you should have the following folder structure in your project: + + 1. **Skins/MyCustomSkin/Common/** - containing several sprites; + + 1. **Skins/MyCustomSkinLite/Button.MyCustomSkin.css**. + +1. In order to support multiple skins of **RadToggleButton** on a single page, the wrapping skin-specific class is created by the name of the control, plus underscore ("_") plus SkinName, i.e., **.RadButton_Default**, so in order to create a custom skin out of the Default skin, we should rename all occurrences of **"RadButton_Default"** in **Button.MyCustomSkin.css** to **"RadButton_MyCustomSkin"** as shown below: + + ![Rename Button Light](images/RenameButtonLight.png) + +1. Add a new server declaration of **RadToggleButton** on your page, and set **Skin="MyCustomSkin"** and **EnableEmbeddedSkins="false"**: + + **ASP.NET** + + + + + + + + + + +1. Register **Button.MyCustomSkin.css** in the head section of your web page. In order to have the CSS applied correctly, the base stylesheet should come first in the DOM: + + **ASP.NET** + + + +1. Make sure the path to the files is correct; otherwise the skin will not apply; + +1. Reload the page, and if the steps 1-11 have been followed correctly, you will see **RadToggleButton** running a custom Default skin set as an external resource. + +## Custom Skin Example + +The example below shows how to modify the CSS in order not only to change some colors and background colors, but also some base layout settings such as font size, element height, border-radius, etc. + +````ASP.NET + + + + + + + + +
+ + + + + + + + + + +
+ + +```` + +## See Also + + * [Render Modes]({%slug togglebutton/mobile-support/render-modes%}) diff --git a/controls/togglebutton/appearance-and-styling/images/RenameButtonLight.png b/controls/togglebutton/appearance-and-styling/images/RenameButtonLight.png new file mode 100644 index 0000000000..e0c5be4a52 Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/RenameButtonLight.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/button-new_huesat_nav.png b/controls/togglebutton/appearance-and-styling/images/button-new_huesat_nav.png new file mode 100644 index 0000000000..e1f7b0166e Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/button-new_huesat_nav.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/button-new_index_to_rgb.png b/controls/togglebutton/appearance-and-styling/images/button-new_index_to_rgb.png new file mode 100644 index 0000000000..de374bfbd6 Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/button-new_index_to_rgb.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/button-new_renaming.png b/controls/togglebutton/appearance-and-styling/images/button-new_renaming.png new file mode 100644 index 0000000000..9d2b823651 Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/button-new_renaming.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/button-new_select_color.png b/controls/togglebutton/appearance-and-styling/images/button-new_select_color.png new file mode 100644 index 0000000000..fc1b6996cc Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/button-new_select_color.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/button-new_set_color.png b/controls/togglebutton/appearance-and-styling/images/button-new_set_color.png new file mode 100644 index 0000000000..c9fdd8d443 Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/button-new_set_color.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/button-new_set_hue.png b/controls/togglebutton/appearance-and-styling/images/button-new_set_hue.png new file mode 100644 index 0000000000..71519756c6 Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/button-new_set_hue.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/primary-action-button-toggle-button.png b/controls/togglebutton/appearance-and-styling/images/primary-action-button-toggle-button.png new file mode 100644 index 0000000000..a7387b24dd Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/primary-action-button-toggle-button.png differ diff --git a/controls/togglebutton/appearance-and-styling/images/radtogglebutton-skins.png b/controls/togglebutton/appearance-and-styling/images/radtogglebutton-skins.png new file mode 100644 index 0000000000..ca10b44ad0 Binary files /dev/null and b/controls/togglebutton/appearance-and-styling/images/radtogglebutton-skins.png differ diff --git a/controls/togglebutton/appearance-and-styling/primary-action-button.md b/controls/togglebutton/appearance-and-styling/primary-action-button.md new file mode 100644 index 0000000000..f27fd77d4f --- /dev/null +++ b/controls/togglebutton/appearance-and-styling/primary-action-button.md @@ -0,0 +1,52 @@ +--- +title: Primary Action Button +page_title: Primary Action Button | RadToggleButton for ASP.NET AJAX Documentation +description: Primary Action Button +slug: togglebutton/appearance-and-styling/primary-action-button +tags: primary,and,secondary,action,buttons,state +published: True +position: 2 +--- + +# Primary Action Button + +**RadToggleButton** can be a Primary Action Button (**Figure 1**). + +The primary action button on the form has bright and saturated colors to pop up more and catch attention easily. You should use a primary action button to make the default/preferred/main/safe operation on the form stand out. At this point the rest of the buttons with their default appearance become Secondary Action buttons and do not draw as much attention. + +>caption Figure 1: Primary RadToggleButton next to a default RadToggleButton. + +![Primary action button overview](images/primary-action-button-toggle-button.png) + +To switch to a primary action button, set the `Primary` property of the **RadToggleButton** control to `true` (**Example 1**). The property defaults to `false` to result in the regular (secondary) button appearance for most cases. + +>caption Example 1: Configure a RadToggleButton to be a primary action button. + +````ASP.NET + + + + + + + + + + + + + + + + + +```` + +>note The **Primary Action Button** appearance applies only to the text and background of the push button state. If you add an image to a toggle state, **RadToggleButton** is no longer considered a button but a custom image. Thus, the borders and default backgrounds will be lost and the appearance of the control will change. + + +## See Also + + * [Skins]({%slug pushbutton/appearance-and-styling/skins%}) + + * [Create a Custom Skin]({%slug pushbutton/appearance-and-styling/create-a-custom-skin%}) diff --git a/controls/togglebutton/appearance-and-styling/skins.md b/controls/togglebutton/appearance-and-styling/skins.md new file mode 100644 index 0000000000..1bbd3bf3ac --- /dev/null +++ b/controls/togglebutton/appearance-and-styling/skins.md @@ -0,0 +1,43 @@ +--- +title: Skins +page_title: Skins | RadToggleButton for ASP.NET AJAX Documentation +description: Skins +slug: togglebutton/appearance-and-styling/skins +tags: skins +published: True +position: 0 +--- + +# Skins + +**RadToggleButton** uses **skins** to control its overall look-and-feel. A skin is a set of images and a CSS stylesheet that can be applied to the control elements and defines their look and feel. + +To apply a skin to a **RadToggleButton** control, set its **Skin** property. + +**RadToggleButton** is installed with a number of preset skins. These are shown below: + +![RadToggleButton-skins](images/radtogglebutton-skins.png) + +## Using Custom Images in a State + +**RadToggleButton** allows the developer to use a [custom image for a state]({%slug togglebutton/functionality/image%}). Once this is done, the entire control is considered a custom image and it will no longer have the default push button appearance (border and backgrounds). Thus, if you mix push button states and image states, the push button states will look like plain text on the page. + +## Customizing Skins + +You can tweak the existing skins or create your own. See [Create a Custom Skin For RadToggleButton]({%slug togglebutton/appearance-and-styling/create-a-custom-skin%}) for a step-by-step walk through. To use your own skin + +1. Add the new CSS file to your project. + +1. Drag and drop the CSS file from the Project Explorer onto your Web page. + +1. Set the **EnableEmbeddedSkins** property of the control to **False**. + +The stylesheet for a **RadToggleButton** skin has the name **Button.[SkinName].css** and can be found in the **...Skins/[SkinName]** directory. For example, the stylesheet for the "Black" skin is called Button.Black.css and is located in the ...Skins/Black directory. + +## See Also + + * [Create a Custom Skin]({%slug togglebutton/appearance-and-styling/create-a-custom-skin%}) + + * [Primary and Secondary Action Buttons]({%slug togglebutton/appearance-and-styling/primary-and-secondary-action-buttons%}) + + * [Image]({%slug togglebutton/functionality/image%}) diff --git a/controls/togglebutton/client-side-programming/events/onclientclicked.md b/controls/togglebutton/client-side-programming/events/onclientclicked.md new file mode 100644 index 0000000000..95c99147b4 --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclientclicked.md @@ -0,0 +1,67 @@ +--- +title: OnClientClicked +page_title: OnClientClicked | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientClicked +slug: togglebutton/client-side-programming/events/onclientclicked +tags: onclientclicked +published: True +position: 6 +--- + +# OnClientClicked + +The **clicked** event is subsequent to the [toggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) event, and occurs when the **RadToggleButton** control is clicked. The event is fired after the client-side validation is completed (just like the [PushButon's OnClientClicked event]({%slug pushbutton/client-side-programming/events/onclientclicked%})), just before the page is submitted, and cannot be canceled. + +The event handler receives two parameters: + +1. The instance of the clicked RadToggleButton control + +1. An eventArgs parameter of type [Telerik.Web.UI.**ButtonEventArgs**](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonEventArgs), containing the following properties and methods: + + * get_commandName() - returns the value assigned to the RadToggleButton's **CommandName** property + + * get_commandArgument() - returns the value assigned to the RadToggleButton's **CommandArgument** property + +This event can be used in scenarios where is needed custom client-side code to be executed when the button is clicked. + +>caption Example 1: Handling the OnClientClicked event. + +````ASP.NET + + +Selected Value: + + + + + + + + +```` + +## See Also + + * [PushButton - Client-side Events Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/client-side-api/client-side-events/defaultcs.aspx) + + * [PushButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [OnClientLoad]({%slug togglebutton/client-side-programming/events/onclientload%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + + * [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + + * [Telerik.Web.UI.ButtonEventArgs](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonEventArgs) diff --git a/controls/togglebutton/client-side-programming/events/onclientclicking.md b/controls/togglebutton/client-side-programming/events/onclientclicking.md new file mode 100644 index 0000000000..8081cbce87 --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclientclicking.md @@ -0,0 +1,79 @@ +--- +title: OnClientClicking +page_title: OnClientClicking | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientClicking +slug: togglebutton/client-side-programming/events/onclientclicking +tags: onclientclicking +published: True +position: 3 +--- + +# OnClientClicking + +The clicking event occurs when the RadToggleButton control is clicked, immediately after the mouse button is released. The event is fired after the client-side validation occurs, and can be canceled. + +The event handler receives two parameters: + +1. The instance of the clicked RadToggleButton control + +1. An eventArgs parameter of type [Telerik.Web.UI.**ButtonCancelEventArgs**](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonCancelEventArgs), containing the following properties and methods: + + * get_cancel() - returns a bool value that indicates whether the event was canceled. True means the event is canceled. + + * set_cancel(*shouldCancel*) - sets a bool value that indicates whether the event will be canceled. Setting true means the event will be canceled. + + * get_commandName() - returns the value assigned to the RadToggleButton's **CommandName** property + + * get_commandArgument() - returns the value assigned to the RadToggleButton's **CommandArgument** property + +This event comes handy in scenarios when the user wants to cancel the page submission, or prevent execution of the other client-side events based on a certain condition. One such scenario is confirming the submission of the page to the server. We ask the user if she wants to submit the page, and if a negative answer is received, we cancel the clicking event. Here is the code: + +>caption Example 1: Handling OnClientClicking event in RadToggleButton. + +````ASP.NET + + + + + + + +```` + +````C# +protected void RadToggleButton1_Click(object sender, System.EventArgs e) +{ + RadToggleButton1.Text = "RadToggleButton was clicked at: " + DateTime.Now.ToString(); +} +```` +````VB +Protected Sub RadToggleButton1_Click(ByVal sender As Object, ByVal e As System.EventArgs) + RadToggleButton1.Text = "RadToggleButton was clicked at: " + DateTime.Now.ToString +End Sub +```` + +## See Also + + * [PushButton - Client-side Events Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/client-side-api/client-side-events/defaultcs.aspx) + + * [PushButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [OnClientLoad]({%slug togglebutton/client-side-programming/events/onclientload%}) + + * [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + + * [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + + * [Telerik.Web.UI.ButtonCancelEventArgs](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonCancelEventArgs) + diff --git a/controls/togglebutton/client-side-programming/events/onclientload.md b/controls/togglebutton/client-side-programming/events/onclientload.md new file mode 100644 index 0000000000..cde7c6a477 --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclientload.md @@ -0,0 +1,53 @@ +--- +title: OnClientLoad +page_title: OnClientLoad | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientLoad +slug: togglebutton/client-side-programming/events/onclientload +tags: onclientload +published: True +position: 2 +--- + +# OnClientLoad + +The load event occurs when the RadToggleButton client-side object is instantiated on the page. + +The event handler receives two parameters: + +1. The instance of the loaded RadToggleButton control. + +1. An empty event args. + +This event comes handy in scenarios when the user wants to operate with the control's client-side API and events at the earliest available stage. + +>caption Example 1: Handling RadToggleButton OnClientLoad event. + +````ASP.NET + + + + + + + +```` + + +## See Also + + * [ToggleButton - Client-side Events Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/client-side-api/client-side-events/defaultcs.aspx) + + * [ToggleButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + diff --git a/controls/togglebutton/client-side-programming/events/onclientmouseout.md b/controls/togglebutton/client-side-programming/events/onclientmouseout.md new file mode 100644 index 0000000000..a5d03964fa --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclientmouseout.md @@ -0,0 +1,44 @@ +--- +title: OnClientMouseOut +page_title: OnClientMouseOut | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientMouseOut +slug: togglebutton/client-side-programming/events/onclientmouseout +tags: onclientmouseout +published: True +position: 7 +--- + +# OnClientMouseOut + +The **mouseOut** event is fired when the user moves the mouse pointer over the control. + +The event handler receives two parameters: + +1. The instance of the clicked RadToggleButton control + +1. An eventArgs parameter of type [Telerik.Web.UI.RadButtonEventArgs](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonEventArgs), containing the following properties and methods: + + * get_commandName() - returns the value assigned to the RadToggleButton's **CommandName** property + + * get_commandArgument() - returns the value assigned to the RadToggleButton's **CommandArgument** property + + +## See Also + + * [PushButton - Client-side Events Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/client-side-api/client-side-events/defaultcs.aspx) + + * [PushButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [OnClientLoad]({%slug togglebutton/client-side-programming/events/onclientload%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + + * [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [Telerik.Web.UI.RadButtonEventArgs](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonEventArgs) \ No newline at end of file diff --git a/controls/togglebutton/client-side-programming/events/onclientmouseover.md b/controls/togglebutton/client-side-programming/events/onclientmouseover.md new file mode 100644 index 0000000000..8a3946d85f --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclientmouseover.md @@ -0,0 +1,44 @@ +--- +title: OnClientMouseOver +page_title: OnClientMouseOver | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientMouseOver +slug: togglebutton/client-side-programming/events/onclientmouseover +tags: onclientmouseover +published: True +position: 6 +--- + +# OnClientMouseOver + +The **mouseOver** event is fired when the user moves the mouse pointer over the control. + +The event handler receives two parameters: + +1. The instance of the clicked RadToggleButton control + +1. An eventArgs parameter of type [Telerik.Web.UI.RadButtonEventArgs](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonEventArgs), containing the following properties and methods: + + * get_commandName() - returns the value assigned to the RadToggleButton's **CommandName** property + + * get_commandArgument() - returns the value assigned to the RadToggleButton's **CommandArgument** property + + +## See Also + + * [PushButton - Client-side Events Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/client-side-api/client-side-events/defaultcs.aspx) + + * [PushButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [OnClientLoad]({%slug togglebutton/client-side-programming/events/onclientload%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + + * [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + + * [Telerik.Web.UI.RadButtonEventArgs](http://docs.telerik.com/devtools/aspnet-ajax/api/client/args/Telerik.Web.UI.ButtonEventArgs) \ No newline at end of file diff --git a/controls/togglebutton/client-side-programming/events/onclienttogglestatechanged.md b/controls/togglebutton/client-side-programming/events/onclienttogglestatechanged.md new file mode 100644 index 0000000000..04d68cc39c --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclienttogglestatechanged.md @@ -0,0 +1,55 @@ +--- +title: OnClientToggleStateChanged +page_title: OnClientToggleStateChanged | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientToggleStateChanged +slug: togglebutton/client-side-programming/events/onclienttogglestatechanged +tags: OnClientToggleStateChanged, toggleStateChanged, state, RadToggleButton, event, client-side +published: True +position: 5 +--- + +# OnClientToggleStateChanged + +The **toggleStateChanged** event is subsequent to the [toggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) event, and occurs when the **RadToggleButton** state is changed. + +The event handler receives two parameters: + +1. The instance of the clicked RadButton control + +1. An eventArgs parameter of type **Telerik.Web.UI.RadButtonCheckedEventArgs**, containing the following properties and methods: + + * get_currentToggleState() - returns the current **RadButtonToggleState** object applied to the button. + + * get_commandName() - returns the value assigned to the RadToggleButton's **CommandName** property + + * get_commandArgument() - returns the value assigned to the RadToggleButton's **CommandArgument** property + +This event is useful when the user wants to execute custom client code when the button changes its toggle state. + +>caption Example 1: Using OnClientToggleStateChanged event to get the text of the currently selected state. + +````ASP.NET + + + + + + + + +```` + +## See Also + +* [ToggleButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + +* [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + +* [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + +* [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) \ No newline at end of file diff --git a/controls/togglebutton/client-side-programming/events/onclienttogglestatechanging.md b/controls/togglebutton/client-side-programming/events/onclienttogglestatechanging.md new file mode 100644 index 0000000000..300129c3a4 --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/onclienttogglestatechanging.md @@ -0,0 +1,60 @@ +--- +title: OnClientToggleStateChanging +page_title: OnClientToggleStateChanging | RadToggleButton for ASP.NET AJAX Documentation +description: OnClientToggleStateChanging +slug: togglebutton/client-side-programming/events/onclienttogglestatechanging +tags: OnClientToggleStateChanging, toggleStateChanging, state, RadToggleButton, event, client-side +published: True +position: 4 +--- + +# OnClientToggleStateChanging + +The **toggleStateChanging** event is subsequent to the [clicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) event, and occurs before the **RadToggleButton** state is changed. + +The event handler receives two parameters: + +1. The instance of the clicked RadButton control + +1. An eventArgs parameter of type **Telerik.Web.UI.RadButtonCheckedEventArgs**, containing the following properties and methods: + + * get_cancel() - returns a bool value that indicates whether the event was canceled. True means the event is canceled. + + * set_cancel(*shouldCancel*) - sets a bool value that indicates whether the event will be canceled. Setting true means the event will be canceled. + + * get_commandName() - returns the value assigned to the RadToggleButton's **CommandName** property + + * get_commandArgument() - returns the value assigned to the RadToggleButton's **CommandArgument** property. + +This event is useful in scenarios where the user wants to make sure the ToggleState is changed only if a certain condition is met. Note that, if the button automatically posts back to the server, which is the default behavior, the post back will not be stopped even if the event is canceled. + +The following example asks the user to confirm whether the state to be changed. + +>caption Example 1: Using OnClientToggleStateChanging event. + +````ASP.NET + + + + + + + + +```` + + +## See Also + +* [ToggleButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + +* [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + +* [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + +* [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) diff --git a/controls/togglebutton/client-side-programming/events/overview.md b/controls/togglebutton/client-side-programming/events/overview.md new file mode 100644 index 0000000000..ab5a7fe06e --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/overview.md @@ -0,0 +1,103 @@ +--- +title: Overview +page_title: Overview | RadToggleButton for ASP.NET AJAX Documentation +description: Overview +slug: togglebutton/client-side-programming/events/overview +tags: overview +published: True +position: 0 +--- + +# Events Overview + +RadToggleButton exposes several client-side events which allow easy and flexible use in a wide range of application scenarios: + +* **[OnClientLoad (load)]({%slug togglebutton/client-side-programming/events/onclientload%})** - raised when the control is initialized. + +* **[OnClientClicking (clicking)]({%slug togglebutton/client-side-programming/events/onclientclicking%})** - raised when the user clicks the button. The event can be canceled. + +* **[OnClientToggleStateChanging (toggleStateChanging)]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%})** - raised after the user clicks the button and before state is changed. The event can be canceled and it is subsequent to the **OnClientClicking** event. + +* **[OnClientToggleStateChanged (toggleStateChanged)]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%})** - raised when the state of the button is changed. The event is subsequent to the **OnClientToggleStateChanging** event. + +* **[OnClientClicked (clicked)]({%slug togglebutton/client-side-programming/events/onclientclicked%})** - raised when the button is clicked. The event is subsequent to the **OnClientToggleStateChanged** event. + +* **[OnClientMouseOver (mouseOver)]({%slug togglebutton/client-side-programming/events/onclientmouseover%})** - raised when the mouse hovers over the control. + +* **[OnClientMouseOut (mouseOut)]({%slug togglebutton/client-side-programming/events/onclientmouseout%})** - raised when the mouse leaves the control. + +To handle the desired event, the user must set the respective property to the name of the JavaScript function handling the event or to anonymous JavaScript function. Here is an example: + +>caption Example 1: Passing named (non-anonymous) JavaScript function. + +````ASP.NET + + + + + + + +```` + +````C# +RadToggleButton1.OnClientClicked = "Click"; //passing the name of the JS function +```` +````VB +RadToggleButton1.OnClientClicked = "Click" 'passing the name of the JS function +```` + + +>caption Example 2: Passing anonymous JavaScript function. + +````ASP.NET + + + + + + + + +```` + +````C# +RadToggleButton1.OnClientClicked = "function(sender,args){Click(sender, args, 'Value1', 'Value2');}"; //passing an anonymous JS function +```` +````VB +RadToggleButton1.OnClientClicked = "function(sender,args){Click(sender, args, 'Value1', 'Value2');}" 'passing an anonymous JS function +```` + + +## See Also + + * [PushButton - Client-side Events Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/client-side-api/client-side-events/defaultcs.aspx) + + * [PushButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [OnClientLoad]({%slug togglebutton/client-side-programming/events/onclientload%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + + * [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + + + diff --git a/controls/togglebutton/client-side-programming/events/setting-event-handlers-via-javascript.md b/controls/togglebutton/client-side-programming/events/setting-event-handlers-via-javascript.md new file mode 100644 index 0000000000..6aee550ec2 --- /dev/null +++ b/controls/togglebutton/client-side-programming/events/setting-event-handlers-via-javascript.md @@ -0,0 +1,99 @@ +--- +title: Setting Event Handlers via JavaScript +page_title: Setting Event Handlers via JavaScript | RadToggleButton for ASP.NET AJAX Documentation +description: Setting Event Handlers via JavaScript +slug: togglebutton/client-side-programming/events/setting-event-handlers-via-javascript +tags: setting,event,handlers,via,javascript +published: True +position: 1 +--- + +# Setting Event Handlers via JavaScript + +**RadToggleButton** API exposes client-side methods to attach and detach function to its event. They can be used as alternative to the server-side properties for handling events. + +To handle the desired event, you can use the respective **add_(handlerFunction)** to attach the desired handler (i.e. **add_clicked** for the clicked event), where the parameter *handlerFunction* should be of type **function**. To remove the handler that has been added previously, the respective **remove_(handlerFunction)** should be used. + +Here follows examples showing how to add and remove handlers on the client: + +>caption Example 1: Adding named (non-anonymous) JavaScript click handler to RadToggleButton. + +````ASP.NET + +```` + +>caption Example 2: Adding anonymous JavaScript click handler to RadToggleButton. + +````ASP.NET + +```` + +>caption Example 3: Removing JavaScript click handler of RadToggleButton. + +````JavaScript +function removeEvents() +{ + var toggleButton = $find("<%= RadToggleButton1.ClientID %>"); + toggleButton.remove_show(Click); +} +```` + +>caption Table 1: Available add/remove methods for handling client-side events. + +| Name | Description | +| ------ | ------ | +| **.add_load()** |The name of the javascript function called when the control loads.| +| **.remove_load()** |Removes a handler for the load event| +| **.add_clicking()** |The name of the javascript function called when the RadToggleButton control is clicked.| +| **.remove_clicking()** |Removes a handler for the clicking event.| +| **.add_toggleStateChanging()** |The name of the javascript function called before the state of the ToggleButton to change.| +| **.remove_toggleStateChanging()** |Removes a handler for the toggleStateChanging event.| +| **.add_toggleStateChanged()** |The name of the javascript function called when the state of the ToggleButton is changed.| +| **.remove_toggleStateChanged()** |Removes a handler for the toggleStateChanged event.| +| **.add_clicked()** |The name of the javascript function called when the RadToggleButton control is clicked.| +| **.remove_clicked()** |Removes a handler for the clicked event.| +| **.add_mouseOver()** |The name of the javascript function called when the mouse hovers over the control.| +| **.remove_mouseOver()** |Removes a handler for the mouseOver event.| +| **.add_mouseOut()** |The name of the javascript function when the mouse leaves the control.| +| **.remove_mouseOut()** |Removes a handler for the mouseOut event.| + +## See Also + + * [PushButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [Events Overview]({%slug client-side-programming/events/overview%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientToggleStateChanging]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanging%}) + + * [OnClientToggleStateChanged]({%slug togglebutton/client-side-programming/events/onclienttogglestatechanged%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + + + diff --git a/controls/togglebutton/client-side-programming/overview.md b/controls/togglebutton/client-side-programming/overview.md new file mode 100644 index 0000000000..58fc0b9777 --- /dev/null +++ b/controls/togglebutton/client-side-programming/overview.md @@ -0,0 +1,44 @@ +--- +title: Overview +page_title: Client-side Programming Overview | RadToggleButton for ASP.NET AJAX Documentation +description: Overview +slug: togglebutton/client-side-programming/overview +tags: overview +published: True +position: 0 +--- + +# Client-side Programming Overview + +**RadToggleButton** provides a flexible client-side API. You can easily interact with the button in the browser using the RadToggleButton client-side object. In addition to a variety of [client-side events]({%slug togglebutton/client-side-programming/events/overview%}), the [client-side object model]({%slug togglebutton/client-side-programming/togglebutton-object%}) lets you achieve complicated tasks while avoiding unnecessary post-backs. + +## Getting the RadToggleButton client-side object + +**RadToggleButton** creates a client-side object with the **ClientID** of the button. You can obtain the reference using the following JavaScript code: + +````JavaScript +var toggleButton = $find("<%= RadToggleButton1.ClientID %>"); +```` + +or + +````JavaScript +var toggleButton = $telerik.findToggleButton("<%= RadToggleButton1.ClientID %>"); +```` + +## See Also + + * [ToggleButton Object]({%slug togglebutton/client-side-programming/togglebutton-object%}) + + * [Events Overview]({%slug togglebutton/client-side-programming/events/overview%}) + + * [OnClientClicking]({%slug togglebutton/client-side-programming/events/onclientclicking%}) + + * [OnClientClicked]({%slug togglebutton/client-side-programming/events/onclientclicked%}) + + * [OnClientMouseOver]({%slug togglebutton/client-side-programming/events/onclientmouseover%}) + + * [OnClientMouseOut]({%slug togglebutton/client-side-programming/events/onclientmouseout%}) + + + diff --git a/controls/togglebutton/client-side-programming/togglebutton-object.md b/controls/togglebutton/client-side-programming/togglebutton-object.md new file mode 100644 index 0000000000..b6ab55aa2e --- /dev/null +++ b/controls/togglebutton/client-side-programming/togglebutton-object.md @@ -0,0 +1,109 @@ +--- +title: ToggleButton Object +page_title: ToggleButton Object | RadToggleButton for ASP.NET AJAX Documentation +description: ToggleButton Object +slug: togglebutton/client-side-programming/togglebutton-object +tags: togglebutton,object +published: True +position: 1 +--- + +# ToggleButton Object + +The following table lists the most important members of the client-side RadToggleButton object: + +>caption Public Properties + +| Name | Description | +| ------ | ------ | +| **get_enabled** |Returns a value, indicating whether the button control is enabled.| +| **set_enabled** |Sets whether the button is enabled.| +| **get_text** |The text displayed in the RadToggleButton control.| +| **set_text** |Sets the text displayed in the RadToggleButton control.| +| **get_toolTip** |Gets the text displayed when the mouse pointer hovers over the RadToggleButton control.| +| **set_toolTip** |Sets the text displayed when the mouse pointer hovers over the RadToggleButton control.| +| **get_uniqueID** |Gets the unique, hierarchically qualified identifier for the RadToggleButton control.| +| **get_iconElement** |Gets a reference to the HTML element that holds the icon.| +| **get_textElement** |Gets a reference to the HTML element that holds the text of the RadToggleButton control.| +| **get_cssClass** |Gets the Cascading Style Sheet (CSS) class rendered by the RadToggleButton control on the client.| +| **get_disabledCssClass** |Gets the CSS class applied when the control is disabled.| +| **get_hoveredCssClass** |Gets the CSS class applied to the RadToggleButton control when the mouse pointer is over the control.| +| **get_pressedCssClass** |Gets the CSS class applied to the RadToggleButton control when the control is pressed.| +| **get_commandName** |Gets the command name associated with the RadToggleButton control that is passed to the Command event.| +| **set_commandName** |Sets the command name associated with the RadToggleButton control that is passed to the Command event.| +| **get_commandArgument** |Gets an optional parameter passed to the Command event along with the associated CommandName.| +| **set_commandArgument** |Sets an optional parameter passed to the Command event along with the associated CommandName| +| **get_autoPostBack** |Gets a bool value indicating whether the RadToggleButton control automatically posts back to the server when clicked.| +| **set_autoPostBack** |Sets or sets a bool value indicating whether the RadToggleButton control automatically posts back to the server when clicked.| +| **get_height** |Gets the height of the RadToggleButton control.| +| **get_width** |Gets the width of the RadToggleButton control.| +| **IsInputTypeSubmit** |Gets a bool value indicating whether the button is a submit button| +| **get_singleClick** |Gets a bool value indicating whether the RadToggleButton control will be immediately disabled after the user has clicks it.(i.e. enables/disables "Single Click" functionality)| +| **get_singleClickText** |Gets the text displayed in the RadToggleButton control after the button is being clicked and disabled. (i.e. the text used for the 'Single Click' functionality)| +| **enableAfterSingleClick** |Enables the button and restores the button's text, after it has been disabled by a single click.| +| **get_visible** |Gets a bool value indicating whether the button is visible.| +| **set_visible** |Shows/hides the button.| +| **get_validationGroup** |Gets the name of ValidationGroup to which RadToggleButton is assigned.| +| **set_validationGroup** |Sets the validation group to which RadToggleButton should be assigned.| +|**get_toggleStates**|Gets the collection of ButtonToggleState objects that belong to the RadToggleButton control| +|**set_toggleStates**|Sets the collection of ButtonToggleState objects that belong to the RadToggleButton control| +|**get_selectedToggleState**| Gets the currently selected ToggleState of the RadToggleButton control.| +|**set_selectedToggleState**| Sets the currently selected ToggleState of the RadToggleButton control.| +|**get_selectedToggleStateIndex**| Gets the index of the currently selected ToggleState of the RadToggleButton control.| +|**set_selectedToggleStateIndex**| Sets the index of the currently selected ToggleState of the RadToggleButton control.| + +>caption Public Methods + +| Name | Description | +| ------ | ------ | +| **focus** |Brings the focus to the RadToggleButton control.| +| **click** |Executes programmatic button click. Accepts an optional boolean parameter that specifies whether the client-side [clicking event]({%slug togglebutton/client-side-programming/events/onclientclicking%}) of RadToggleButton will be fired when the control is clicked programmatically. If the function is called without parameter, the clicking event will not be fired.| + +>caption Public Properties of **RadButtonToggleState** object. + +| Properties | Description | +| ------ | ------ | +| **get_index()** |Gets the 0-based index of the ToggleState object in the ToggleStates collection.| +| **get_text()** |Gets the text displayed in the ButtonToggleState control.| +| **get_cssClass()** |Gets the CSS class applied to the ButtonToggleState object.| +| **get_hoveredCssClass()** |Gets the CSS class applied to the ButtonToggleState object when the mouse pointer is over the control.| +| **get_pressedCssClass()** |Gets the CSS class applied to the ButtonToggleState object when the control is pressed.| +| **get_height()** |Gets the height of the ButtonToggleState object.| +| **get_width()** |Gets the width of the ButtonToggleState object.| +| **get_primaryIconCssClass()** |Gets the CSS class applied to the Icon.| +| **get_primaryIconUrl()** |Gets the URL to the image used as Icon.| +| **get_primaryHoveredIconUrl()** |Gets the URL to the image showed when the ButtonToggleState is hovered.| +| **get_primaryPressedIconUrl()** |Gets the URL to the image showed when the ButtonToggleState is pressed.| +| **get_primaryIconHeight()** |Gets the Height of the Icon.| +| **get_primaryIconWidth()** |Gets the Width of the Icon.| +| **get_primaryIconTop()** |Gets the top edge of the Icon, relative to the ButtonToggleState object's wrapper element.| +| **get_primaryIconLeft()** |Gets the left edge of the Icon, relative to the ButtonToggleState object's wrapper element.| +| **get_imageUrl()** |Gets the location of an image to display in the ButtonToggleState object.| +| **get_hoveredImageUrl()** |Gets the location of an image to display in the ButtonToggleState object, when the mouse pointer is over the control.| +| **get_pressedImageUrl()** |Gets the location of an image to display in the ButtonToggleState object, when the control is pressed.| + +>caption Methods for modifying client-side event handlers dynamically + +| Name | Description | +| ------ | ------ | +| **add_load** |The name of the javascript function called when the control loads.| +| **remove_load** |Removes a handler for the load event| +| **add_clicking** |The name of the javascript function called when the RadToggleButton control is clicked.| +| **remove_clicking** |Removes a handler for the clicking event.| +| **add_toggleStateChanging** |The name of the javascript function called before the state of the ToggleButton to change.| +| **remove_toggleStateChanging** |Removes a handler for the toggleStateChanging event.| +| **add_toggleStateChanged** |The name of the javascript function called when the state of the ToggleButton is changed.| +| **remove_toggleStateChanged** |Removes a handler for the toggleStateChanged event.| +| **add_clicked** |The name of the javascript function called when the RadToggleButton control is clicked.| +| **remove_clicked** |Removes a handler for the clicked event.| +| **add_mouseOver** |The name of the javascript function called when the mouse hovers over the control.| +| **remove_mouseOver** |Removes a handler for the mouseOver event.| +| **add_mouseOut** |The name of the javascript function when the mouse leaves the control.| +| **remove_mouseOut** |Removes a handler for the mouseOut event.| + +You can read more on the subject in the [Setting Client Event Handlers by Using JavaScript]({%slug togglebutton/client-side-programming/events/setting-event-handlers-via-javascript%}) help article. + +## See Also + + * [Client-side Programming Overview]({%slug togglebutton/client-side-programming/overview%}) + \ No newline at end of file diff --git a/controls/togglebutton/design-time.md b/controls/togglebutton/design-time.md new file mode 100644 index 0000000000..32c837d3fe --- /dev/null +++ b/controls/togglebutton/design-time.md @@ -0,0 +1,46 @@ +--- +title: Design Time +page_title: Design Time | RadToggleButton for ASP.NET AJAX Documentation +description: Design Time +slug: togglebutton/design-time +tags: design,time +published: True +position: 3 +--- + +# Design Time + +The Smart Tag of **RadToggleButton** (**Figure 1**) lets you configure your control or quickly get help. You can display the Smart Tag by right clicking on a **RadToggleButton** control and choosing "Show Smart Tag", or clicking the small rightward-pointing arrow located in the upper right corner of the control. + +>caption Figure 1: RadToggleButton's smart tag. + +![button-smart-tag](images/togglebutton-smart-tag.png) + +## Ajax Resources + +* **Add RadAjaxManager...** adds a **RadAjaxManager** component to your Web page. + +* **Add RadScriptManager** adds a **RadScriptManager** component to your Web page. + +* **Add RadStyleSheetManager** adds a **RadStyleSheetManager** component to your Web page. + +* **Add ScriptManager** adds a **ScriptManager** component to your Web page. + +## Skin + +The **Skin** drop-down displays a list of available [skins]({%slug togglebutton/appearance-and-styling/skins%}) that you can apply to your control, along with an example of what the **RadToggleButton** control looks like for each skin. Assign a skin by selecting the one you want from the list. + +## Learning Center + +* Links navigate you directly to examples, help, and code library. + +* You can navigate directly to the [Telerik Support Center](http://www.telerik.com/support/home.aspx). + +## See Also + + * [RadToggleButton Overview]({%slug togglebutton/overview%}) + + * [RadToggleButton Getting Started]({%slug togglebutton/getting-started%}) + + * [RadToggleButton Online Demos](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/overview/defaultcs.aspx) + diff --git a/controls/togglebutton/functionality/Icons/custom-icons.md b/controls/togglebutton/functionality/Icons/custom-icons.md new file mode 100644 index 0000000000..397080e5f2 --- /dev/null +++ b/controls/togglebutton/functionality/Icons/custom-icons.md @@ -0,0 +1,142 @@ +--- +title: Custom Icons +page_title: Custom Icons | RadToggleButton for ASP.NET AJAX Documentation +description: Custom Icons +slug: togglebutton/functionality/icons/custom-icons +tags: custom,icons +published: True +position: 1 +--- + +# Custom Icons + +This help article shows how to use custom icons (images or font icons) in **RadToggleButton**. + +* [Image Icons](#image-icons) + +* [Font Icons](#font-icons) + +## Image Icons + +To display an image icon on the button, you need to set the desired **ButtonToggleState**'s **Icon.Url** property to point to the URL of the desired image. + +>caption Figure 1: RadToggleButton with custom icon set through the **Icon.Url** property of each **ButtonToggleState**. + +![Icons](images/button-custom-icon-url.png) + +>caption Example 1: Configure a **RadToggleButton** with an icon through the **Icon.Url** property. + +````ASP.NET + + + + + + + + + + +```` + +### Hovered and Active States + +**RadToggleButton** also provides an easy way to show different icon when the mouse is over the control, or the button is pressed (see **Figure 2** and **Example 2**). To do this, use the **HoveredCssClass** and **PressedCssClass** properties exposed by the **Icon** tag of each toggle state. + +>caption Figure 2: A RadToggleButton can have different icons for its normal, hovered and active state. + +![RadToggleButton icons normal hovered pressed](images/button_icons_normal_hovered_pressed.png) + +**Example 2:** Setup unique icons for the normal, hovered and active state of a **RadToggleButton**. + +````ASP.NET + + + + + + + + + + +```` + +## Font Icons + +You can use custom font icons in **RadToggleButton** as well. To do that, follow the steps below: + +1. Load the stylesheet with the desired font icons on the page. + + **CSS** + + + +1. Override the font-family of the button's icon element with the target one (see **Example 3**). + + **CSS** + + button.RadButton .rbIcon:before { + font-family: myCustomFont; + } + +1. Set the custom font icon class to the **Icon.CssClass** property of the desired toggle state. + + **ASP.NET** + + + + + + + + + + + + +You can find below an example with [Font Awesome Icons](https://fortawesome.github.io/Font-Awesome/icons/). + +>caption Figure 3: RadToggleButton with Font Awesome icons. + +![Button Custon Icon CssClass](images/button-custom-icon-cssclass.png) + +**Example 3:** Using FontAwesome font icons in RadToggleButton. + +````CSS + + +```` + +````ASP.NET + + + + + + + + + + +```` + +You can also change the font-size and color of the font icon as described in the [Fine Tune]({%slug togglebutton/functionality/icons/fine-tune%}) help article. + +## See Also + + * [RadToggleButton Overview Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/overview/defaultcs.aspx) + + * [Font Awesome Icons](https://fortawesome.github.io/Font-Awesome/icons/) + + * [Icons Overview]({%slug togglebutton/functionality/icons/embedded-icons%}) + + * [Fine Tune Icons Position, Size and Color]({%slug togglebutton/functionality/icons/fine-tune%}) + + \ No newline at end of file diff --git a/controls/togglebutton/functionality/Icons/embedded-icons.md b/controls/togglebutton/functionality/Icons/embedded-icons.md new file mode 100644 index 0000000000..dfeaf80733 --- /dev/null +++ b/controls/togglebutton/functionality/Icons/embedded-icons.md @@ -0,0 +1,115 @@ +--- +title: Embedded Icons +page_title: Embedded Icons | RadToggleButton for ASP.NET AJAX Documentation +description: Embedded Icons +slug: togglebutton/functionality/icons/embedded-icons +tags: embedded,icons +published: True +position: 0 +--- + +# Embedded Icons + +This help article shows how to use embedded icons in **RadToggleButton**, lists the necessary CSS classes and describes the skins specifics. + +* [Configuration](#configuration) + +* [CssClass List of Embedded Icons](#cssclass-list-of-embedded-icons) + +* [Skins Specifics](#skins-specifics) + +>caption Figure 1: List of Embedded icons in RadToggleButton. + +![List of Embedded Icons in RadToggleButton](images/embedded-icons-list.png) + +You can also use [custom icons]({%slug togglebutton/functionality/icons/custom-icons%}) (image or font icons) and [fine-tune their position, color and size]({%slug togglebutton/functionality/icons/fine-tune%}). + +## Configuration + +To make the control easier to use, **Telerik** provides a large set of built-in icons (**Figure 1**). To use them, set the **Icon.CssClass** property of each **ButtonToggleState** (**Example 1**) to one of the predefined [CSS class names](#cssclass-list-of-embedded-icons), and the respective icon will be shown on the control. + +>caption Figure 2: RadToggleButton with an embedded icon (ButtonToggleState.Icon.CssClass="rbOk") from Example 1. + +![Button with Embedded Icon](images/button-embedded-icon.png) + +>caption Example 1: Declaration of embedded icons in RadToggleButton states. + +````ASP.NET + + + + + + + + + + +```` + +## CssClass List of Embedded Icons + +You can find below the full list of CSS classes responsible for the embedded icons in **RadToggleButton**. The **CssClass** is composed in the following way: [**r**]ad[**b**]utton[**IconName**]. For example **rbAdd**. + +| | | | | | +| ------ | ------ | ------ | ------ | ------ | +|rbAdd|rbPrevious|rbPrint|rbRSS|rbYouTube | +|rbRemove|rbNext|rbRefresh|rbMail|rbVimeo | +|rbOk|rbOpen|rbSearch|rbFB|rbBehance | +|rbCancel|rbAttach|rbHelp|rbTwitter|rbDribble | +|rbUpload|rbSave|rbCart|rbLinkedIn |rbGooglePlus| +|rbDownload|rbConfig|rbEdit|rbPinterest|| + + + +## Skins Specifics + +The color of the predefined icons can be white or black, depending on the chosen Skin. You can see the difference for the **Silk** and **Glow** skin in **Figure 3**. + +>caption Figure 3: Embedded icons in RadToggleButton for the Silk and Glow skin have white and black colors. + +![List of Embedded Icons in RadToggleButton](images/embedded-icons-list-black-white.png) + + + + +## See Also + + * [Fine-tune Icons]({%slug togglebutton/functionality/icons/fine-tune%}) + + * [Custom Icons]({%slug togglebutton/functionality/icons/custom-icons%}) + + * [RadToggleButton Overview Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/overview/defaultcs.aspx) + + \ No newline at end of file diff --git a/controls/togglebutton/functionality/Icons/examples/DefaultCS.aspx b/controls/togglebutton/functionality/Icons/examples/DefaultCS.aspx new file mode 100644 index 0000000000..43d2364a1d --- /dev/null +++ b/controls/togglebutton/functionality/Icons/examples/DefaultCS.aspx @@ -0,0 +1,41 @@ +<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DefaultCS" %> + + + + + + +<%-- --%> + + +
+ + + + + + + +
Class NameSilk + Glow
+
+ + diff --git a/controls/togglebutton/functionality/Icons/examples/DefaultCS.aspx.cs b/controls/togglebutton/functionality/Icons/examples/DefaultCS.aspx.cs new file mode 100644 index 0000000000..fbd89a5ee2 --- /dev/null +++ b/controls/togglebutton/functionality/Icons/examples/DefaultCS.aspx.cs @@ -0,0 +1,64 @@ +using System; +using System.Collections.Generic; +using System.Linq; +using System.Web; +using System.Web.UI; +using System.Web.UI.HtmlControls; +using System.Web.UI.WebControls; +using Telerik.Web.UI; + +public partial class DefaultCS : System.Web.UI.Page +{ + protected void Page_Init(object sender, EventArgs e) + { + string[] embeddedIcons = new string[] { "rbAdd", "rbRemove", "rbOk", "rbCancel", "rbUpload", "rbDownload", "rbPrevious", "rbNext", "rbOpen", "rbAttach", +"rbSave", "rbConfig", "rbPrint", "rbRefresh", "rbSearch", "rbHelp", "rbCart", "rbEdit", "rbRSS", "rbMail", "rbFB", "rbTwitter", "rbLinkedIn", "rbPinterest", +"rbYouTube", "rbVimeo", "rbBehance", "rbDribble", "rbGooglePlus"}; + + for (int i = 0; i < embeddedIcons.Length; i++) + { + string currIcon = embeddedIcons[i]; + + HtmlTableRow row1 = new HtmlTableRow(); + + //Add class name for icons: + AddRowIconClassName(currIcon, table1, row1); + + //Add RadToggleButton with icons, Default skin: + AddRadToggleButtonWithIcon("1" + i.ToString(), currIcon, "Silk", null, null, table1, row1); + + //Add RadToggleButton with icons, Glow skin: + AddRadToggleButtonWithIcon("2" + i.ToString(), currIcon, "Glow", null, null, table1, row1); + + } + } + + protected void AddRowIconClassName(string icon, HtmlTable table, HtmlTableRow row) + { + HtmlTableCell cell1 = new HtmlTableCell(); + cell1.InnerHtml = icon; + row.Cells.Add(cell1); + table.Rows.Add(row); + } + + protected void AddRadToggleButtonWithIcon(string ID, string IconName, string Skin, int? Height, int? Top, HtmlTable table, HtmlTableRow row) + { + HtmlTableCell cell = new HtmlTableCell(); + RadToggleButton RadToggleButton1 = new RadToggleButton() + { + ID = "RadToggleButton1" + ID, + Text = IconName, + Skin = Skin, + }; + if (Height != null) + RadToggleButton1.Height = Unit.Pixel((int)Height); + + RadToggleButton1.Icon.CssClass = IconName; + if (Top != null) + RadToggleButton1.Icon.Top = Unit.Pixel((int)Top); + + cell.Controls.Add(RadToggleButton1); + row.Cells.Add(cell); + table.Rows.Add(row); + } +} \ No newline at end of file diff --git a/controls/togglebutton/functionality/Icons/fine-tune.md b/controls/togglebutton/functionality/Icons/fine-tune.md new file mode 100644 index 0000000000..ab76300c12 --- /dev/null +++ b/controls/togglebutton/functionality/Icons/fine-tune.md @@ -0,0 +1,87 @@ +--- +title: Fine-tune +page_title: Fine-tune | RadToggleButton for ASP.NET AJAX Documentation +description: Fine-tune +slug: togglebutton/functionality/icons/fine-tune +tags: fine,tune +published: True +position: 2 +--- + +# Fine-tune Icons + +This help article shows how to modify the position, size and color of icons in **RadToggleButton**. + +* [Fine-tune Position](#fine-tune-position) + +* [Configure Font-size and Color](#configure-font-size-and-color) + +## Fine-tune Position + +You can change the position of font or image icons to match your concrete requirements. To do this, use the `Icon.Top` and `Icon.Left` properties to directly offset the icon in the particular toggle state (**Example 1**). + +>caption Figure 1: The icon in RadToggleButton can be offset from its original top and left position. See Example 1. + +![RadToggleButton Icon Top Left](images/button-icon-top-left.png) + +>caption Example 1: Offset RadToggleButton Icon from the top and left. You can see the result in Figure 1. + +````ASP.NET + + + + + + + + + + +```` + +## Configure Font-size and Color + +The embedded **RadToggleButton** icons are font icons. Using a font facilitates the customization of the icons. For example, you can change the icons color and font size with a single line of CSS (see **Figure 2** and **Example 2**). + +>caption Figure 2: Customize the font size and color of the embedded icons of RadToggleButton with CSS. + +![Button Icon Customized](images/button-icon-customized.png) + +>caption Example 2: Use CSS to modify the font size and color of the embedded icons in RadToggleButton. + +````CSS + +```` + +````ASP.NET + + + + + + + + + + +```` + +>tip This also applies for [custom font icons]({%slug togglebutton/functionality/icons/custom-icons%}#font-icons). + +## See Also + + * [Icons Overview]({%slug togglebutton/functionality/icons/embedded-icons%}) + + * [Custom Icons]({%slug togglebutton/functionality/icons/custom-icons%}) + + * [RadToggleButton Overview Demo](http://demos.telerik.com/aspnet-ajax/togglebutton/overview/defaultcs.aspx) + + + + + \ No newline at end of file diff --git a/controls/togglebutton/functionality/Icons/images/button-custom-icon-cssclass.png b/controls/togglebutton/functionality/Icons/images/button-custom-icon-cssclass.png new file mode 100644 index 0000000000..3d338aace3 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/button-custom-icon-cssclass.png differ diff --git a/controls/togglebutton/functionality/Icons/images/button-custom-icon-url.png b/controls/togglebutton/functionality/Icons/images/button-custom-icon-url.png new file mode 100644 index 0000000000..7cf129e4f8 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/button-custom-icon-url.png differ diff --git a/controls/togglebutton/functionality/Icons/images/button-embedded-icon.png b/controls/togglebutton/functionality/Icons/images/button-embedded-icon.png new file mode 100644 index 0000000000..4c093c8d23 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/button-embedded-icon.png differ diff --git a/controls/togglebutton/functionality/Icons/images/button-icon-customized.png b/controls/togglebutton/functionality/Icons/images/button-icon-customized.png new file mode 100644 index 0000000000..f8e2205f71 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/button-icon-customized.png differ diff --git a/controls/togglebutton/functionality/Icons/images/button-icon-top-left.png b/controls/togglebutton/functionality/Icons/images/button-icon-top-left.png new file mode 100644 index 0000000000..63660fee39 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/button-icon-top-left.png differ diff --git a/controls/togglebutton/functionality/Icons/images/button_icons_normal_hovered_pressed.png b/controls/togglebutton/functionality/Icons/images/button_icons_normal_hovered_pressed.png new file mode 100644 index 0000000000..6ae07ae150 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/button_icons_normal_hovered_pressed.png differ diff --git a/controls/togglebutton/functionality/Icons/images/embedded-icons-list-black-white.png b/controls/togglebutton/functionality/Icons/images/embedded-icons-list-black-white.png new file mode 100644 index 0000000000..aa69861d6f Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/embedded-icons-list-black-white.png differ diff --git a/controls/togglebutton/functionality/Icons/images/embedded-icons-list.png b/controls/togglebutton/functionality/Icons/images/embedded-icons-list.png new file mode 100644 index 0000000000..b94790a539 Binary files /dev/null and b/controls/togglebutton/functionality/Icons/images/embedded-icons-list.png differ diff --git a/controls/togglebutton/functionality/image.md b/controls/togglebutton/functionality/image.md new file mode 100644 index 0000000000..67e0c22c62 --- /dev/null +++ b/controls/togglebutton/functionality/image.md @@ -0,0 +1,75 @@ +--- +title: Image +page_title: Image | RadToggleButton for ASP.NET AJAX Documentation +description: Image +slug: togglebutton/functionality/image +tags: image +published: True +position: 1 +--- + +# Image + +This help article illustrates how to put an **image** in a toggle state of **RadToggleButton**. + +To define an image in **RadToggleButton** you should set the path to the image inside the **Image.Url** property of each toggle state (**Example 1**). You can also show text over the image by simply setting it in the **Text** property. + +You can control the image dimensions through the **Width** and **Height** properties which are exposed globally (the **RadToggleButton** object) as well as per each toggle state (the **ButtonToggleState** objects). + +>caption Figure 1: RadToggleButton with image. + +![RadToggleButton with image](images/toggle-button-image.png) + +>caption Example 1: Configure images inside toggle states of RadToggleButton. + +````ASP.NET + + + + + + + + + + + + + +```` + +>tip The Background-size of the image is controlled through the **Image.Sizing** property. + +>note If you add toggle states with and witout images, the RadToggleButton control will no longer be considered a button but a custom image. Thus, the borders and default backgrounds of the non-image toggle state will be lost and the appearance of the control will change. + +## Hovered, Active and Disabled States + +**RadToggleButton** also provides an easy way to show different images when the mouse is over the control, the button is pressed or disabled (see **Figure 2** and **Example 2**). To do this, use the **PressedUrl**, **HoveredUrl**, **DisabledUrl** properties exposed by the **Image** tag of each toggle state. + +>caption Figure 2: A RadToggleButton can have different images for its normal, hovered, active and disabled state. + +![RadToggleButton with image states](images/toggle-button-image-states.png) + +>caption Example 2: Setup unique images for the normal, hovered, active and disabled state of a RadToggleButton. + +````ASP.NET + + + + + + + + + + +```` + +## See Also + + * [Select State]({%slug togglebutton/functionality/select-state%}) + + * [Custom Icons]({%slug togglebutton/functionality/icons/custom-icons%}) + + * [Server-Side API]({%slug togglebutton/server-side-programming/properties-and-events%}) + diff --git a/controls/togglebutton/functionality/images/button-single-click.png b/controls/togglebutton/functionality/images/button-single-click.png new file mode 100644 index 0000000000..669708a793 Binary files /dev/null and b/controls/togglebutton/functionality/images/button-single-click.png differ diff --git a/controls/togglebutton/functionality/images/toggle-button-image-states.png b/controls/togglebutton/functionality/images/toggle-button-image-states.png new file mode 100644 index 0000000000..4a2956ca32 Binary files /dev/null and b/controls/togglebutton/functionality/images/toggle-button-image-states.png differ diff --git a/controls/togglebutton/functionality/images/toggle-button-image.png b/controls/togglebutton/functionality/images/toggle-button-image.png new file mode 100644 index 0000000000..4176e89cd1 Binary files /dev/null and b/controls/togglebutton/functionality/images/toggle-button-image.png differ diff --git a/controls/togglebutton/functionality/select-state.md b/controls/togglebutton/functionality/select-state.md new file mode 100644 index 0000000000..eadcd20cc4 --- /dev/null +++ b/controls/togglebutton/functionality/select-state.md @@ -0,0 +1,201 @@ +--- +title: Select State +page_title: Select State | RadToggleButton for ASP.NET AJAX Documentation +description: Select State +slug: togglebutton/functionality/select-state +tags: select,state +published: True +position: 0 +--- + +# Select State + +This help article showcases how to operate with the toggle states of **RadToggleButton** on the server-side/client-side. + +* [Select Toggle State Server-Side](#select-toggle-state-server-side) + +* [Get Selected Toggle State Server-Side](#get-selected-toggle-state-server-side) + +* [Select Toggle State Client-Side](#select-toggle-state-client-side) + +* [Get Selected Toggle State Client-Side](#get-selected-toggle-state-client-side) + +## Select Toggle State Server-Side + +To select a particular toggle state of **RadToggleButton** you should set the `Selected` property of the target toggle state to `true`. + +>caption Example 1: Select a ButtonToggleState from the markup. + +````ASP.NET + + + + + + + + + + +```` + +>caption Example 2: Select a ButtonToggleState from the code behind. + +````C# +protected void Page_Init(object sender, EventArgs e) +{ + RadToggleButton1.ToggleStates[1].Selected = true; +} +```` +````VB +Protected Sub Page_Init(sender As Object, e As EventArgs) + RadToggleButton1.ToggleStates(1).Selected = True +End Sub +```` + +For a data-bound scenario you can use the `SelectedToggleStateIndex` of the control (**Example 3**). + +>caption Example 3: Databind the selected state of RadToggleButton. + +````ASP.NET + + + + + + + + + + + + + + + + + + + + +```` +````C# +public void Page_Init(object sender, System.EventArgs e) +{ + if (!IsPostBack) + { + DataTable dt = new DataTable(); + dt.Columns.Add("SelectState", typeof(int)); + dt.Rows.Add(0); + dt.Rows.Add(1); + dt.Rows.Add(2); + RadGrid1.DataSource = dt; + } +} +```` +````VB +Public Sub Page_Init(sender As Object, e As System.EventArgs) + If Not IsPostBack Then + Dim dt As New DataTable() + dt.Columns.Add("SelectState", GetType(Integer)) + dt.Rows.Add(0) + dt.Rows.Add(1) + dt.Rows.Add(2) + RadGrid1.DataSource = dt + End If +End Sub +```` + +>warning `SelectedToggleStateIndex` property will not take effect if directly assigned with a value in the markup. The `SelectedToggleStateIndex` property takes effect only when set from the code behind or integrated in a data-bound scenario in the markup (**Example 3**). + +## Get Selected Toggle State Server-Side + +To get the selected toggle state and selected toggle state index you can use the `SelectedToggleState` and `SelectedToggleStateIndex` properties of the **RadToggleButton** control. + +>caption Example 4: Get `SelectedToggleState` and `SelectedToggleStateIndex` of **RadToggleButton** from the code behind. + +````ASP.NET + + + + + + + + + + +```` + +````C# +protected void Page_Load(object sender, EventArgs e) +{ + int selectedToggleStateIndex = RadToggleButton1.SelectedToggleStateIndex; + ButtonToggleState selectedToggleState = RadToggleButton1.SelectedToggleState; +} +```` +````VB +Protected Sub Page_Load(sender As Object, e As EventArgs) + Dim selectedToggleStateIndex As Integer = RadToggleButton1.SelectedToggleStateIndex + Dim selectedToggleState As ButtonToggleState = RadToggleButton1.SelectedToggleState +End Sub +```` + +The selected toggle state reference provides all its properties (e.g., `Value`, `Text`, `CommandName`) and inner tags (`Icon` and `Image`). + +>tip You can also get the `SelectedToggleState`, `SelectedToggleStateIndex` and the corresponding properties (e.g., `Value`, `Text`, `CommandName`, `CommandArgument`) of the selected toggle state from the arguments of the `OnToggleStateChanged` event (**Example 5**). + +>caption Example 5: Get `SelectedToggleState`, `SelectedToggleStateIndex`, `CommandName` and `CommandArgument` of the `ToggleButtonStateChangedEventArgs` event arguments. + + +````C# + protected void RadToggleButton1_ToggleStateChanged(object sender, Telerik.Web.UI.ToggleButtonStateChangedEventArgs e) + { + int selectedToggleStateIndex = e.SelectedToggleStateIndex; + ButtonToggleState selectedToggleState = e.SelectedToggleState; + string commandNameArgument = string.Format("CommandName: {0}, CommandArgument: {1}", e.CommandName, e.CommandArgument); + } +```` +````VB +Protected Sub RadToggleButton1_ToggleStateChanged(sender As Object, e As Telerik.Web.UI.ToggleButtonStateChangedEventArgs) + Dim selectedToggleStateIndex As Integer = e.SelectedToggleStateIndex + Dim selectedToggleState As ButtonToggleState = e.SelectedToggleState + Dim commandNameArgument As String = String.Format("CommandName: {0}, CommandArgument: {1}", e.CommandName, e.CommandArgument) +End Sub +```` + +## Select Toggle State Client-Side + +You can select a particular toggle state of **RadToggleButton** by passing the corresponding index in the `set_selectedToggleStateIndex()` method of the control. + +>caption Example 6: Select a toggle state on the client-side. + +````JavaScript +var toggleButton = $find("<%=RadToggleButton1.ClientID%>"); +toggleButton.set_selectedToggleStateIndex(0); +```` + + +## Get Selected Toggle State Client-Side + +You can obtain the toggle states, selected toggle state and selected toggle state index of **RadToggleButton** through the `get_toggleStates()`, `get_selectedToggleState()`, and `get_selectedToggleStateIndex()` methods. + +>caption Example 7: Reference toggle states, selected toggle state and selected toggle state index of **RadToggleButton** through its client-side API. + +````JavaScript +var toggleButton = $find("<%=RadToggleButton1.ClientID%>"); +var toggleStates = toggleButton.get_toggleStates(); +var selectedToggleState = toggleButton.get_selectedToggleState(); +var selectedToggleStateIndex = toggleButton.get_selectedToggleStateIndex(); +```` + + +## See Also + + * [Image]({%slug togglebutton/functionality/image%}) + + * [Custom Icons]({%slug togglebutton/functionality/icons/custom-icons%}) + + * [Server-Side API]({%slug togglebutton/server-side-programming/properties-and-events%}) + + * [Client-Side API]({%slug togglebutton/client-side-programming/overview%}) diff --git a/controls/togglebutton/functionality/single-click.md b/controls/togglebutton/functionality/single-click.md new file mode 100644 index 0000000000..0848cfcaee --- /dev/null +++ b/controls/togglebutton/functionality/single-click.md @@ -0,0 +1,64 @@ +--- +title: Single Click +page_title: Single Click | RadToggleButton for ASP.NET AJAX Documentation +description: Single Click +slug: togglebutton/functionality/single-click +tags: single,click +published: True +position: 2 +--- + +# Single Click + +The single click button (**Figure 1**) is used to avoid multiple postbacks to the server. This feature is useful in database and/or e-mail send scenarios when the developer should prevent submitting of identical content multiple times to the server. + +>caption Figure 1: RadToggleButton with SingeClick functionality before and after click. + +![button-single-click](images/button-single-click.png) + +The following properties should be used to enable the single click functionality: + +* **SingleClick** - determines whether the **RadToggleButton** control will be immediately disabled after the user clicks it. Set it to **true** to enable the single click functionality. + +* **SingleClickText** - determines the text displayed in the **RadToggleButton** control after the button is being clicked and disabled. The original text will be retrieved after the server request execution. The property takes a plain text string. + +>caption Example 1: The code that enables the single click functionality in **RadToggleButton** from **Figure 1**. + +````ASP.NET + + + + + + + + + + + + + + +```` + +````C# +protected void RadToggleButton1_ToggleStateChanged(object sender, Telerik.Web.UI.ToggleButtonStateChangedEventArgs e) +{ + if (Page.IsPostBack) System.Threading.Thread.Sleep(3000); + lblGreeting.Text = String.Format("Hello, {0}!", txtName.Text); +} +```` +````VB +Protected Sub RadToggleButton1_ToggleStateChanged(sender As Object, e As Telerik.Web.UI.ToggleButtonStateChangedEventArgs) Handles RadToggleButton1.ToggleStateChanged + If Page.IsPostBack Then + System.Threading.Thread.Sleep(3000) + End If + lblGreeting.Text = String.Format("Hello, {0}!", txtName.Text) +End Sub +```` + +The submitted text in processed on the server-side. Note that the method **System.Threading.Thread.Sleep** is used so that the disabled button can be examined after clicking it. + +## See Also + + * [Select State]({%slug togglebutton/functionality/select-state%}) diff --git a/controls/togglebutton/getting-started.md b/controls/togglebutton/getting-started.md new file mode 100644 index 0000000000..824aa9dd92 --- /dev/null +++ b/controls/togglebutton/getting-started.md @@ -0,0 +1,89 @@ +--- +title: Getting Started +page_title: Getting Started | RadToggleButton for ASP.NET AJAX Documentation +description: Getting Started +slug: togglebutton/getting-started +tags: getting,started +published: True +position: 2 +--- + +# Getting Started + +The following tutorial demonstrates how to set up a page with a **RadToggleButton** control and use its **OnToggleStateChanged** server event: + +1. In the default page of a new ASP.NET AJAX-enabled Web Application add a **RadToggleButton** control: + + **ASP.NET** + + + + +1. Add two states the user can switch between and set their `Text`, `Value` and `CommandArgument` properties so you can distinguish them on the server: + + **ASP.NET** + + + + + + + + + + +1. To hook to the **OnToggleStateChanged** server-side event of **RadToggleButton** add an attribute to the main control tag and add the method signature: + + **ASP.NET** + + + + + + + + + + + **C#** + + protected void RadToggleButton1_ToggleStateChanged(object sender, ToggleButtonStateChangedEventArgs e) + { + + } + + **VB** + + Protected Sub RadToggleButton1_ToggleStateChanged(ByVal sender As Object, ByVal e As ToggleButtonStateChangedEventArgs) + End Sub + +1. Add a Label control to write the information to: + + **ASP.NET** + + + +1. Use the **OnToggleStateChanged** event handler to write information about the current button state: + + **C#** + + protected void RadToggleButton1_ToggleStateChanged(object sender, ToggleButtonStateChangedEventArgs e) + { + string data = string.Format("current text: {0}, current value {1}, current command argument: {2}", + e.SelectedToggleState.Text, e.SelectedToggleState.Value, e.SelectedToggleState.CommandArgument); + Label1.Text = data; + } + + **VB** + + Protected Sub RadToggleButton1_ToggleStateChanged(sender As Object, e As ToggleButtonStateChangedEventArgs) + Dim data As String = String.Format("current text: {0}, current value {1}, current command argument: {2}", _ + e.SelectedToggleState.Text, e.SelectedToggleState.Value, e.SelectedToggleState.CommandArgument) + Label1.Text = data + End Sub + +## See Also + + * [Design Time]({%slug togglebutton/design-time%}) + + * [Properties and Events]({%slug togglebutton/server-side-programming/properties-and-events%}) diff --git a/controls/togglebutton/images/toggle-button-overview.png b/controls/togglebutton/images/toggle-button-overview.png new file mode 100644 index 0000000000..ae2880de94 Binary files /dev/null and b/controls/togglebutton/images/toggle-button-overview.png differ diff --git a/controls/togglebutton/images/togglebutton-smart-tag.png b/controls/togglebutton/images/togglebutton-smart-tag.png new file mode 100644 index 0000000000..43b9542e25 Binary files /dev/null and b/controls/togglebutton/images/togglebutton-smart-tag.png differ diff --git a/controls/togglebutton/mobile-support/elastic-design.md b/controls/togglebutton/mobile-support/elastic-design.md new file mode 100644 index 0000000000..122de33a58 --- /dev/null +++ b/controls/togglebutton/mobile-support/elastic-design.md @@ -0,0 +1,47 @@ +--- +title: Elastic Design +page_title: Elastic Design | RadToggleButton for ASP.NET AJAX Documentation +description: Elastic Design +slug: togglebutton/mobile-support/elastic-design +tags: elastic,design +published: True +position: 1 +--- + +# Elastic Design + +This article explains the **elastic design capabilities RadToggleButton offers**. **Example 1** shows the basic approach to scale the control by only changing its default font size. + +Generally, responsive design means that the page and its content are able to adapt to different screen resolutions without deteriorating the user experience. This often includes changing the font size and having [dimensions set in percent]({%slug togglebutton/mobile-support/fluid-design%}). + +>caption Figure 1: Comparison between appearance of a RadToggleButton with regular font size and with increased font size. + +![togglebutton-elastic-design](images/togglebutton-elastic-design.png) + +>caption Example 1: Shows how to increase the font size of a RadToggleButton in Figure 1. + +````CSS + +```` + +````ASP.NET + + + + + + +```` + +## See Also + + * [Mobile Support Overview]({%slug togglebutton/mobile-support/overview%}) + + * [Render Modes]({%slug togglebutton/mobile-support/render-modes%}) + + * [Fluid Design]({%slug togglebutton/mobile-support/fluid-design%}) + diff --git a/controls/togglebutton/mobile-support/fluid-design.md b/controls/togglebutton/mobile-support/fluid-design.md new file mode 100644 index 0000000000..42c294c381 --- /dev/null +++ b/controls/togglebutton/mobile-support/fluid-design.md @@ -0,0 +1,48 @@ +--- +title: Fluid Design +page_title: Fluid Design | RadToggleButton for ASP.NET AJAX Documentation +description: Fluid Design +slug: togglebutton/mobile-support/fluid-design +tags: fluid,design +published: True +position: 2 +--- + +# Fluid Design + +This article explains the **fluid design capabilities RadToggleButton offers**. **Example 1** shows how you can set button size in percent so it can resize with its parent element. + +Generally, responsive design means that the page and its content are able to adapt to different screen resolutions without deteriorating the user experience. This often includes [changing the font size]({%slug togglebutton/mobile-support/elastic-design%}) and having dimensions set in percent. + +>caption Figure 1: RadToggleButton set to 100% width and and 25% height. + +![togglebutton-fluid-design](images/togglebutton-fluid-design.png) + +>caption Example 1: Shows the markup that provides fluid design of the RadToggleButton in Figure 1. + +````ASP.NET + + +
+ + + + + + +
+```` + +## See Also + + * [Mobile Support Overview]({%slug togglebutton/mobile-support/overview%}) + + * [Render Modes]({%slug togglebutton/mobile-support/render-modes%}) + + * [Elastic Design]({%slug togglebutton/mobile-support/elastic-design%}) + diff --git a/controls/togglebutton/mobile-support/images/togglebutton-elastic-design.png b/controls/togglebutton/mobile-support/images/togglebutton-elastic-design.png new file mode 100644 index 0000000000..4cb0b39e70 Binary files /dev/null and b/controls/togglebutton/mobile-support/images/togglebutton-elastic-design.png differ diff --git a/controls/togglebutton/mobile-support/images/togglebutton-fluid-design.png b/controls/togglebutton/mobile-support/images/togglebutton-fluid-design.png new file mode 100644 index 0000000000..7bd0b8b8a3 Binary files /dev/null and b/controls/togglebutton/mobile-support/images/togglebutton-fluid-design.png differ diff --git a/controls/togglebutton/mobile-support/overview.md b/controls/togglebutton/mobile-support/overview.md new file mode 100644 index 0000000000..a95d796531 --- /dev/null +++ b/controls/togglebutton/mobile-support/overview.md @@ -0,0 +1,23 @@ +--- +title: Overview +page_title: Overview | RadToggleButton for ASP.NET AJAX Documentation +description: Overview +slug: togglebutton/mobile-support/overview +tags: overview +published: True +position: 0 +--- + +# Mobile Support Overview + +**RadToggleButton** for ASP.NET AJAX is a mobile friendly control that works on wide screens as well as on smaller screens. By design, the control has lightweight rendering that is based on the latest web technology (i.e., HTML5 and CSS3). + +To facilitate responsive web page design, **RadToggleButton** offers [Elastic design]({%slug togglebutton/mobile-support/elastic-design%}) and [Fluid design]({%slug togglebutton/mobile-support/fluid-design%}) features. + +## See Also + + * [Render Modes]({%slug togglebutton/mobile-support/render-modes%}) + + * [Elastic Design]({%slug togglebutton/mobile-support/elastic-design%}) + + * [Fluid Design]({%slug togglebutton/mobile-support/fluid-design%}) diff --git a/controls/togglebutton/mobile-support/render-modes.md b/controls/togglebutton/mobile-support/render-modes.md new file mode 100644 index 0000000000..3295fbf75d --- /dev/null +++ b/controls/togglebutton/mobile-support/render-modes.md @@ -0,0 +1,66 @@ +--- +title: Render Modes +page_title: Render Modes | RadToggleButton for ASP.NET AJAX Documentation +description: Render Modes +slug: togglebutton/mobile-support/render-modes +tags: render,modes +published: True +position: 3 +--- + +# Render Modes + +**RadToggleButton** supports only **Lightweight** render mode. Generally it is exposed via the **RenderMode** property that can have five possible values - **Classic**, **Lightweight**, **Native**, **Mobile** and **Auto**. + +The possible options are: + +* **Classic**, **Native**, **Mobile**—these modes are not supported. If you set them, the mode will fall back automatically to **Lightweight**. + +* **Lightweight**—this is the default mode and it emphasizes on semantic HTML and CSS3 which makes the control easy to customize (including custom skins creation). + +* **Auto**—this mode makes each control choose the appropriate rendering mode according to the used browser. + +>important **RadToggleButton**, as well as the other controls included in the Telerik UI for ASP.NET AJAX suite that utilize render modes, support only one type of render mode per page. All such controls must have the same **RenderMode** on a given page. This also includes instances from user controls and master pages. + + +## Setting Render Mode + +There are two ways to configure the rendering mode of the controls: + +* The **RenderMode property** in the markup or in the code-behind that can be used for a particular instance: + + **ASP.NET** + + + + + + + + + + **C#** + + RadToggleButton1.RenderMode = Telerik.Web.UI.RenderMode.Lightweight; + + **VB** + + RadToggleButton1.RenderMode = Telerik.Web.UI.RenderMode.Lightweight + + +* A **global setting in the web.config** file that will affect the entire application, unless a concrete value is specified for a given control instance: + + **web.config** + + + + + + +## See Also + + * [Mobile Support Overview]({%slug togglebutton/mobile-support/overview%}) + + * [Elastic Design]({%slug togglebutton/mobile-support/elastic-design%}) + + * [Fluid Design]({%slug togglebutton/mobile-support/fluid-design%}) diff --git a/controls/togglebutton/overview.md b/controls/togglebutton/overview.md new file mode 100644 index 0000000000..6d0d10cd36 --- /dev/null +++ b/controls/togglebutton/overview.md @@ -0,0 +1,49 @@ +--- +title: Overview +page_title: Overview | RadToggleButton for ASP.NET AJAX Documentation +description: Overview +slug: togglebutton/overview +tags: overview +published: True +position: 0 +--- + +# ToggleButton Overview + +**RadToggleButton** (**Figure 1**) lets you define several [states]({%slug togglebutton/functionality/select-state%}) the button will go through as the user clicks it. Additionally, it provides events, supports Commands, lets you [define icons]({%slug togglebutton/functionality/icons/embedded-icons%}) or [images]({%slug togglebutton/functionality/image%}) in those states, and has a [mechanism to prevent multiple postbacks]({%slug togglebutton/functionality/single-click%}). + +The control can be easily styled by changing the **[Skin]({%slug togglebutton/appearance-and-styling/skins%})** property, and by setting properties that change the look of the control like the **[Primary]({%slug togglebutton/appearance-and-styling/primary-action-button%})** property or any of the properties that control the icons/images in its states. + + + +>caption Figure 1: RadToggleButton with two states. + +![RadButton](images/toggle-button-overview.png) + +>caption Example 1: A basic example of different states in a RadToggleButton + +````ASP.NET + + + + + + + + + + +```` + +>note **RadToggleButton** does not support a Classic [render mode]({%slug togglebutton/mobile-support/render-modes%}). Setting its RenderMode to Classic will default to the Lightweight render mode. + +## See Also + + * [RadToggleButton Online Demos](http://demos.telerik.com/aspnet-ajax/togglebutton/examples/overview/defaultcs.aspx) + + * [RadToggleButton Getting Started]({%slug togglebutton/getting-started%}) + + * [RadToggleButton Select State]({%slug togglebutton/functionality/select-state%}) + + * [RadToggleButton Properties and Events]({%slug togglebutton/server-side-programming/properties-and-events%}) + \ No newline at end of file diff --git a/controls/togglebutton/server-side-programming/properties-and-events.md b/controls/togglebutton/server-side-programming/properties-and-events.md new file mode 100644 index 0000000000..bcd0ebfb1e --- /dev/null +++ b/controls/togglebutton/server-side-programming/properties-and-events.md @@ -0,0 +1,99 @@ +--- +title: Properties and Events +page_title: Properties and Events | RadToggleButton for ASP.NET AJAX Documentation +description: Properties and Events +slug: togglebutton/server-side-programming/properties-and-events +tags: properties,and,events +published: True +position: 0 +--- + +# Properties and Events + +## RadToggleButton common features (properties) + +| Property | Description | +| ------ | ------ | +| **AutoPostBack** |Gets or sets a bool value indicating whether the control will automatically post the page back to the server.| +| **CausesValidation** |Gets or sets a bool value indicating whether validation is performed when the RadToggleButton is clicked.| +| **PostbackUrl** |Gets or sets the URL of the page to post to from the current page, when the RadToggleButton is clicked.| +| **Primary** |Gets or sets a bool value indicating whether the button uses its primary appearance.| +| **Text** |Gets or sets the text displayed in the RadToggleButton control.| +| **ValidationGroup** |Gets or sets the group of controls for which the RadToggleButton control causes validation when it posts back to the server.| +| **CommandName** |Gets or sets the command name associated with the RadToggleButton control that is passed to the *Command* event.| +| **CommandArgument** |Gets or sets an optional parameter passed to the *Command* event along with the associated CommandName.| +| **CssClass** | Define the CSS class for the RadToggleButton.| +| **HoveredCssClass** |Gets or sets the CSS class, when the mouse pointer is hovered over the RadToggleButton control.| +| **PressedCssClass** |Gets or sets the CSS class, when the RadToggleButton control is pressed.| +| **OnClientLoad** |Sets a name of a JavaScript function that will be called when the RadToggleButton is loaded on the page| +| **OnClientClicking** |Sets a name of a JavaScript function that will be called when the RadToggleButton is clicked. The event is cancelable.| +| **OnClientClicked** |Sets a name of a JavaScript function that will be called when the RadToggleButton is clicked, after the OnClientClicking event.| +| **OnClientMouseOver** |Sets a name of a JavaScript function that will be called when the mouse pointer hovers over the RadToggleButton| +| **OnClientMouseOut** |Sets a name of a JavaScript function that will be called when the mouse pointer leaves the RadToggleButton| +| **OnClientToggleStateChanging** |Sets a name of a JavaScript function that will be called prior to the RadToggleButton state change. The event is cancelable.| +| **OnClientToggleStateChanged** |Sets a name of a JavaScript function that will be called when the RadToggleButton state is changed, after the OnClientToggleStateChanging event.| +| **UseSubmitBehavior** |Gets or sets a bool value indicating whether the RadToggleButton control uses the client browser's submit mechanism or the ASP.NET postback mechanism.| +| **Value** | Value associated with the button.| +| **Width** | Sets the Width of the button.| +| **Height** | Get/Set the height of the button.| +| **SelectedToggleSate** | Gets or sets the current state of the Button.| +| **SelectedToggleSateIndex** | Gets or sets the index of the currently selected ToggleState of the Button control, when used as a custom toggle button.| +| **ToggleSates** | Collection of type **ButtonToggleState**. | + +## ButtonToggleState specific features (properties) + +| Property | Description | +| ------ | ------ | +| **Text** |Gets or sets the text displayed in the ButtonToggleState.| +| **Value** | Value associated with the button.| +| **Selected** | Gets or sets a bool value indicating whether the ToggleState is selected or not.| +| **CssClass** | Define the CSS class for the ButtonToggleState.| +| **HoveredCssClass** |Gets or sets the CSS class, when the mouse pointer is hovered over the ButtonToggleState control.| +| **PressedCssClass** |Gets or sets the CSS class, when the ButtonToggleState control is pressed.| +| **Width** | Sets the Width of the ButtonToggleState.| +| **Height** | Get/Set the height of the ButtonToggleState.| +| **CommandName** |Gets or sets the command name associated with the RadToggleButton control that is passed to the *Command* event.| +| **CommandArgument** |Gets or sets an optional parameter passed to the *Command* event along with the associated CommandName.| + + +### Icon specific features (properties) + +| Property | Description | +| ------ | ------ | +| **Url** |Gets or sets the URL to the image used as icon.| +| **HoveredUrl** |Gets or sets the URL to the image showed when the icon is hovered.| +| **PressedUrl** |Gets or sets the URL to the image showed when the icon is pressed.| +| **Height** |Gets or sets the Height of the icon.| +| **Width** |Gets or sets the Width of the icon.| +| **CssClass** |Gets or sets the CSS class applied to the icon.| +| **HoveredCssClass** | Gets or sets the CSS class applied to the Button control when the mouse pointer is over the control.| +| **PressedCssClass** | Define the CSS class of the icon element, when the button is pressed.| +| **Top** |Gets or sets the top edge of the icon, relative to the RadToggleButton control's wrapper element.| +| **Left** |Gets or sets the left edge of the icon, relative to the RadToggleButton control's wrapper element.| + +### Image specific features (properties) + +| Property | Description | +| ------ | ------ | +| **Url** |Specifies the path to the image.| +| **DisabledUrl** |Specifies the path to the image when the button is disabled.| +| **HoveredUrl** |Specifies the path to the image when the mouse is over the button.| +| **PressedUrl** |Specifies the path to the image of a pressed button.| +| **Sizing** |Specifies the way the image is sized in the button. Available values are: **Original** and **Stretch**.| + +## Server - side Events: + +| Property | Description | +| ------ | ------ | +| **OnClick** |Raised when the RadToggleButton performs a postback.| +| **OnCommand** |Raised when the RadToggleButton performs a postback.| +| **OnToggleStateChanged** |Raised when the state of the RadToggleButton has changed.| + +The event order is: + +1. OnToggleStateChanged + +1. OnClick + +1. OnCommand + diff --git a/controls/togglebutton/troubleshooting/common-issues.md b/controls/togglebutton/troubleshooting/common-issues.md new file mode 100644 index 0000000000..8f9e2778a0 --- /dev/null +++ b/controls/togglebutton/troubleshooting/common-issues.md @@ -0,0 +1,20 @@ +--- +title: Common Issues +page_title: Common Issues | RadToggleButton for ASP.NET AJAX Documentation +description: Common Issues +slug: togglebutton/troubleshooting/common-issues +tags: common,issues +published: True +position: 0 +--- + +# Common Issues + +This help article lists the most common issues one can face when using the **RadToggleButton** control and offers possible solutions for them. + +* [Client-side Click Event Handler Is Not Executed]({%slug button/troubleshooting/client-side-click-event-handler-is-not-executed%}) + +* [Event Handlers Are Not Raised]({%slug button/troubleshooting/event-handlers-are-not-raised%}) + +* [RadButton Not Performing Postback]({%slug button/troubleshooting/radbutton-not-performing-postback%}) + diff --git a/mobile-support/render-modes.md b/mobile-support/render-modes.md index 727e14674b..e5f6eb313c 100644 --- a/mobile-support/render-modes.md +++ b/mobile-support/render-modes.md @@ -72,6 +72,7 @@ Some controls from the UI for ASP.NET AJAX suite can produce different (usually |TileList|[Yes (by design)]({%slug tilelist/mobile-support/render-modes%})|-| |ToolBar|-|-| |ToolTip|[Yes(render mode)]({%slug tooltip/mobile-support/render-modes%})|-| +|ToggleButton|[Yes(render mode)]({%slug togglebutton/mobile-support/render-modes%})|-| |TreeList|Yes (render mode)|-| |TreeMap|Yes (by design)|-| |TreeView|Yes (render mode)|-| diff --git a/mobile-support/responsive,-adaptive-and-elastic-capabilities.md b/mobile-support/responsive,-adaptive-and-elastic-capabilities.md index 5b4afa2b5c..ee7e73c33f 100644 --- a/mobile-support/responsive,-adaptive-and-elastic-capabilities.md +++ b/mobile-support/responsive,-adaptive-and-elastic-capabilities.md @@ -108,6 +108,7 @@ A control can hardly be considered responsive by itself, because this heavily de |TileList|[Yes]({%slug tilelist/mobile-support/elastic-capabilities%})|[Yes]({%slug tilelist/mobile-support/responsive-capabilities%})|[Yes]({%slug tilelist/mobile-support/responsive-capabilities%})|[Yes]({%slug tilelist/mobile-support/responsive-capabilities%})| |ToolBar|No|Yes|No|N/A| |ToolTip|[Yes]({%slug tooltip/mobile-support/responsive,-adaptive-and-elastic-capabilities%})|N/A|[Yes]({%slug tooltip/mobile-support/responsive,-adaptive-and-elastic-capabilities%})|N/A| +|ToggleButton|[Yes]({%slug togglebutton/mobile-support/elastic-design%})|[Yes]({%slug togglebutton/mobile-support/fluid-design%})|N/A|N/A| |TreeMap|Yes|Yes|No|No| |TreeList|Yes|Yes|No|No| |TreeView|Yes|No|N/A|N/A|