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

Color individual ButtonListItem RadCheckBoxList

7 Answers 99 Views
CheckBox
This is a migrated thread and some comments may be shown as answers.
Jacques
Top achievements
Rank 1
Jacques asked on 07 Apr 2017, 02:54 PM

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

7 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 10 Apr 2017, 04:51 PM

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.
0
Jacques
Top achievements
Rank 1
answered on 12 Apr 2017, 06:51 AM

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

0
Accepted
Rumen
Telerik team
answered on 12 Apr 2017, 07:49 AM

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.
0
Dan
Top achievements
Rank 1
Veteran
answered on 06 Feb 2019, 09:51 PM

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

0
Rumen
Telerik team
answered on 07 Feb 2019, 12:29 PM
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.
0
Joe
Top achievements
Rank 1
answered on 08 Dec 2020, 08:23 AM

 

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檔名稱。

0
Rumen
Telerik team
answered on 10 Dec 2020, 05:40 PM

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

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Tags
CheckBox
Asked by
Jacques
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Jacques
Top achievements
Rank 1
Dan
Top achievements
Rank 1
Veteran
Joe
Top achievements
Rank 1
Share this question
or