Hello Bberdel,
Yes, such thing is possible. To outline the process:
1) Upon selecting item, a handler checks if all the related checkboxes are selected (could be client-side, could be server side, depends on the case)
2) If all checkboxes are selected, either change the tab background color, or add a new class name
Here is a sample solution for the simplest of cases. Note, it uses checkbox list just to illustrate that such behaviour is possible:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="tabstrip_Default" %>
<
head
runat
=
"server"
>
<
title
>Is it possible to change tab strip back color if all check boxes are selected?</
title
>
<
style
type
=
"text/css"
>
/** outer LI */
.someClass {}
/** A */
.someClass .rtsLink {
background: red !important;
}
/** Outer SPAN */
.someClass .rtsOut {
background: red !important;
}
/** Inner SPAN */
.someClass .rtsIn {}
/** Text SPAN */
.someClass .rtsTxt {}
</
style
>
</
head
>
<
body
>
<
form
id
=
"form1"
runat
=
"server"
>
<
asp:ScriptManager
ID
=
"scriptmanger"
runat
=
"server"
/>
<
telerik:RadTabStrip
ID
=
"RadTabStrip1"
runat
=
"server"
MultiPageID
=
"RadMultiPage1"
SelectedIndex
=
"0"
>
<
Tabs
>
<
telerik:RadTab
Text
=
"Tab 1"
/>
<
telerik:RadTab
Text
=
"Tab 2"
/>
<
telerik:RadTab
Text
=
"Tab 3"
/>
</
Tabs
>
</
telerik:RadTabStrip
>
<
telerik:RadMultiPage
ID
=
"RadMultiPage1"
runat
=
"server"
SelectedIndex
=
"0"
>
<
telerik:RadPageView
ID
=
"RadPageView1"
runat
=
"server"
CssClass
=
"page-view"
>
<
asp:CheckBoxList
ID
=
"CheckBoxList1"
runat
=
"server"
>
<
asp:ListItem
Text
=
"Tab 1 Item 1"
/>
<
asp:ListItem
Text
=
"Tab 1 Item 2"
/>
<
asp:ListItem
Text
=
"Tab 1 Item 3"
/>
</
asp:CheckBoxList
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView2"
runat
=
"server"
CssClass
=
"page-view"
>
<
asp:CheckBoxList
ID
=
"CheckBoxList2"
runat
=
"server"
>
<
asp:ListItem
Text
=
"Tab 2 Item 1"
/>
<
asp:ListItem
Text
=
"Tab 2 Item 2"
/>
<
asp:ListItem
Text
=
"Tab 2 Item 3"
/>
</
asp:CheckBoxList
>
</
telerik:RadPageView
>
<
telerik:RadPageView
ID
=
"RadPageView3"
runat
=
"server"
CssClass
=
"page-view"
>
<
asp:CheckBoxList
ID
=
"CheckBoxList3"
runat
=
"server"
>
<
asp:ListItem
Text
=
"Tab 3 Item 1"
/>
<
asp:ListItem
Text
=
"Tab 3 Item 2"
/>
<
asp:ListItem
Text
=
"Tab 3 Item 3"
/>
</
asp:CheckBoxList
>
</
telerik:RadPageView
>
</
telerik:RadMultiPage
>
<
script
type
=
"text/javascript"
>
(function($) {
var $checkboxes = $("#RadMultiPage1 input[type=checkbox]");
$checkboxes.bind("change", function() {
var notSelected = $(this)
// go up to the parent page view
.parents(".page-view")
// get all checkboxes
.find("input[type=checkbox]")
// filter out the selected
.not(":checked").length;
var tabStrip = $find( "RadTabStrip1" );
var selectedTab = tabStrip.get_selectedTab().get_element();
if (notSelected == 0) {
$( selectedTab ).addClass("someClass")
} else {
$( selectedTab ).removeClass("someClass")
}
});
})($telerik.$);
</
script
>
</
form
>
</
body
>
</
html
>
Regards,
Ivan Zhekov
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their
blog feed now