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

Is it possible to change tab strip back color if all check boxes are selected?

3 Answers 224 Views

TabStrip

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

3 Answers, 1 is accepted

answered on 20 Dec 2011, 07:59 PM

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" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 20 Dec 2011, 10:03 PM

Thanks for the code sample there.
Here is my aspx page as an example of what I'm looking to do.

So basically, if all the chk boxes are done in this grid, i want that tab to change to a new color.

should i add something in with the chkCompleteHeader_CheckChanged to force the change on the tab?

<telerik:RadTabStrip ID="RadTabStrip1" runat="server" AutoPostBack="True" SelectedIndex="0"

ShowBaseLine="True" Skin="Forest" CssClass="tabStrip1">

<Tabs>

<telerik:RadTab runat="server" Text="Zone A" Selected="True">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone B">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone C">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone D">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone E">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone F">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone G">

</telerik:RadTab>

<telerik:RadTab runat="server" Text="Zone H">

</telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" AllowSorting="True"

AutoGenerateColumns="False" PageSize="20" ShowStatusBar="True" AlternatingItemStyle-CssClass="BackColor"

Width="950px" BorderColor="Black" BorderWidth="1px" Skin="Telerik" GridLines="None"

AllowAutomaticUpdates="True">

<ExportSettings FileName="DataExport" IgnorePaging="True" OpenInNewWindow="True"

ExportOnlyData="True">

</ExportSettings>

<MasterTableView ClientDataKeyNames="ID" DataKeyNames="ID" CommandItemDisplay="Top"

EditMode="InPlace" TableLayout="Auto">

<CommandItemTemplate>

<table class="rcCommandTable" width="30%">

<td >

<asp:Button ID="updateAll" runat="server" Text="Update This Zone's Information" CommandName="Test" />

</td>

<td>

<asp:Button ID="Button1" runat="server" Text=" " CssClass="rgExpCSV" CommandName="ExportToCSV" />

<asp:Button ID="Button2" runat="server" Text=" " CssClass="rgExpXLS" CommandName="ExportToExcel" />

</td>

</table>

</CommandItemTemplate>

<%--<CommandItemTemplate >

<asp:Button ID="updateAll" runat="server" Text="Update This Zone's Information" CommandName="Test" />

</CommandItemTemplate>

<CommandItemSettings ShowExportToWordButton="true" ShowExportToExcelButton="true"

ShowExportToPdfButton="true" ShowAddNewRecordButton="false" ShowRefreshButton="false"

ShowExportToCsvButton="true" />--%>

<Columns>

<telerik:GridBoundColumn DataField="ID" HeaderStyle-Width="5%" HeaderText="ID" UniqueName="ID"

DataType="System.Int32" SortExpression="ID" ReadOnly="True" Visible="False">

<HeaderStyle Width="5%"></HeaderStyle>

</telerik:GridBoundColumn>

<telerik:GridTemplateColumn DataField="Completed" UniqueName="complete" HeaderText="Done">

<HeaderTemplate>

<asp:CheckBox ID="chkCompleteHeader" Text="Done" AutoPostBack="true" runat="server" OnCheckedChanged="chkCompleteHeader_CheckedChanged" />

</HeaderTemplate>

<ItemTemplate>

<asp:CheckBox ID="chkComplete" Checked='<%# Eval("Completed") %>' runat="server" />

</ItemTemplate>

</telerik:GridTemplateColumn>

</Columns>

<EditFormSettings>

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

answered on 27 Dec 2011, 09:56 AM

494749----changing-tab-background-on-checkbox-select.zip

Hello Brian,

You should use the client events. I have prepared and attached the updated project.

In the updated project, I am using a much simpler scenario -- I am checking if the selected item count in the current page are equal to the page size.

Regards,
Ivan Zhekov
the Telerik team

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Is it possible to change tab strip back color if all check boxes are selected?

3 Answers, 1 is accepted