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

TabStrip MutiPage visibility issue

6 Answers 122 Views

TabStrip

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

Rainer asked on 19 Nov 2019, 08:47 AM

ok.jpg

error99a2287b1ecc40bf854a428e9f7dc39a.jpg

Hello,

I got several conten pages with the same structure, a tabstrip with 2 tabs and a multipage with 2 pages, one for each tab. On the second tab/page is a table with a button on it. On some pages is the table/button visible and on some not but the structure is the same.

This content page works fine:

<%@ Page Language="vb" MasterPageFile="~/main.Master" CodeFile="allgemein_angebote.aspx.vb" Inherits="allgemein_angebote" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="contentHead" ContentPlaceHolderID="cphHead" runat="server">

<style type="text/css">

div.noWrapRadListBox .rlbText{

white-space: nowrap;

}

.auto-style4 {

width: 550px;

}

.auto-style12 {

margin: 20px;

height: 240px;

width: 485px;

}

.auto-style13 {

width: 236px;

height: 28px;

}

.auto-style14 {

height: 28px;

}

/*.auto-style16 {

width: 100px;

}*/

.auto-style17 {

width: 548px;

}

.auto-style18 {

width: 125px;

}

.auto-style23 {

width: 210px;

}

.auto-style28 {

width: 236px;

}

.auto-style30 {

width: 132px;

}

.auto-style31 {

width: 211px;

}

/*.auto-style32 {

width: 209px;

}*/

.auto-style33 {

width: 212px;

}

</style>

<script type = "text/javascript">

</script>

</asp:Content>

<asp:Content ID="contentStart" ContentPlaceHolderID="cphContent" runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAnzeigen">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1" />

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"

Skin="Default" Width="205px">

</telerik:RadAjaxLoadingPanel>

<div class="formTabs" style="background: none; padding: 0px;">

<telerik:RadTabStrip runat="server" ID="RadTabStrip1"

Style="float: left" SelectedIndex="0"

MultiPageID="RadMultiPage1" Enabled="True">

<Tabs>

<telerik:RadTab runat="server" Text="Angebote"> </telerik:RadTab>

<telerik:RadTab runat="server" Text="Historie"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<div style="clear: both;"></div>

</div>

<div class="formContainer formTrainer"

style="clear: both; margin: 0; padding: 20px; background-color: #FFF; height: 430px">

<telerik:RadMultiPage runat="server"

ID="RadMultiPage1"

SelectedIndex="0"

CssClass="multiPage"

Enabled="True">

<telerik:RadPageView ID="RadPageViewAngebote"

runat="server"

CssClass="corporatePageView"

Width="704px"

Height="430">

<telerik:RadGrid ID="RadGrid1" runat="server"

AllowAutomaticDeletes="True"

AllowFilteringByColumn="True"

AllowSorting="True"

AutoGenerateColumns="False"

TableLayout="Fixed"

meta:resourcekey="RadGrid1Resource1"

Skin="WebBlue"

AllowPaging="True"

Width="702px"

Culture="de-DE">

<ExportSettings>

<Pdf PageWidth="">

</Pdf>

</ExportSettings>

<MasterTableView AutoGenerateColumns="False"

CommandItemDisplay="Top" DataKeyNames="ID_Angebot"

EditMode="PopUp" HorizontalAlign="NotSet"

InsertItemPageIndexAction="ShowItemOnCurrentPage" NoMasterRecordsText="Keine Angebote vorhanden." Width="100%">

<CommandItemSettings AddNewRecordText="Angebot hinzufügen" RefreshText="Aktualisieren" />

<Columns>

<telerik:GridBoundColumn ColumnEditorID="GridTextBoxColumnEditor1" DataField="Name" HeaderText="Name" ItemStyle-VerticalAlign="Top" ItemStyle-Width="140px" SortExpression="Name" UniqueName="Name">

<HeaderStyle Width="36%" />

