RadListBox internal button css classes

[Kumar]

Hi,

I am using RadListBox in one of my project.I just want to set my own css classes to the buttons(To left,To right,All right,All Left)buttons
i didn't find any properties to set these css classes and i dnt want to use default skins/classes provided by telerik
Can you please suggest some thing on this

Regards
Kumar

[Bozhidar]

Hi Kishore,

There aren't any methods for setting classes to the transfer buttons. However you can use jQuery to achieve the same thing. Here is an example on how to add a class CustomClass to the "To Right" button:

$telerik.$("[class*='rlbTransferFrom']").addClass("CustomClass");

Here is a list of all the buttons and their individual classes:
rlbMoveUp, rlbMoveDown, rlbDelete, rlbTransferFrom, rlbTransferTo, rlbTransferAllFrom, rlbTransferAllTo 
 
Note that you have to use the *= construct when you match the classes, because when the button is disabled, the class changes (for instance from rlbMoveUp it changes to rlbMoveUpDisabled)

Greetings,
Bozhidar
the Telerik team

[Kumar]

Hi,

Thanks for your reply,
i just tried with the solution you have given it is not working ,
Only corner of the buttons are got changes according to the css class background color property,
But the center of the button still in default style.
If possible can you please provide some example?

regards
Kishore

[Bozhidar]

Hi Kishore,

This is due to the fact that the buttons have an inner structure consisting of several span tags. To get rid of this structure and leave only the shell of the button, you can use the following statement, which you can put in the handler for the OnClientLoad event:

function clientLoad(sender) {
    $telerik.$('.rlbButton').html('');
    $telerik.$('.rlbButton').css('background-color', 'Black');
}

 
Kind regards,
Bozhidar
the Telerik team

[Umasankar]

Hi,

I have requirement to use the list box, but in the demo, you have provided with external confiuguation,

(https://demos.telerik.com/aspnet-ajax/listbox/examples/overview/defaultcs.aspx)

I want that should be part of Radlist box propertry in side the aspx), i dont want to let the user to select Allow Transfer ,Transfer Mode and all. Could you please give me some sample code with data from database to be binded with Radlist box.

 

Thanks in advance

[Doncho]

Hi Umasankar,

The options in the configurator in our Overview demo are directly related to the properties exposed by the RadListBox. Having that in mind you can achieve the desired configuration by setting the desired properties in the markup declaration.

For example:

<telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBoxSource" Height="200px" Width="230px"
    TransferToID="RadListBoxDestination" ButtonSettings-AreaWidth="35px"
    AllowTransfer="true"
    AllowDelete="true"
    AllowReorder="true"
    TransferMode="Move"
    AllowTransferDuplicates="false"
    SelectionMode="Single">
    <Items>
        <telerik:RadListBoxItem Text="Argentina"></telerik:RadListBoxItem>
        <telerik:RadListBoxItem Text="Australia"></telerik:RadListBoxItem>
        <telerik:RadListBoxItem Text="Brazil"></telerik:RadListBoxItem>
        <telerik:RadListBoxItem Text="Canada"></telerik:RadListBoxItem>
        <telerik:RadListBoxItem Text="Chile"></telerik:RadListBoxItem>
        <telerik:RadListBoxItem Text="China"></telerik:RadListBoxItem>
        <telerik:RadListBoxItem Text="Egypt"></telerik:RadListBoxItem>
    </Items>
</telerik:RadListBox>
<telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBoxDestination" Height="200px" Width="230px"
        ButtonSettings-AreaWidth="35px" >
</telerik:RadListBox>

Examples with binding database data to RadListBox you can find in the Declarative DataSources and Database Update demos.

Please let me know if you have any further questions.

Kind regards,
Doncho
Progress Telerik