Input control disapears in a TabStrip + PageView

[Bernd Eidelsburger]

Hi,

on Sharepoint 2010 we create an ASPX Layout Page with multiple PageViews. The PageViews are dynamically added to TabStrip by code-behind. If we put the RadUpload in the PageView it doesn't shows the File-Input Control. After first click on "Upload"-Button the input is visible and can be used. I think the problem is related to the postback of TabStrip-Click ... but how to prevent/to require a full postback to the current PageView ...

Screenshot:


ASPX Page:

<telerik:radformdecorator id="FormDecorator1" runat="server"  DecoratedControls="all" Skin="Windows7" ControlsToSkip="Fieldset"></telerik:radformdecorator>
 <telerik:RadAjaxLoadingPanel runat="server" ID="LoadingPanel1" Transparency="25" BackgroundPosition="Center">
        <div style="vertical-align:middle;text-align:center;width:100%;height:100%;background-color:white;font-weight:bolder;font-size:large">
            <img src="/_layouts/images/IFXForms/loading1.gif" alt="Loading ..." />
        </div>
 </telerik:RadAjaxLoadingPanel>

         <telerik:RadAjaxManager runat="server" ID="RadAjaxManager1">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" />
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="LoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>

        <script type="text/javascript">

            function onTabSelecting(sender, args) {
                if (args.get_tab().get_pageViewID()) {
                    args.get_tab().set_postBack(false);
                }
            }
        </script>
<table>
<tr>
    <td valign="top">
<asp:UpdatePanel runat="server" ChildrenAsTriggers="true" UpdateMode="Conditional" ID="formUpdatePanel">
<ContentTemplate>
       <div style="padding-top: 10px;">
            <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1" LoadingPanelID="LoadingPanel1">
                <div style="float:left; width:900px">
                    <telerik:RadTabStrip ID="RadTabStrip1" OnClientTabSelecting="onTabSelecting" SelectedIndex="0" runat="server" MultiPageID="RadMultiPage1" OnTabClick="RadTabStrip1_TabClick"
                         CssClass="tabStrip">
                    </telerik:RadTabStrip>
                    <div style="padding: 10px;border-style:solid;border-width:1px">
                    <asp:Literal ID="lMessage" runat="server" visible="false"></asp:Literal>
                   <telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" OnPageViewCreated="RadMultiPage1_PageViewCreated" CssClass="multiPage">
                    </telerik:RadMultiPage>
                    </div>
                </div>
                <div class="previewWrapper">

                </div>
            </telerik:RadAjaxPanel>
        </div>
        <br/>
</ContentTemplate>
</asp:UpdatePanel>

ASPX code-behid:

protectedvoidPage_Load(objectsender, EventArgs e)
{
    initTabs();
    if(!Page.IsPostBack)
    {
        Filename = this.Request.QueryString.Get("data");
        itprData = deserializeData();
        lPageTitle.Text = string.Format("Purchase Request {0} ({1})", itprData.ID, itprData.ActiveStepID.ToString());
        lPageTitleInTitleArea.Text = string.Format("Purchase Request {0}", itprData.ID);
        foreach(KeyValuePair<string, string> pair intabs)
        {
            AddTab(pair.Key);
        }
        AddPageView(RadTabStrip1.FindTabByText("Request Info"));
    }
}
privatevoidAddTab(stringtabName)
{
    RadTab tab = newRadTab();
    tab.Text = tabName;

    RadTabStrip1.Tabs.Add(tab);
}

protectedvoidRadMultiPage1_PageViewCreated(objectsender, RadMultiPageEventArgs e)
{
    stringuserControlName = e.PageView.ID + ".ascx";

    Control userControl = Page.LoadControl("~/_controltemplates/IFXForms/ITPR/"+ userControlName);
    userControl.ID = e.PageView.ID + "_userControl";

    e.PageView.Controls.Add(userControl);
}

privatevoidAddPageView(RadTab tab)
{
    RadPageView pageView = newRadPageView();
    pageView.ID = tabs[tab.Text];
    RadMultiPage1.PageViews.Add(pageView);
    pageView.CssClass = "pageView";
    tab.PageViewID = pageView.ID;
}

protectedvoidRadTabStrip1_TabClick(objectsender, RadTabStripEventArgs e)
{
    AddPageView(e.Tab);
    e.Tab.PageView.Selected = true;
}

PageView Control ASCX:

<telerik:RadScriptBlock ID="RadScriptBlock12" runat="server">
 <script type="text/javascript">
     // on upload button click temporarily disables ajax to perform
     // upload actions
     function conditionalPostback(sender, args) {
         if (args.get_eventTarget() == "<%= FileUploadButton.UniqueID %>") {
             args.set_enableAjax(false);
         }
     }
 </script>
</telerik:RadScriptBlock>
<telerik:RadAjaxPanel runat="server" id="RadAjaxPanel12"
 ClientEvents-OnRequestStart="conditionalPostback">
 <telerik:RadUpload runat="server" id="RadUpload1" EnableFileInputSkinning="false" />
 <asp:Button id="FileUploadButton" runat="server" text="Upload" OnClick="SubmitButton_Click" />
</telerik:RadAjaxPanel>

[Yana]

Hi Ralf,

You have too many nested ajax panels and update panels. Please remove all of them, they are not needed as RadAjaxManager already makes the requests asynchronous. Try it and let us know how it goes.

Greetings,
Yana
the Telerik team

[D4]

Hi,
 I also came through the similar issue. The input text box is not shown if the file upload is in tab. I have a user control in a tab and this user control is with multiview.
Below is the trick that worked for me. In this case the text box style is rendering as display:none and just override this by the below property.

.RadUpload input.ruFakeInput
        {
            display: inline !important;
        }

Thanks
KK