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

4 posts, 0 answers
  1. bberdel
    bberdel avatar
    20 posts
    Member since:
    Jun 2006

    Posted 20 Dec 2011 Link to this post

    Working on some code here with a tab strip and a rad grid. If all the check boxes have been selected in the grid, I want the tab to change color to signify the user that that page is done and then to move on to the next one.

    I've been going back and forth on ideas but nothing is really coming to mind as of yet. Any suggestions?

    vb.net

    Thanks
  2. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 20 Dec 2011 Link to this post

    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">
    <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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. bberdel
    bberdel avatar
    20 posts
    Member since:
    Jun 2006

    Posted 20 Dec 2011 Link to this post

    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>

  5. Ivan Zhekov
    Admin
    Ivan Zhekov avatar
    540 posts

    Posted 27 Dec 2011 Link to this post

    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
    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
Back to Top