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

TabStrip MutiPage visibility issue

6 Answers 35 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Rainer
Top achievements
Rank 1
Rainer asked on 19 Nov 2019, 08:47 AM

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>
                                </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

Sort by
0
Rainer
Top achievements
Rank 1
answered on 20 Nov 2019, 08:20 AM

Need help, please!

Telerik version 2018_3_910

Visual Studio 2019

Windows 10 64Bit

Firefox, Chrome, IE, Edge

0
Rainer
Top achievements
Rank 1
answered on 20 Nov 2019, 09:21 AM

Hi,

I find out that all the contentpages with a RadGrid and popup editing works fine and the button is visible. All pages with a RadGrid and inline editing fails and the button is not visible...

 

Regards, Andreas

0
Rainer
Top achievements
Rank 1
answered on 20 Nov 2019, 10:40 AM
Any suggestions?
0
Accepted
Rumen
Telerik team
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.
0
Rainer
Top achievements
Rank 1
answered on 22 Nov 2019, 07:49 AM
Sorry, forget or erase the last post.
0
Rumen
Telerik team
answered on 22 Nov 2019, 08:49 AM

I am glad that you find the reason for the problem and fixed it!

I also deleted the last post as requested by you :)

Keep up the good work!

 

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.
Tags
TabStrip
Asked by
Rainer
Top achievements
Rank 1
Answers by
Rainer
Top achievements
Rank 1
Rumen
Telerik team
Share this question
or