Radtabstripe TabClickEvent

[Ron]

Hi,

I'm using a rad tab strip with an on TabClickEvent. I've ajaxified this process and that all works but the problem is when I select a new tab the page view doesn't change. The initial page view which is RadPageView1 is always visible regardless of the tab that is selected. I didn't have this problem before using the TabClick server event. Am I doing something wrong? Here's the code...

<telerik:RadTabStrip ID="radTabStrip1" runat="server" Skin="MetroTouch"
             MultiPageID="RadMultiPage1" Width="832px" BorderStyle="None" SelectedIndex="0"
              OnTabClick="radTabStrip1_TabClick">
             <Tabs>
                 <telerik:RadTab Text="History" TabIndex="0" Selected="True">
                 </telerik:RadTab>
                 <telerik:RadTab Text="Payment History" TabIndex="1" >
                 </telerik:RadTab>
                 <telerik:RadTab Text="Email History" TabIndex="2">
                 </telerik:RadTab>
                 <telerik:RadTab Text="Notes" TabIndex="3">
                 </telerik:RadTab>
                 <telerik:RadTab Text="Invoice History" TabIndex="4" >
                 </telerik:RadTab>
             </Tabs>
         </telerik:RadTabStrip>
         <div id="TabBorder" runat="server" style="width:100%; height:5px; "></div>

         <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0"
             Width="832px" >
             <telerik:RadPageView ID="RadPageView1" runat="server" Height="508px"
                 Width="832px">

                 <telerik:RadGrid runat="server" ID="grdHistory" DataSourceID="objHistory" Width="100%"
                    Skin="MetroTouch"  AllowPaging="true" PageSize="10" >
                     <MasterTableView AutoGenerateColumns="false" CssClass="GridHistory">
                      <PagerStyle AlwaysVisible="true" Mode="Slider" ></PagerStyle>
                     <HeaderStyle CssClass="HistoryGridHeader" />
                         <Columns>
                             <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status">
                                 <HeaderStyle Width="140px" />
                                 <ItemStyle CssClass="FirstColumn" Font-Bold="true" />
                             </telerik:GridBoundColumn>
                             <telerik:GridTemplateColumn DataField="Description" HeaderText="Description" UniqueName="Description">
                                  <HeaderStyle Width="460px" />
                                 <ItemTemplate>
                                     <asp:Label runat="server" id="lblDescription" Text='<%# Eval("Description") %>' />
                                 </ItemTemplate>
                             </telerik:GridTemplateColumn>
                             <telerik:GridBoundColumn DataField="Date" HeaderText="Date" UniqueName="Date">
                                  <HeaderStyle Width="234px" />
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="ClientId" HeaderText="ClientId" UniqueName="ClientId" Visible="false">
                             </telerik:GridBoundColumn>
                         </Columns>
                     </MasterTableView>
                 </telerik:RadGrid>
             </telerik:RadPageView>
             <telerik:RadPageView ID="RadPageView2" runat="server" Height="508px" Width="832px">
                 <telerik:RadGrid runat="server" ID="grdPaymentHistory" DataSourceID="objPaymentHistory"
                  Skin="MetroTouch"  AllowPaging="true" PageSize="10" >
                   <HeaderStyle CssClass="HistoryGridHeader"  />
                    <PagerStyle AlwaysVisible="true" Mode="Slider" ></PagerStyle>
                     <MasterTableView AutoGenerateColumns="false" CssClass="GridHistory">
                         <Columns>
                             <telerik:GridTemplateColumn DataField="Description" HeaderText="Description" UniqueName="Description">
                                 <ItemStyle CssClass="FirstColumn" />
                                 <HeaderStyle Width="250px" />
                                 <ItemTemplate>
                                     <asp:Label runat="server" id="Label1" Text='<%# Eval("Description") %>' />
                                     <asp:Label runat="server" id="lblUser" Text='<%# Eval("Username") %>' />
                                 </ItemTemplate>
                             </telerik:GridTemplateColumn>
                              <telerik:GridBoundColumn DataField="PaymentAmount" HeaderText="Payment Amount" UniqueName="PaymentAmount"
                                 DataFormatString="{0:C}">
                                  <HeaderStyle Width="250px" HorizontalAlign="Center" />
                                  <ItemStyle HorizontalAlign="Center"/>
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="DateRecieved" HeaderText="Date Received" UniqueName="DateRecieved"
                                 DataFormatString="{0:MM/dd/yyyy}">
                                 <HeaderStyle Width="234px" HorizontalAlign="Center"  />
                                 <ItemStyle HorizontalAlign="Center" />
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="ClientId" HeaderText="ClientId" UniqueName="ClientId" Visible="false">
                             </telerik:GridBoundColumn>
                         </Columns>
                     </MasterTableView>
                 </telerik:RadGrid>

             </telerik:RadPageView>
             <telerik:RadPageView ID="RadPageView3" runat="server" Height="508px" Width="832px">
                      <telerik:RadGrid runat="server" ID="grdEmailHistory" DataSourceID="objEmailHistory"
                      Skin="MetroTouch" AllowPaging="true" PageSize="10">
                       <HeaderStyle CssClass="HistoryGridHeader" />
                       <PagerStyle AlwaysVisible="true" Mode="Slider" ></PagerStyle>
                         <MasterTableView AutoGenerateColumns="false">
                         <Columns>
                             <telerik:GridBoundColumn DataField="SentTo" HeaderText="To" UniqueName="SentTo">
                                 <HeaderStyle Width="225px" />
                                 <ItemStyle CssClass="FirstColumn"/>
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="Subject" HeaderText="Subject" UniqueName="Subject">
                                 <HeaderStyle Width="115px" />
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="Date" HeaderText="Date" UniqueName="Date" DataFormatString="{0:MM/dd/yyyy}">
                                 <HeaderStyle HorizontalAlign="Center" Width="100px" />
                                 <ItemStyle HorizontalAlign="Center"/>
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="ClientId" HeaderText="ClientId" UniqueName="ClientId" Visible="false">
                             </telerik:GridBoundColumn>
                             <telerik:GridTemplateColumn  HeaderText="View Email" UniqueName="Id" HeaderStyle-HorizontalAlign="Center">
                                 <ItemStyle BorderStyle="None" Width="57px" HorizontalAlign="Center" />
                                     <ItemTemplate>
                                             <a href="#" onclick="OpenWindow('<%# DataBinder.Eval(Container.DataItem, "Id")  %>'); return false;">
                                              <asp:Image ID="EmailImage" runat="server" ImageUrl="~/Images/Icons/Test/Email.png"
                                                  AlternateText="View Email" ToolTip="View Email" style="border:none" />
                                             </a>
                                         </div>
                                     </ItemTemplate>
                             </telerik:GridTemplateColumn>

                         </Columns>
                     </MasterTableView>
                 </telerik:RadGrid>
             </telerik:RadPageView>
             <telerik:RadPageView ID="RadPageView4" runat="server" Height="200px"
                 Width="832px">
                 <telerik:RadTextBox ID="txtNotes" runat="server" Height="191px"
                     TextMode="MultiLine" Width="832px" BorderStyle="None" BorderColor="#EDEDED">
                 </telerik:RadTextBox>
                 <div style="height:100px" />
             </telerik:RadPageView>
             <telerik:RadPageView ID="RadPageView5" runat="server" Height="191px"
                 Width="832px">
                 <telerik:RadGrid runat="server" ID="grdInvoiceHistory" DataSourceID="objInvoiceHistory" Width="100%"
                    GridLines="Horizontal" Skin="Sunset" AllowPaging="true">
                    <ClientSettings>
                     <ClientEvents OnRowMouseOver="GetRowId" />
                    </ClientSettings>
                     <MasterTableView AutoGenerateColumns="false" CssClass="GridHistory" DataKeyNames="Id" ClientDataKeyNames="Id" >
                     <HeaderStyle CssClass="HistoryGridHeader" />
                         <Columns>
                             <telerik:GridBoundColumn DataField="Id" HeaderText="Id" UniqueName="Id"  Visible="false">

                             </telerik:GridBoundColumn>
                             <telerik:GridTemplateColumn DataField="InvoiceNo" UniqueName="InvoiceNo" HeaderText="Invoice No">
                             <ItemTemplate>
                             <asp:LinkButton runat="server" ID="lnkInvoiceNo" Text='<%# Eval("InvoiceNo") %>'
                                 OnClientClick="SetInvoiceParameters()" OnCommand="lnkInvoiceNo_Command"      />
                             </ItemTemplate>
                             <ItemStyle CssClass="FirstColumn" />
                             </telerik:GridTemplateColumn>
                             <telerik:GridBoundColumn DataField="InvoiceDate" HeaderText="Date Created" UniqueName="InvoiceDate" DataFormatString="{0:MM/dd/yyyy}">
                             </telerik:GridBoundColumn>
                             <telerik:GridBoundColumn DataField="Status" HeaderText="Status" UniqueName="Status">
                             </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="RecurringId" HeaderText="RecurringId" UniqueName="RecurringId" Visible="false">
                             </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="CustomerId" HeaderText="CustomerId" UniqueName="CustomerId" Visible="false">
                             </telerik:GridBoundColumn>
                              <telerik:GridBoundColumn DataField="CompanyId" HeaderText="CompanyId" UniqueName="CompanyId" Visible="false">
                             </telerik:GridBoundColumn>
                         </Columns>
                     </MasterTableView>
                 </telerik:RadGrid>
             </telerik:RadPageView>
         </telerik:RadMultiPage>
         <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2" >
                     <AjaxSettings>
                         <telerik:AjaxSetting AjaxControlID="grdHistory" >
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="grdHistory"
                                     LoadingPanelID="RadAjaxLoadingPanel2" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                         <telerik:AjaxSetting AjaxControlID="grdPaymentHistory">
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="grdPaymentHistory"
                                     LoadingPanelID="RadAjaxLoadingPanel2" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                         <telerik:AjaxSetting AjaxControlID="grdEmailHistory">
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="grdEmailHistory"
                                     LoadingPanelID="RadAjaxLoadingPanel2" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                         <telerik:AjaxSetting AjaxControlID="txtNotes">
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="txtNotes"
                                     LoadingPanelID="RadAjaxLoadingPanel2" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                         <telerik:AjaxSetting AjaxControlID="grdInvoiceHistory">
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="grdInvoiceHistory"
                                     LoadingPanelID="RadAjaxLoadingPanel2" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                         <telerik:AjaxSetting AjaxControlID="grdDisputeHistory">
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="grdDisputeHistory"
                                     LoadingPanelID="RadAjaxLoadingPanel1" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                         <telerik:AjaxSetting AjaxControlID="radTabStrip1">
                             <UpdatedControls>
                                 <telerik:AjaxUpdatedControl ControlID="radTabStrip1"
                                     LoadingPanelID="RadAjaxLoadingPanel2" />
                             </UpdatedControls>
                         </telerik:AjaxSetting>
                     </AjaxSettings>
                 </telerik:RadAjaxManager>
  </div>

