Using UploadControl in RadTabs

[Robert Smit]

Dear Telerik,

I'm using the Upload control in RadTabs, however when I have uploaded a file, then every tab shows the RadProgressArea.

I have read the post: http://www.telerik.com/community/forums/aspnet-ajax/upload/radprogressmanager-in-tabstrip-pb.aspx

This could be the same problem, the solution presented was a property in the RadProgressManager. Could you tell me which property this is? 

Or is it something else that causing this behavious? I'm interested in any solution.

Thanks,

Robert

[Veselin Vasilev]

Hi Robert Smit,

Can you please tell us the exact steps we need to take in order to reproduce the problem?


Kind regards,
Veskoni
the Telerik team

Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
Follow the status of features or bugs in PITS and vote for them to affect their priority.

[Robert Smit]

Sorry for my late answer, it took me a while to get the problem isolated.

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

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

OnTabClick="RadTabStrip1_TabClick" Orientation="HorizontalTop">

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="vwBasic" runat="server">

First click on the second tab, then the third tab and after that again on the second tab. Then you should see the progress box.

</telerik:RadPageView>

<telerik:RadPageView ID="vwDetail2" runat="server">

<asp:Panel ID="pnlListBoxes" runat="server">

<uc7:ucListBox ID="ucListBoxCountries" runat="server" />

<uc7:ucListBox ID="ucListBoxCountries3" runat="server" />

<uc7:ucListBox ID="ucListBoxCountries4" runat="server" />

</asp:Panel>

</telerik:RadPageView>

<telerik:RadPageView ID="vwAvatar" runat="server">

<uc6:ucProjectTabAvatar ID="ucProjectTabAvatar1" runat="server" />

</telerik:RadPageView>

</telerik:RadMultiPage>

  protected void Page_Load(object sender, EventArgs e)
    {
      if (!Page.IsPostBack)
      {
        AddTab("Basic");
        AddTab("Detail2");
        AddTab("Avatar");
        RadTab tabToSelect = RadTabStrip1.FindTabByText("Basic");
        tabToSelect.Selected = true;
        tabToSelect.PageView.Selected = true;
        Invisible();
      }
    }

    private void AddTab(string tabName)
    {
      RadTab tab = new RadTab();
      tab.Text = tabName;
      tab.PageViewID = "vw" + tabName;
      RadTabStrip1.Tabs.Add(tab);
    }

    protected void RadTabStrip1_TabClick(object sender, RadTabStripEventArgs e)
    {
      String pageViewIDSelected = "vw" + e.Tab.Text;
      e.Tab.PageView.Selected = true;
      SetActivePageView(pageViewIDSelected);
    }

    private void SetActivePageView(String pageViewSelected)
    {
      if (pageViewSelected == "vwDetail2")
      {
        List<ItemDto> countryItems = new List<ItemDto>();
        ucListBoxCountries.Bind(countryItems, CountryManager.GetAllCountryItems());
        ucListBoxCountries3.Bind(countryItems, CountryManager.GetAllCountryItems());
        ucListBoxCountries4.Bind(countryItems, CountryManager.GetAllCountryItems());

        Invisible();
        pnlListBoxes.Visible = true;
      }
      if (pageViewSelected == "vwAvatar")
      {
        ucProjectTabAvatar1.Bind(98);
        Invisible();
        ucProjectTabAvatar1.Visible = true;
      }
    }

    private void Invisible()
    {
      ucProjectTabAvatar1.Visible = false;
      pnlListBoxes.Visible = false;
    }

[Genady Sergeev]

Hello Robert Smit,

Thank you for the live URL. It clearly shows the problem off. In order to fix it please paste the following JavaScript code right after your ScriptManager declaration:

<script type="text/javascript">
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        var originalClientSubmit;

        if (!originalClientSubmit) {
            originalClientSubmit =
Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler;
        }

        Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler = function(e) {
            if(!prm._postBackSettings.async) {
                originalClientSubmit.apply(this, [e]);
            }
        }
    </script>

Greetings,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Robert Smit]

Dear,

Thanks for your reply. I have copied the code like you proposed. However the problem still remains.

The new code, with the script added can be seen on test.mhcommunity.net/testpage3.aspx

It fails on Telerik.Web.UI.RadProgressManager, since this object is only available after the tab Avatar is loaded. And the unexpected behavious of showing the uploadbox remains.

Could you check the problem again.

Best wishes,

Robert.

[Genady Sergeev]

Hi Robert Smit,

There are two approaches that you can take in order to fix the problem. The first one is to move the declaration of the RadProgressManager outside of the RadTabStrip and place it on the very ASPX page. The second approach is to hook on the OnClientTabSelected event of your RadTabStrip control and paste the previously mentioned code there.

Regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Robert Smit]

Thanks for your help.

It didn't work for me yet, I have done what you said.

When I debug the script, it sais that Telerik.Web.UI.RadProgressManager is undefined. Telerik.Web.UI does exist, but when I watch it in firebug, it doesn't contain a class RadProgressManager, other Telerik classes are there.

What would be the problem?

Thanks again.

[Genady Sergeev]

Hello Robert Smit,

I have checked your live url and noticed the error that you have mentioned. When I looked at the page source I saw that there is no RadProgressManager created using the $create statement. This means that there is no RadProgressManager on the ASPX page that holds your TabStrip. Please, move the declaration of the RadProgressManager to that page. I have attached sample project that demonstrates the approach.

We have also developed more robust version of the aforementioned workaround. Here it is (it is in the sample project as well):

<script type="text/javascript">
      var prm = Sys.WebForms.PageRequestManager.getInstance();
      var originalClientSubmit;

      if (!originalClientSubmit) {
          originalClientSubmit =
              Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler;
      }

      Telerik.Web.UI.RadProgressManager.prototype._clientSubmitHandler = function(e) {
          var isUploading = false;

          var inputs = $telerik.$("input[type='file']");
          $telerik.$.each(inputs, function() {
              if (this.value != "") {
                  isUploading = true;
                  return;
              }
          });

          if (isUploading)
              originalClientSubmit.apply(this, [e]);
      }
  </script>

In addition, we have fixed the issue for the Q1 release (which is scheduled for the next week) .

Regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.