radio with custom image

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: 01 Jun 2016 14:18 by abigail

abigail

Created on: 11 Feb 2016 04:06

Category: UI for ASP.NET AJAX

Type: Feature Request

radio with custom image

Hi! could you consider implemnet a custom radio button that for the selected shows and image instead of the default circle for the radio button and that include a access key to select the option. That can bind a datasource an configure columns for show the radio options in the image for example can bind a databound for the answers and configure that shows by 2 columns and the image for the radio selected and maybe you can configure if the image is in the left, right, top or bottom

3 comments

abigail

Posted on: 01 Jun 2016 14:18

Hi! I know that is possible with css but I was wondering include a image a property of the radio button for doesn't add the css manually, the advantages or components is save time for develop, with a css a simple html radio button I get the same behavior, so I don't find any advantage for use the telerik radiobutton

ADMIN

Danail Vasilev

Posted on: 01 Jun 2016 14:05

Hi Abigail,
You can add a particular CssClass to the RadButton that is configured as a radio button and then override the current image. For example the code below renders like this - http://screencast.com/t/TeortvqN3bWC
CSS:
	<style>
		.myCustomBtn.RadButton .rbToggleRadio,
		.myCustomBtn.RadButton.rbHovered .rbToggleRadio {
			background-image: url('http://demos.telerik.com/aspnet-ajax/button/examples/customicons/images/ePlayer.png');
		}

		.myCustomBtn.RadButton .rbToggleRadioChecked {
			background-image: url('http://demos.telerik.com/aspnet-ajax/button/examples/customicons/images/eFlash.png');
		}

		.RadButton.myCustomBtn .rbToggleRadioChecked,
		.RadButton.myCustomBtn:hover .rbToggleRadioChecked,
		.RadButton.myCustomBtn .rbToggleRadio,
		.RadButton.myCustomBtn:hover .rbToggleRadio {
			background-position: initial;
		}
	</style>
ASPX:
		<telerik:RadButton ID="RadButton1" runat="server" ButtonType="ToggleButton" ToggleType="Radio" GroupName="g1" Checked="true" RenderMode="Classic" CssClass="myCustomBtn">
			<ToggleStates>
				<telerik:RadButtonToggleState Text="Checked" Selected="true" />
				<telerik:RadButtonToggleState Text="UnChecked" />
			</ToggleStates>
		</telerik:RadButton>
		<telerik:RadButton ID="RadButton2" runat="server" ButtonType="ToggleButton" ToggleType="Radio" GroupName="g1" RenderMode="Classic" CssClass="myCustomBtn">
			<ToggleStates>
				<telerik:RadButtonToggleState Text="Checked" />
				<telerik:RadButtonToggleState Text="UnChecked" />
			</ToggleStates>
		</telerik:RadButton>

Regarding the data-bound control we are currently working on implementing RadioButtonList control. I will provide the feedback regarding having CssClass data bound property in the control to our development team.

abigail

Posted on: 11 Feb 2016 04:07

I forgot the image, this is the image

Attached Files:

radio.png