protected void radTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
{
    radTabStrip1.Tabs[0].BackColor = System.Drawing.ColorTranslator.FromHtml("#f9f9f9");
    radTabStrip1.Tabs[0].ForeColor = System.Drawing.ColorTranslator.FromHtml("#000000");
    radTabStrip1.Tabs[1].BackColor = System.Drawing.ColorTranslator.FromHtml("#f9f9f9");
    radTabStrip1.Tabs[1].ForeColor = System.Drawing.ColorTranslator.FromHtml("#000000");
    radTabStrip1.Tabs[2].BackColor = System.Drawing.ColorTranslator.FromHtml("#f9f9f9");
    radTabStrip1.Tabs[2].ForeColor = System.Drawing.ColorTranslator.FromHtml("#000000");

    radTabStrip1.SelectedTab.BackColor = System.Drawing.ColorTranslator.FromHtml(_statusColor);
    radTabStrip1.SelectedTab.ForeColor = Color.White;
}

thanks,
Ron.

[Shinu]

Hi Ron,

Please try to make the following modification to your code snippet that works as expected for me.

ASPX:

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel2">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="grdHistory">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdHistory" LoadingPanelID="RadAjaxLoadingPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="grdPaymentHistory">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdPaymentHistory" LoadingPanelID="RadAjaxLoadingPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="grdEmailHistory">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdEmailHistory" LoadingPanelID="RadAjaxLoadingPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="txtNotes">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="txtNotes" LoadingPanelID="RadAjaxLoadingPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="grdInvoiceHistory">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdInvoiceHistory" LoadingPanelID="RadAjaxLoadingPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="grdDisputeHistory">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="grdDisputeHistory" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
        <telerik:AjaxSetting AjaxControlID="radTabStrip1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="radTabStrip1" LoadingPanelID="RadAjaxLoadingPanel2" />
                <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel2" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

Hope this will helps you.
Thanks,
Shinu.