Apply Skin to Checkboxes

[Josh]

Hello,

I am using a RadListBox with Checkboxes="true." I was wondering if it is possible to skin the checkboxes to the same skin as the listbox. I have a RadFormDecorator on the page which styles the regular asp checkboxes but the ones in the listbox remain un-styled. Currently using Q2 2011.

Thanks

[Richard]

Josh:

It appears that you can set a skin to the text that is displayed alongside the checkbox in the RadListBox. This is done by setting the
SkinID="Black" property at design time.

I did not find a way to set a skin for the checkbox itself.

Default.aspx:

<telerik:RadListBox ID="RadListBox1" runat="server" Skin="Black" CheckBoxes="true" Width="200px"
    Height="300px">
    <items>
                <telerik:RadListBoxItem SkinID="Black" Text="Arts" />
                <telerik:RadListBoxItem SkinID="Black" Text="Biographies" />
                <telerik:RadListBoxItem SkinID="Black" Text="Children's Books" />
                <telerik:RadListBoxItem SkinID="Black" Text="Computers � Internet" />
                <telerik:RadListBoxItem SkinID="Black" Text="Cooking" />
                <telerik:RadListBoxItem SkinID="Black" Text="History" />
                <telerik:RadListBoxItem SkinID="Black" Text="Fiction" />
                <telerik:RadListBoxItem SkinID="Black" Text="Mystery" />
                <telerik:RadListBoxItem SkinID="Black" Text="Nonfiction" />
                <telerik:RadListBoxItem SkinID="Black" Text="Romance" />
                <telerik:RadListBoxItem SkinID="Black" Text="Science Fiction " />
                <telerik:RadListBoxItem SkinID="Black" Text="Travel" />
            </items>
</telerik:RadListBox>

 
But, you can also fine tune the display of the checkbox and the text by applying CSS, as follows:

    <style type="text/css">
    .rlbText
    {
        background-color: #000000 !important;
    }
    .rlbCheck
    {
        border-style:solid;
        border-color: Red !important;
    }

</style>

You can reference the classes of the RadListBox on the CSS Skin File Selector documentation page.

Hope this helps!

[Francis]

Hi!

I'm using RadListBox and can't get the Web20 Skin to apply on my Checkboxes.
Items are dynamically added at runtime.
               

<telerik:RadListBox ID="lstObjCMC" runat="server"  Skin="Web20"
EmptyMessage="Aucun objectif spécifié" Width="90%">
</telerik:RadListBox>

lstObjCMC.Items.Add(new RadListBoxItem
{
    Value = o.idObjectif.ToString(),
    Text = o.noObjectif + " - "+o.objectif_t,
    ToolTip = o.objectif_t,
    Checked = checkedObjectifs.Contains(o.idObjectif),
    SkinID="Web20"
});

Also tried with the css solution but still no result.
Any idea?

[Ivan Zhekov]

Hello, Francis.

The RadFormDecorator can not decorate the inbuilt checkboxes of the listbox and that's per design.

Yet, the idea is worth looking into and we'll see what we can do to achieve it.

On your question:
-- you could use checkboxes as templates and that will enable the RFD to skin them
-- you could use a custom solution, say by wrapping the checkboxes in SPAN element, then hiding the chekbox (visibility: hidden) and then dispplaying a background image on the span element depending on the checked state of the combo.

Greetings,
Ivan Zhekov
the Telerik team