<ItemStyle VerticalAlign="Top" Width="140px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AllowFiltering="false" ColumnEditorID="GridTextBoxColumnEditor1" DataField="Stundensatz" DataFormatString="{0:###,##0.00}" HeaderText="Stundensatz" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" SortExpression="Stundensatz" UniqueName="Stundensatz">

<HeaderStyle Width="15%" />

<ItemStyle VerticalAlign="Top" Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AllowFiltering="false" ColumnEditorID="GridTextBoxColumnEditor1" DataField="Fortbildungszuschlag" DataFormatString="{0:###,##0.00}" HeaderText="Fortbildungszuschlag" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" SortExpression="Fortbildungszuschlag" UniqueName="Fortbildungszuschlag">

<HeaderStyle Width="19%" />

<ItemStyle VerticalAlign="Top" Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridBoundColumn AllowFiltering="false" ColumnEditorID="GridTextBoxColumnEditor1" DataField="Fahrtkosten" DataFormatString="{0:###,##0.00}" HeaderText="Fahrtkosten" ItemStyle-VerticalAlign="Top" ItemStyle-Width="50px" SortExpression="Fahrtkosten" UniqueName="Fahrtkosten">

<HeaderStyle Width="19%" />

<ItemStyle VerticalAlign="Top" Width="50px" />

</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-VerticalAlign="Top" ItemStyle-Width="20px" UniqueName="EditCommandColumn">

<HeaderStyle Width="5%" />

<ItemStyle CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Delete" ConfirmDialogType="RadWindow" ConfirmText="Angebot löschen?" ConfirmTitle="Löschen" ItemStyle-VerticalAlign="Top" ItemStyle-Width="20px" Text="Delete" UniqueName="DeleteColumn">

<HeaderStyle Width="5%" />

<ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings CaptionFormatString="Angebot bearbeiten" EditFormType="Template" InsertCaption="Angebot hinzufügen">

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

<FormTemplate>

<div class="auto-style12">

<div style="padding-top:1px;" class="auto-style4">

<table id="TableLinks" class="auto-style17">

<tr>

<td>

<table>

<tr>

<td class="auto-style18">

Name:

</td>

<td class="auto-style31">

<asp:TextBox ID="txtName" runat="server" class="inputText" Width="200px"></asp:TextBox>

</td>

<td class="auto-style30">

Ausdauer:</td>

<td>

<asp:TextBox ID="txtAusdauer" runat="server" class="inputText" Width="30px"></asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td class="auto-style18">

Stundensatz:

</td>

<td class="auto-style31">

<asp:TextBox ID="txtStundensatz" runat="server" class="inputText" Width="200px"></asp:TextBox>

</td>

<td class="auto-style30">

Beweglichkeit:<td>

<asp:TextBox ID="txtBeweglichkeit" runat="server" class="inputText" Width="30px"></asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td class="auto-style18">

Fortbildungszuschlag:

</td>

<td class="auto-style31">

<asp:TextBox ID="txtFortbildungszuschlag" runat="server" class="inputText" Width="200px"></asp:TextBox>

</td>

<td class="auto-style30">

Koordination:

</td>

<td>

<asp:TextBox ID="txtKoordination" runat="server" class="inputText" Width="30px"></asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td class="auto-style18">

Fahrtkosten:

</td>

<td class="auto-style31">

<asp:TextBox ID="txtFahrtkosten" runat="server" class="inputText" Width="200px"></asp:TextBox>

</td>

<td class="auto-style30">

Kraft:

</td>

<td>

<asp:TextBox ID="txtKraft" runat="server" class="inputText" Width="30px"></asp:TextBox>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

<table>

<tr>

<td class="auto-style18" >

Kategorien:

</td>

<td class="auto-style33">

Vorhanden</td>

<td>

Zugeordnet<td>

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td class="auto-style16">

<table>

<tr>

<td style="vertical-align:top; padding-top: 4px;" class="auto-style28" ></td>

<td style="padding-top: 3px">

<telerik:RadListBox ID="RadListBoxKategorien" runat="server" AllowTransfer="True" Height="100px" Width="210px" TransferToID="RadListBoxKAuswahl" AllowTransferOnDoubleClick="True">

</telerik:RadListBox>

</td>

<td style="padding-top: 3px" class="auto-style23">

<telerik:RadListBox ID="RadListBoxKAuswahl" runat="server" Height="100px" Width="174px" AllowTransferOnDoubleClick="True">

</telerik:RadListBox>

</td>

</tr>

<tr>

<td class="auto-style28">Sparte:</td>

<td colspan="2">

<asp:DropDownList ID="selSparte" runat="server" CssClass="inputSelect" Width="206px">

</asp:DropDownList>

</td>

</tr>

<tr>

<td class="auto-style13">Sichtbar:</td>

<td colspan="2" class="auto-style14">

<asp:CheckBox ID="ckbVisible" runat="server" />

</td>

</tr>

<tr>

<td class="auto-style28"></td>

<td align="right" colspan="2">

<asp:Button ID="Button1" runat="server" class="inputSubmit"

CommandName='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "PerformInsert", "Update")%>' Text='<%# IIf((TypeOf(Container) is GridEditFormInsertItem), "Einfügen", "Speichern") %>' />

<asp:Button ID="Button2" runat="server" CausesValidation="False" class="inputSubmit" CommandName="Cancel" Text="Abbrechen" />

</td>

</tr>

</table>

</td>

</tr>

</table>

</div>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

<GroupingSettings CaseSensitive="False" />

<FilterMenu CssClass="mnuFilter">

</FilterMenu>

</telerik:RadGrid>

</telerik:RadPageView>

<%--Tab Historie--%>

<telerik:RadPageView runat="server" ID="RadPageViewHistorie"

CssClass="corporatePageView" Width="16px" Height="16px">

<table style="width:100%;">

<tr>

<td align="right">

<asp:Button ID="btnAnzeigen"

style="padding-left:10px;padding-right:10px;"

runat="server"

Text="Anzeigen"

Width="100px"/>

</td>

</tr>

<tr>

<td>

<div id="divHistorie" style="width:700px; height:363px; overflow-y: auto;" runat="Server"></div>

</td>

</tr>

</table>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</asp:Content>

On this page the table/Button is not visible:

<%@ Page Language="vb" MasterPageFile="~/main.Master" CodeFile="allgemein_kategorien.aspx.vb" Inherits="allgemein_kategorien" %>

<%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>

<asp:Content ID="contentStartKat" ContentPlaceHolderID="cphContent" runat="server">

<telerik:RadAjaxManager ID="RadAjaxManager2" runat="server">

<AjaxSettings>

<telerik:AjaxSetting AjaxControlID="RadGrid1">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadGrid1"

LoadingPanelID="RadAjaxLoadingPanel1" />

</UpdatedControls>

</telerik:AjaxSetting>

<telerik:AjaxSetting AjaxControlID="btnAnzeigen">

<UpdatedControls>

<telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />

<telerik:AjaxUpdatedControl ControlID="RadMultiPage1"/>

</UpdatedControls>

</telerik:AjaxSetting>

</AjaxSettings>

</telerik:RadAjaxManager>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"

Skin="Default" Width="205px">

</telerik:RadAjaxLoadingPanel>

<div class="formTabs" style="background: none; padding: 0px;">

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

MultiPageID="RadMultiPage1" CssClass="auto-style1" Width="186px">

<Tabs>

<telerik:RadTab runat="server" Text="Kategorien" Selected="True"> </telerik:RadTab>

<telerik:RadTab runat="server" Text="Historie"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<div style="clear: both;"></div>

</div>

<div class="formContainer formTrainer"

style="clear: both; margin: 0; padding: 20px; background-color: #FFF; height: 430px">

<telerik:RadMultiPage runat="server" ID="RadMultiPage1"

SelectedIndex="0" Width="50px" CssClass="multiPage"

Enabled="True" Height="16px" ScrollBars="Auto">

<telerik:RadPageView ID="RadPageViewAngebote" runat="server" Height="430px" Width="704px" CssClass="corporatePageView">

<telerik:RadGrid ID="RadGrid1"

runat="server"

AllowAutomaticDeletes="True"

AllowFilteringByColumn="True"

AllowSorting="True"

AutoGenerateColumns="False"

GridLines="None"

meta:resourcekey="RadGrid1Resource1"

Skin="WebBlue" AllowPaging="True" Width="702px">

<MasterTableView

AutoGenerateColumns="False"

CommandItemDisplay="Top"

DataKeyNames="ID_Kategorie"

EditMode="InPlace"

HorizontalAlign="NotSet"

NoMasterRecordsText="Keine Kategorien vorhanden."

Width="100%" InsertItemPageIndexAction="ShowItemOnCurrentPage">

<CommandItemSettings AddNewRecordText="Kategorie hinzufügen"

RefreshText="Aktualisieren" />

<Columns>

<telerik:GridBoundColumn

ColumnEditorID="GridTextBoxColumnEditor1"

ItemStyle-VerticalAlign="Top"

DataField="Name"

HeaderText="Name"

SortExpression="Name"

AllowSorting="true"

UniqueName="Name"

ItemStyle-Width="50px" >

<ItemStyle VerticalAlign="Top" Width="10px"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridBoundColumn ColumnEditorID="GridTextBoxColumnEditor2" AllowFiltering="false"

DataField="Beschreibung"

ItemStyle-Width="100px"

HeaderText="Beschreibung"

UniqueName="Beschreibung">

<ItemStyle Width="10px"></ItemStyle>

</telerik:GridBoundColumn>

<telerik:GridEditCommandColumn ButtonType="ImageButton" ItemStyle-VerticalAlign="Top"

ItemStyle-Width="20px"

UniqueName="EditCommandColumn">

<ItemStyle CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridButtonColumn ButtonType="ImageButton"

CommandName="Delete"

ItemStyle-VerticalAlign="Top"

ConfirmDialogType="RadWindow"

ConfirmText="Kategorie löschen?"

ConfirmTitle="Löschen"

ConfirmDialogHeight="100px"

ConfirmDialogWidth="250px"

ItemStyle-Width="20px"

Text="Delete"

UniqueName="DeleteColumn">

<ItemStyle CssClass="MyImageButton" HorizontalAlign="Center" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings>

<EditColumn UniqueName="EditCommandColumn1">

</EditColumn>

</EditFormSettings>

</MasterTableView>

<GroupingSettings CaseSensitive="False" />

<FilterMenu CssClass="mnuFilter">

</FilterMenu>

</telerik:RadGrid>

</telerik:RadPageView>

<%--Tab Historie--%>

<telerik:RadPageView runat="server" ID="RadPageViewHistorie"

CssClass="corporatePageView" Width="16px" Height="16px">

<table>

<tr>

<td align="right">

<asp:Button ID="btnAnzeigen" runat="server" style="padding-left:10px;padding-right:10px;" Text="Anzeigen" Width="100px" />

</td>

</tr>

<tr>

<td>

<div id="divHistorie" runat="Server" style="overflow-y: auto;width: 700px;height: 363px">

</div>

</td>

</tr>

</table>

</telerik:RadPageView>

</telerik:RadMultiPage>

</div>

</asp:Content>

<asp:Content ID="Content1" runat="server" contentplaceholderid="cphHead">

<style type="text/css">

.auto-style1 {

float: left;

}

</style>

</asp:Content>

Attached 2 screenshots.

Kind regards, Rainer

6 Answers, 1 is accepted

Accepted

answered on 21 Nov 2019, 04:12 PM

Hi guys,

Here are a couple of suggestions to try out:

Set the RenderMode property to Lightweight of all Telerik controls on the page and the master page.
Test with the latest version of Telerik UI for ASP.NET AJAX - 2019.3.1023 (R3 2019 SP1)
Remove the padding style settings from the button and the stylesheet link related tags from the master page and inspect what is rendered in the browser with the DevTools HTML and CSS inspectors. See the first two bullets - https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools.

If this does not resolve the problem, send a live url to the problematic page for examination.

Best Regards,
Rumen
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.