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

[Solved] Radtabstripe TabClickEvent

1 Answer 109 Views

TabStrip

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

Ron asked on 11 Jan 2014, 08:54 PM

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.

1 Answer, 1 is accepted

Accepted

answered on 13 Jan 2014, 05:33 AM

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.