Drag-Drop reordering tab loses close icon

13 posts, 0 answers
  1. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 06 Dec 2012 Link to this post

    Hi, im using a template to create a "Close" icon where user can close particular tabs. When I drag/drop any tab to reorder, I lose the icon. Im using Q3 2012 (2012_3_1205). I fill the control dynamically in code-behind but I also experience it if defining tabs in the markup. Here is the code:

    <telerik:RadTabStrip  ID="RadTabStrip1" runat="server" EnableDragToReorder="true"  >
                             <TabTemplate>
                                     <div class="CloseIcon">
                                     </div>
                                         
                                    <div class="TabWrapperRight">
                                        <%# DataBinder.Eval(Container, "Text") %>
                                    </div>
                            </TabTemplate>
    </telerik:RadTabStrip>

    CSS
    .CloseIcon
    {
        width: 13px;
        height: 11px;
        background:url("/Images/Icons/close.png") 0 0;
        margin: 4px 0px 0px 25px;
    }

    .CloseIcon:hover
    {
    background:url("/Images/Icons/close.png") 0 -11px;
    }

    .TabWrapperRight
    {
    position:relative;
    float:right;
    }

    Let me know if you need more code to reproduce it.

    TIA
  2. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 11 Dec 2012 Link to this post

    Hello Martin,

    I can suggest you to set the AutoPostBack property of RadTabStrip to True, in order to overcome the problematic behavior. Please let us know if the issue still persists.


    Regards,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 11 Dec 2012 Link to this post

    Nencho,

    issue still persists with AutoPostBack property of RadTabStrip to True.

    Martin
  5. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 14 Dec 2012 Link to this post

    Hello Martin,

    I have prepared a sample project for you, demonstrating how to achieve the desired functionality. Please give it a try and let us know if the problem still persists.

    All the best,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 17 Dec 2012 Link to this post

    Nencho,

    Ive checked and compared your sample and it seems that, in addition to setting AutoPostBack="true" to the RadTabStrip, I needed to also remove all the AjaxSettings from my RadAjaxManager (im not using any UpdatePanel to ajaxify my RadTabStrip).

    The problem, however, is using AutoPostBack make the page to postback everytime I click a tab (which takes about 2-3 seconds to complete and really penalize the user navigation experience). I dont know if its because im dynamically populating the PageViews (with nested ajaxified user controls) and this content is reloaded (for nothing) after each click, but navigation is way better when no postback occurs.

    Is there any way to ajaxify only the tabs when re-ordering?

    Here is my RadAjaxManager configuration:

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" ClientEvents-OnRequestStart="mngRequestStarted" OnAjaxRequest="RadAjaxManager1_AjaxRequest" >
            <AjaxSettings>
                              <telerik:AjaxSetting AjaxControlID="RadTabStrip1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1">
                                    </telerik:AjaxUpdatedControl>
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1">
                                    </telerik:AjaxUpdatedControl>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                            <telerik:AjaxSetting AjaxControlID="RadMultiPage1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="RadMultiPage1" LoadingPanelID="RadAjaxLoadingPanel1">
                                    </telerik:AjaxUpdatedControl>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                             <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" LoadingPanelID="RadAjaxLoadingPanel1">
                                    </telerik:AjaxUpdatedControl>
                                    <telerik:AjaxUpdatedControl ControlID="RadWindowManager1">
                                    </telerik:AjaxUpdatedControl>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                            <telerik:AjaxSetting AjaxControlID="RadTabStrip1_Menu">
                                <UpdatedControls>
                                    <telerik:AjaxUpdatedControl ControlID="RadWindowManager1">
                                    </telerik:AjaxUpdatedControl>
                                    <telerik:AjaxUpdatedControl ControlID="RadTabStrip1" LoadingPanelID="RadAjaxLoadingPanel1">
                                    </telerik:AjaxUpdatedControl>
                                </UpdatedControls>
                            </telerik:AjaxSetting>
                       </AjaxSettings>
        </telerik:RadAjaxManager>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="WebBlue" MinDisplayTime="500" />


    TIA


    Martin

  7. Nencho
    Admin
    Nencho avatar
    1457 posts

    Posted 20 Dec 2012 Link to this post

    Hello Martin,

    I have slightly modified the previously provided sample, in order t demonstrate you how to achieve the desired functionality. Please find the attached sample.

    All the best,
    Nencho
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  8. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 21 Dec 2012 Link to this post

    Nencho,

    your sample works correctly. However, in my app, I use dynamically created RadTabs/RadPageviews containing a user control for each. In this control, there is a asp:UpdatePanel which seems to have problem when the RadTabStrip has AutoPostBack="true".

    I modified your sample to reproduce the problem with simplified code. If you drag a tab once, no problem. On second postback, you'll have the following error:

    Uncaught Sys.InvalidOperationException: Sys.InvalidOperationException: Could not find UpdatePanel with ID 'ucTest_-1_05dde0f2a034da4457a9b48a46354fa0eaff_uc_UpdatePanel1'. If it is being updated dynamically then it must be inside another UpdatePanel.

    If you switch AutoPostBack of RadTabStrip to false, no more error, but we lose the icon on tab drag.

    .aspx to edit (add OnPageViewCreated event)
    <telerik:RadMultiPage runat="server" ID="RadMultiPage1" SelectedIndex="0" Height="224px" Width="396px" CssClass="multiPage" OnPageViewCreated="RadMultiPage1_PageViewCreated">

    .cs
            protected void Page_Load(object sender, System.EventArgs e)
            {
                if (!Page.IsPostBack)
                {
                    CreateTabs();
     
                }
            }
            protected void Button1_Click(object sender, EventArgs e)
            {
                RadMultiPage1.SelectedIndex = 0;
                RadTabStrip1.SelectedIndex = 0;
            }
     
            protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
            {
     
            }
     
            private void CreateTabs()
            {
                RadTab rootTab = null;
                RadPageView pv = null;
     
                rootTab = new RadTab();
                RadTabStrip1.Tabs.Add(rootTab);
     
                 
                rootTab.Text = "Dynamic Tab" + " " + RadTabStrip1.Tabs.Count.ToString();
                rootTab.Value = "ucTest_" + "-1" + "_" + Guid.NewGuid().ToString().Replace("-", "a");
                
                pv = new RadPageView();
                pv.ID = rootTab.Value;
                RadMultiPage1.PageViews.Add(pv);
     
                RadTabStrip1.DataBind();
     
     
            }
     
            protected void RadMultiPage1_PageViewCreated(object sender, RadMultiPageEventArgs e)
            {
                Control userControl = null;
                string userControlName = e.PageView.ID.Substring(0, e.PageView.ID.IndexOf("_")) + ".ascx";
     
               userControl = Page.LoadControl(userControlName);
                userControl.ID = e.PageView.ID + "_uc";
                e.PageView.Controls.Add(userControl);
     
     
     
            }

    ucTest.ascx
    <asp:UpdatePanel runat="server" ID="UpdatePanel1">
    </asp:UpdatePanel>
  9. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 27 Dec 2012 Link to this post

    Hi Martin,

    Since you experience such error when the AutoPostBack property of the RadTabStrip is set to True, there is might be a problem with the Ajax settings being used. Could you please open a support ticket and provide a runnable sample so we could test and troubleshoot the problem locally.

    Regards,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  10. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 27 Dec 2012 Link to this post

    Thanks Dimitar,

    ticket 643680 has been opened here.


    TIA


    Martin
  11. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 28 Dec 2012 Link to this post

    Hi Martin,

    Thank you for your cooperation, I have responded to your support ticket.

    All the best,
    Dimitar Terziev
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  12. Chanan Zass
    Chanan Zass avatar
    50 posts
    Member since:
    Aug 2012

    Posted 02 Dec 2013 Link to this post

    And the answer is?
    Can you please share the solution?

    Thanks.
  13. Martin Roussel
    Martin Roussel avatar
    246 posts
    Member since:
    Jan 2010

    Posted 02 Dec 2013 Link to this post

    here is a summary of my ticket discussions. IIRC, I wasnt able to exactly have what I wanted to do initially:

    Hi Martin,

    The error you firstly mentioned to appear on your end is caused by nested UpdatePanels rendered on the page. As the whole RadTabStrip and RadMultiPage controls are already ajaxified by the RadAjaxManager on the main page, rendering UserControls with another UpdatePanels into them will cause this nested UpdatePanels to appear, which is not a supported scenario. Also note that if the RadTabStrip and RadMultiPage are already added into Ajax settings it is not necessary to add UpdatePanels into the UserControl as all controls rendered in these TabStrip will already perform Ajax requests instead of regular postback. Please keep only the main Ajax settings as shown in the help topic below and remove the UpdatePanels for the userControls and verify if this works for you:

    http://www.telerik.com/help/aspnet-ajax/ajax-tips-and-tricks.html

    Greetings,
    Maria Ilieva 
    the Telerik team


    ----

    Maria, it seems to work if I remove the UpdatePanel. However, the reason why I use, like I specified earlier, is because im trying to replicate this Portal demo in each tab (which use an UpdatePanel to optimize the RadDockZone). Can you pleaseconfirm that my Portal should work properly If I remove the UpdatePanel in the user control and ajaxify the RadTabStrip/RadMultiPage with a RadAjaxManager. Like I said, it seems to work but I just dont want to hit future problems that I dont experience so far.

    The problem that stills annoys me is the loading occuring each time I click on a tab (because of the AutoPostBack="true"). Can we tweak it so the Postback only occurs on tab dragging? I think I prefer removing completely the close Icon to not have that loading time (2-3sec).

    TIA

    Martin

    ---

    Hello Martin,

    Thank you for getting back to us.

    As for the ajaxifying option in your scenario, the usage of RadAjaxManager to update the whole TabStrip and MultiPage will cover the requirements you have and this scenario will properly work as the mentioned demo without the asp UpdatePanel in each separate UserControl.
    However the postback should appear in all case as you have Templates into the TabStrip control. It would not be possible to enable the postback only for the drag action and not on a simple click.


    Greetings,
    Maria Ilieva 
    the Telerik team

  14. Chanan Zass
    Chanan Zass avatar
    50 posts
    Member since:
    Aug 2012

    Posted 02 Dec 2013 Link to this post

    Thanks a million!


    What I ended up doing was removing all UpdatePanels from both main page where the RadTabStrip is set and from UserControls that are inserted dynamically.



    I left the RadAjaxManager and RadAjaxManagerProxy's in main page and UserControls.



    These changes were required after we moved the site to a new server where .NET Framework 4.5 is used, while before we used an older server (2003) with .NET Framework 2.0.

    On the old server we used Telerik components for the older Framework. These components required the use of UpdatePanels to work in our desired scenario.



    Thanks again.







Back to Top
UI for ASP.NET Ajax is Ready for VS 2017