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