Color individual ButtonListItem RadCheckBoxList

6 posts, 1 answers
  1. Jacques
    Jacques avatar
    20 posts
    Member since:
    Mar 2013

    Posted 07 Apr 2017 Link to this post

    Hi there,

    I am using the RadCheckBoxList and I want to color an individual ButtonListItem.
    The attributes propery is not available, so I am not able to set the styling of an individual item.
                    RadCheckBoxList radCheckBoxList = (RadCheckBoxList)radPanelItem.Items[0].FindControl("radCheckBoxList");

                    if (radCheckBoxList != null)
                    {
                        // Iterate items.
                        foreach (ButtonListItem radCheckBoxItem in radCheckBoxList.Items)
                        {
                            // Set ValueID.
                            string valueID = radCheckBoxItem.Value;
     
                            //
                            string text = radCheckBoxItem.Text;
     
                            // Calculate total checkbox.
                            int total = CalcCheckBoxTotal(propertyID, valueID, partTable, getPartValuesByCommodityCode.PartValueTable);
                            radCheckBoxItem.Text = text + " (" + total + ")";
     
                            // Set color checkbox to silver when total.
                            if (total == 0)
                            {
                                // radCheckBoxItem.Attributes.Add("style", "color:Silver;");
                            }
                        }
                    }

    The property is available when you use the regular System.Web.UI.WebControls.CheckBoxList control.
    Any idea how to set the color of an individual item?

    Regards,

    Marcel

  2. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 10 Apr 2017 Link to this post

    Hello Jacques,

    There is a client-side solution only that I can provide:

    <script>
        function OnClientLoad(sender, args) {
            sender.get_items()[1]._element.firstChild.style.color = "red"
            sender.get_items()[2]._element.firstChild.style.color = "green"
            sender.get_items()[3]._element.firstChild.style.color = "blue"
        }
    </script>
    <telerik:RadCheckBoxList runat="server" ID="Questionnaire" AutoPostBack="false" CssClass="content" ClientEvents-OnLoad="OnClientLoad">
        <Items>
            <telerik:ButtonListItem Text="Game apps (puzzles, charades, etc.)" Value="0" />
            <telerik:ButtonListItem Text="Sports apps (sports schedules, scores, headlines, etc.)" Value="1" />
            <telerik:ButtonListItem Text="Travel apps (airplane tickets, tourist guides, transportation info, etc.)" Value="2" />
            <telerik:ButtonListItem Text="News apps (news, national headlines, technology announcements, etc.)" Value="3" />
            <telerik:ButtonListItem Text="Entertainment apps (puzzles, charades, etc.)" Value="4" />
            <telerik:ButtonListItem Text="Social networking apps (location check-ins, friend status updates, etc.)" Value="5" />
            <telerik:ButtonListItem Text="Weather apps (local forecasts, natural disaster updates, etc.)" Value="6" />
            <telerik:ButtonListItem Text="Other" Value="7" />
        </Items>
    </telerik:RadCheckBoxList>

    Regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Jacques
    Jacques avatar
    20 posts
    Member since:
    Mar 2013

    Posted 12 Apr 2017 in reply to Rumen Link to this post

    Hi Rumen,

    Thanx for the quick reply!
    Is there a chance the Attributes property will be added to the RadCheckBoxList control in the near future?

    Regards,
    Marcel

  4. Answer
    Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 12 Apr 2017 Link to this post

    You are welcome, Marcel!

    Presently, there aren't plans for an Attributes collection property but you can file a feature request in our feedback portal: https://feedback.telerik.com/Project/108

    Kind regards,
    Rumen
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Dan
    Dan avatar
    9 posts
    Member since:
    Dec 2017

    Posted 06 Feb in reply to Rumen Link to this post

    so I am able to partially change the color of a specific ButtonListItem using the javascript you posted - but only the "button" color is changed, the text color remains unchanged

     

    sender.get_items()[1]._element.firstChild.style.color = "red";

     

    How do I also change the color of the text?

     

    thanks

  6. Rumen
    Admin
    Rumen avatar
    14106 posts

    Posted 07 Feb Link to this post

    Hi Dan,

    You can apply a color to the item text via sender.get_items()[1]._element.children[1].style.color = "red";

    <script>
        function OnClientLoad(sender, args) {
            sender.get_items()[1]._element.firstChild.style.color = "red";
            //style the text
            sender.get_items()[1]._element.children[1].style.color = "red";
            sender.get_items()[2]._element.firstChild.style.color = "green";
            //style the text
            sender.get_items()[2]._element.children[1].style.color = "green";
            sender.get_items()[3]._element.firstChild.style.color = "blue";
            //style the text
            sender.get_items()[3]._element.children[1].style.color = "blue";
        }
    </script>
    <telerik:RadCheckBoxList runat="server" ID="Questionnaire" AutoPostBack="false" CssClass="content" ClientEvents-OnLoad="OnClientLoad">
        <Items>
            <telerik:ButtonListItem Text="Game apps (puzzles, charades, etc.)" Value="0" />
            <telerik:ButtonListItem Text="Sports apps (sports schedules, scores, headlines, etc.)" Value="1" />
            <telerik:ButtonListItem Text="Travel apps (airplane tickets, tourist guides, transportation info, etc.)" Value="2" />
            <telerik:ButtonListItem Text="News apps (news, national headlines, technology announcements, etc.)" Value="3" />
            <telerik:ButtonListItem Text="Entertainment apps (puzzles, charades, etc.)" Value="4" />
            <telerik:ButtonListItem Text="Social networking apps (location check-ins, friend status updates, etc.)" Value="5" />
            <telerik:ButtonListItem Text="Weather apps (local forecasts, natural disaster updates, etc.)" Value="6" />
            <telerik:ButtonListItem Text="Other" Value="7" />
        </Items>
    </telerik:RadCheckBoxList>



    I hope this helps!

    Regards,
    Rumen
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top