This is a migrated thread and some comments may be shown as answers.

Apply Skin to Checkboxes

3 Answers 74 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Josh
Top achievements
Rank 1
Josh asked on 14 Jan 2012, 11:44 PM
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

3 Answers, 1 is accepted

Sort by
0
Richard
Top achievements
Rank 1
answered on 17 Jan 2012, 05:56 PM
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!
0
Francis
Top achievements
Rank 2
answered on 25 Jul 2012, 06:37 PM
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?
0
Ivan Zhekov
Telerik team
answered on 30 Jul 2012, 09:30 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
ListBox
Asked by
Josh
Top achievements
Rank 1
Answers by
Richard
Top achievements
Rank 1
Francis
Top achievements
Rank 2
Ivan Zhekov
Telerik team
Share this question
or