radbutton primaryiconurl fail

[Baris]

hi I have code like that


                    <telerik:RadButton ID="RadButton3" runat="server" GroupName="OverSampling"
                                           Text="" ButtonType="ToggleButton" ToggleType="Radio" Checked="false" AutoPostBack="false" >
                            <ToggleStates>
                                <telerik:RadButtonToggleState Text="Yes"  SecondaryIconUrl="images/radio6-on.png" />
                                <telerik:RadButtonToggleState Text="Yes" SecondaryIconUrl="images/radio6-off.png" />
                            </ToggleStates>
                        </telerik:RadButton>

                        <telerik:RadButton ID="RadButton4" runat="server" GroupName="OverSampling"
                                           Text="No" ButtonType="ToggleButton" ToggleType="Radio" AutoPostBack="false" >
                            <ToggleStates>
                                <telerik:RadButtonToggleState PrimaryIconUrl="images/radio6-on.png" />
                                <telerik:RadButtonToggleState PrimaryIconUrl="images/radio6-off.png" />
                            </ToggleStates>
                        </telerik:RadButton>

If I use PrimaryIconUrl, page doesn't show in my page. But if I use SecondaryIconUrl page show icon but right side. I want put icon left side of text but PrimaryIconUrl doesn't work. No image shown if I use PrimaryIconUrl.

How can I fix it?

[Danail Vasilev]

Hi Baris,

RadButton configured as toggle radio/checkbox button has already predefined icons for its radio/check icons. What I can suggest in order to have custom icons is to:

• Set ButtonType="ToggleButton" for both buttons.
• Remove the background image for the standard buttons configured as toggle buttons.

For example:
CSS:

<style>
    .RadButton_Default.rbSkinnedButton,
    .RadButton_Default .rbDecorated,
    .RadButton_Default.rbVerticalButton,
    .RadButton_Default.rbVerticalButton .rbDecorated,
    .RadButton_Default .rbSplitRight,
    .RadButton_Default .rbSplitLeft {
        background-image: none !important;
    }
</style>

ASPX:

<telerik:RadButton ID="RadButton3" runat="server" GroupName="OverSampling"
    Text="" ButtonType="StandardButton" ToggleType="Radio" Checked="false" AutoPostBack="false">
    <ToggleStates>
        <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-on.png" Selected="true" />
        <telerik:RadButtonToggleState Text="Yes" PrimaryIconUrl="radio6-off.png" />
    </ToggleStates>
</telerik:RadButton>

<telerik:RadButton ID="RadButton4" runat="server" GroupName="OverSampling"
    Text="No" ButtonType="StandardButton" ToggleType="Radio" AutoPostBack="false" Checked="true">
    <ToggleStates>
        <telerik:RadButtonToggleState PrimaryIconUrl="radio6-on.png" Selected="true" />
        <telerik:RadButtonToggleState PrimaryIconUrl="radio6-off.png" />
    </ToggleStates>
</telerik:RadButton>

I have also attached a full VS example that illustrates that.

Regards,
Danail Vasilev
Telerik

[Baris]

Great answer. Thank you. But I think it is a kind of bug. And needs maintanence

[Danail Vasilev]

Hello Baris,

Thank you for your remark.

I have logged this issue in our feedback portal here, so that you can monitor its progress, comment and vote on it.

I have also updated your Telerik points for reporting this issue to us.

Regards,
Danail Vasilev
Telerik