Color individual ButtonListItem RadCheckBoxList

[Jacques]

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

[Rumen]

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

[Jacques]

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

[Rumen]

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

[Dan]

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

[Rumen]

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

[Joe]

 

This is the content translated by Google. If the grammar is incorrect, please splice it yourself, sorry.

After searching for a long time, I finally found this great answer, but because my colors and other styles want to be dynamic, is there a way to fill in the css file directly?
And I will fill in the different css file name for each item in the OnDataBound event.

 

這是google翻譯的內容，如果文法不正確的地方，請自行拼接，抱歉。

找了好久，終於找到這個很棒的答案，但因為我的色彩及其它樣式想做成動態的，因此想請問有沒有辦法直接填入css檔呢？
而我會在OnDataBound的事件裡，填入每個項目不同的css檔名稱。

[Rumen]

Hi Joe,

I hope you are doing good!

For the time being, the telerik:RadCheckBoxList control does not offer API for fine-tuning its appearance and that why I proposed a client-side solution to achieve the coloring through the DOM.  You can provide the colors via a hidden field from the server and set them on the client.

Please log a feature request so that we can plan its implementation for a subsequent release.

Regards,
Rumen
Progress Telerik