Radtabstripe TabClickEvent

2 posts, 1 answers
  1. Ron
    Ron avatar
    113 posts
    Member since:
    Apr 2011

    Posted 11 Jan 2014 Link to this post

    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.
  2. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 12 Jan 2014 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top