Styling items

2 posts, 1 answers
  1. Dona
    Dona avatar
    23 posts
    Member since:
    Apr 2013

    Posted 09 Apr 2013 Link to this post

    Hi

    How to set the font as well as selected item background color from javascript?

    Thanks,
    Dona
  2. Answer
    Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 10 Apr 2013 Link to this post

    Hi,

    Please have a look at the following code.

    ASPX:
    <telerik:RadListBox ID="RadListBox" runat="server" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged"
        SelectionMode="Single">
        <Items>
            <telerik:RadListBoxItem runat="server" Text="Item1" />
            <telerik:RadListBoxItem runat="server" Text="Item2" />
            <telerik:RadListBoxItem runat="server" Text="Item3" />
            <telerik:RadListBoxItem runat="server" Text="Item4" />
        </Items>
    </telerik:RadListBox>

    JavaScript:
    <script type="text/javascript">
        function OnClientSelectedIndexChanged(sender, args) {
            var items = sender.get_items();
            for (var i = 0; i < items.get_count(); i++) {
                if (sender.getItem(i).get_selected() == true) {
                    sender.getItem(i)._textElement.style.fontFamily = "Arial Black";
                }
                else {
                    sender.getItem(i)._textElement.style.fontFamily = "Segoe UI";
                }
            }
        }
    </script>

    CSS:
    <style type="text/css">
        .RadListBox_Default .rlbGroup .rlbSelected
        {
            background: none repeat scroll 0 0 lime !important;
        }
    </style>

    Thanks,
    Princy.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top