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

Drag-Drop reordering tab loses close icon

12 Answers 112 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Martin Roussel
Top achievements
Rank 1
Martin Roussel asked on 06 Dec 2012, 07:54 PM
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

12 Answers, 1 is accepted

Sort by
0
Nencho
Telerik team
answered on 11 Dec 2012, 04:22 PM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 11 Dec 2012, 05:13 PM
Nencho,

issue still persists with AutoPostBack property of RadTabStrip to True.

Martin
0
Nencho
Telerik team
answered on 14 Dec 2012, 03:02 PM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 17 Dec 2012, 06:10 PM
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

0
Nencho
Telerik team
answered on 20 Dec 2012, 06:05 PM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 21 Dec 2012, 03:11 PM
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>
0
Dimitar Terziev
Telerik team
answered on 27 Dec 2012, 10:30 AM
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.
0
Martin Roussel
Top achievements
Rank 1
answered on 27 Dec 2012, 01:44 PM
Thanks Dimitar,

ticket 643680 has been opened here.


TIA


Martin
0
Dimitar Terziev
Telerik team
answered on 28 Dec 2012, 09:32 AM
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.
0
Chanan Zass
Top achievements
Rank 1
answered on 02 Dec 2013, 04:46 PM
And the answer is?
Can you please share the solution?

Thanks.
0
Martin Roussel
Top achievements
Rank 1
answered on 02 Dec 2013, 05:16 PM
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

0
Chanan Zass
Top achievements
Rank 1
answered on 02 Dec 2013, 06:25 PM

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.







Tags
TabStrip
Asked by
Martin Roussel
Top achievements
Rank 1
Answers by
Nencho
Telerik team
Martin Roussel
Top achievements
Rank 1
Dimitar Terziev
Telerik team
Chanan Zass
Top achievements
Rank 1
Share this question
or