Switch Button

Progress® Telerik® UI for ASP.NET AJAX Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Completed

Last Updated: 31 May 2021 15:16 by ADMIN

ADMIN

Rumen

Created on: 25 Mar 2015 14:23

Category: UI for ASP.NET AJAX

Type: Feature Request

Switch Button

You can give your vote if you want to have a switch button in the Telerik UI for ASP.NET AJAX suite. See the attachment for more information.

Attached Files:

switch-button.png

3 comments

ADMIN

Danail Vasilev

Posted on: 17 Jun 2015 13:23

Hi Guys,

This can be done by overriding RadFormDecorator styles for the radio button like that:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
	<title></title>
	<style>
		html.RadForm_Default .rfdRadioUnchecked,
		html.RadForm_Default .rfdRadioChecked,
		html.RadForm_Default .rfdInputDisabled.rfdRadioUnchecked,
		html.RadForm_Default .rfdInputDisabled.rfdRadioChecked,
		html.RadForm_Default.rfdRadio input[type="radio"],
		html.RadForm_Default.rfdRadio input[type="radio"][disabled="disabled"]:hover {
			background-image: url("http://feedback.telerik.com/AttachmentStreaming/17734");
			height: 28px;
			width: 47px;
		}

		@media screen and (-webkit-min-device-pixel-ratio: 0) {
			html.RadForm_Default.rfdRadio input[type="radio"],
			html.RadForm_Default.rfdRadio input[type="radio"][disabled="disabled"]:hover {
				width: 66px;
			}
		}

		html.RadForm .rfdRadioChecked,
		html.RadForm.rfdRadio input[type="radio"]:checked {
			background-position: -5px -3px;
		}

			html.RadForm .rfdRadioChecked:hover,
			html.RadForm.rfdRadio input[type="radio"]:hover:checked {
				background-position: -5px -3px;
				opacity: 0.9;
			}

			html.RadForm .rfdRadioChecked.rfdInputDisabled,
			html.RadForm .rfdRadioChecked.rfdInputDisabled:hover,
			html.RadForm.rfdRadio input[type="radio"][disabled]:checked,
			html.RadForm.rfdRadio input[type="radio"][disabled]:checked:hover {
				background-position: -5px -3px;
				opacity: 0.3;
			}

		html.RadForm .rfdRadioUnchecked,
		html.RadForm.rfdRadio input[type="radio"] {
			background-position: -90px -3px;
		}

			html.RadForm .rfdRadioUnchecked:hover,
			html.RadForm.rfdRadio input[type="radio"]:hover {
				background-position: -90px -3px;
				opacity: 0.9;
			}

			html.RadForm .rfdRadioUnchecked.rfdInputDisabled,
			html.RadForm .rfdRadioUnchecked.rfdInputDisabled:hover,
			html.RadForm.rfdRadio input[type="radio"][disabled],
			html.RadForm.rfdRadio input[type="radio"][disabled]:hover {
				background-position: -90px -3px;
				opacity: 0.3;
			}
	</style>
</head>
<body>
	<form id="form1" runat="server">
		<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
		<telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All" />
		<asp:RadioButton ID="Radiobutton1" runat="server" GroupName="group1" Checked="true" />
		<asp:RadioButton ID="Radiobutton2" runat="server" GroupName="group1" />
	</form>
</body>
</html>

I have used the current sprite image for the switch button but you can use another one and just override the position.

ADMIN

Rumen

Posted on: 17 Jun 2015 08:15

Hi Hugo,

We will definitely have in mind your nice feedback before we decide to work on this task!

Best regards,
Rumen

Hugo Augusto

Posted on: 17 Jun 2015 02:46

Sure but is it really necessary to have a new control? Why not improve Form Decorator Control and provide a Switch mode for checkboxes and radio buttons?