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
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>
Rumen
Telerik by Progress
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
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
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
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
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檔名稱。
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/.