Reorderable TabStrip - applying DropTargets to new tabs?

[Ryan]

Hi, we implemented a reorderable Kendo TabStrip using jQuery UI's Sortable plugin, but are converting it to use Kendo's Reorderable widget in order to eliminate the jQuery UI dependency.  This works fine for a static TabStrip, but if you add a new tab (e.g., via append()), it seems the only reasonable way to have the newly added tab be a DropTarget is to re-apply the Reorderable widget.  See this JSFiddle:

http://jsfiddle.net/6v8Su/12/

As you can see, we call applyReorderable() every time a new tab is added, which seems less than ideal and potentially prone to memory leaks/inefficiencies.

I had initally wanted to simply add a new DropTarget to the new tab, analogous to what is done inside Reorderable (lines 10027-11069 of kendo.web.js, 2012.2.710).  However, this would require essentially duplicating nearly the entire Reorderable class in our code (including toggleHintClass() from inside the Reorderable module closure).

So I decided to fall back on the brute-force approach of re-applying the Reorderable widget every time a tab is added.  Is there a better way to do this?  Will there be memory leaks doing it this way, due to event handlers and/or DOM elements not being detached, etc?  I know that there are plans to add destroy() methods to all widgets, but as far as I understand, that is not ready at this time.

The approach in the JSFiddle seems to work, but is not elegant and seems potentially prone to memory issues.  If you have any suggestions on how to accomplish this in a more efficient manner, it would be appreciated.  Thanks!

ryan

p.s. A second question: jQuery UI's Sortable plugin will actually reorder the DOM elements upon dropping in the new location.  Kendo does not actually reorder the Reorderable elements, but simply triggers an event that describes the reordering attempt (see onReorderableChange() in my JSFiddle, where I have to reorder the .k-item tabs manually).  Are there plans to have Reorderable actually reorder its elements?  I realize that I will still need to reorder the content <div>s that correspond to the tabs, but it would be nice if Reorderable actually performed the reordering of its elements.

[Ryan]

I also noticed that for some reason the JSFiddle doesn't work in IE 8 or lower -- the tabs are draggable but no DropTargets show up.  Oddly enough, the same approach in our much more complex project actually works fine in IE 8..   Since the JSFiddle I posted is pretty simple, I'm not sure what could be going on to cause the drop targets not to show up in IE 8..  (?)

[Petyo]

Hello Ryan,

I tried to remove the reorderable re-applying on every tab creation, and it seems to work fine, on my side at least. 

http://jsfiddle.net/6v8Su/13/ 

Perhaps I am missing something?

Greetings,
Petyo
the Telerik team

[Ryan]

Thank you for the response, Petyo.  Unfortunately, your example does not work for me in any browser I tried (Firefox, Chrome, Safari and IE 8).  Note that what I am saying doesn't work is the ability to drag/drop tabs into new positions (e.g., add 2 new tabs and drag Tab 1 to the right of Tab 3).

I do not see how it could possibly have worked for you, since if you use something like Firebug/Firequery to inspect the new tabs, there is no DropTarget associated with the new tabs, nor is there any data-role="droptarget" attribute.  Thus, the new tabs do not display the "hint" (the two little arrows pointing to the new drop position) and it is not possible to drop Tab 1 in any new position.

The reason for this is that the DropTargets are only applied once, during Reorderable's init() -- this is why i need to re-apply Reorderable to get DropTargets added to the new tabs after they are created.  It would be nice to somehow abstract that into an $.on() type of behavior where the same DropTarget code is applied to any new tab added to the widget, even after its instantiation.

Let me know if I am missing something, but I was not able to reorder tabs in your JSFiddle, and for the reasons listed above I would not have expected it to work either.  Thanks,

ryan

[Ryan]

I should clarify one thing that was implicit in what I was saying about the DropTargets: In your example it is possible to drag a new tab to the right or left of Tab 1 (because it is part of the TabStrip when the Reorderable is first applied); what is not possible is to drag any tab (including Tab 1) to the left or right of any of the new tabs (Tab 2, Tab3, etc).

[Petyo]

Hi Ryan,

Apologies for the misunderstanding - indeed, testing the scenario the way you describe reproduces the problem - new tabs are not instantiated as drop targets. This is a shortcoming, indeed, and we will consider addressing it for the next release, if possible. For now, your approach is the only practical one.

I believe that the IE8 problem is jsFiddle related one. I tired your code in a standalone page (see attachment), and it seems to work fine.   

Greetings,
Petyo
the Telerik team

[Ryan]

Thanks, Petyo -- we will use our approach for now (it seems to work fine) and then update it later when Kendo UI has been modified accordingly.

ryan

[Frederic]

Hi, I tried the code from here http://jsfiddle.net/6v8Su/12/ but it don't work with jQuery 1.8, it work only with jQuery 1.7
With jQuery 1.8, I can drag the tabs but it don't want to be dropped anywhere, nothing happen when I drag-and-drop a tab, and no 'hint' is displayed. Try it if you want, change to jQuery 1.8 in jsfiddle and you will see.
Someone can tell me what is wrong ?
Thanks.

[Alexander Valchev]

Hi Frederic,

The official Q3 release (2012.3.1114) is compatible with jQuery 1.8.2. Please upgrade the Kendo resources of your project.

Kind regards,
Alexander Valchev
the Telerik team

[Frederic]

I already have the version 2012.3.1114
I installed Kendo some weeks ago with version 2012.3.1114 and the problem occur with this version

[Dimo]

Hello Frederic,

The provided jsFiddle works with jQuery 1.8.2, the latest internal Kendo UI build and you need to ensure that the previous Reorderable instance is destroyed before you create a new one in the button click event.

Please avoid posting duplicate forum threads and support tickets with the same question, as this may lead to overhead in our support staff.

Greetings,
Dimo
the Telerik team

[Ryan]

Hi -- I am the original poster of this thread, and I can confirm that the reorderable tabs do work with the newest internal Kendo UI build and jQuery 1.8.2.  However, the following modifications must be made:

1. As mentioned by Dimo, the Reorderable widget must be destroyed every time a new tab is added.  For example, put the following code at the beginning of applyReorderable() in my JSFiddle:

        var reorderable = this.tabGroup.data('kendoReorderable');
        if ( reorderable ) {
          reorderable.destroy();
        }

2. There is a selector typo in my original code, which prior versions of jQuery apparently silently allowed, but now jQuery 1.8.2 throws an error.  So if you were using my onReorderableChange() function from the original JSFiddle, you would need to change the code in the second line of that function from

'.k-item::eq('

to

'.k-item:eq('

(i.e., remove the double colon).

We are using the internal build 2012.3.1221 in our own application and the tabs reordering works again for us.  However, I tried to set up a working JSFiddle using the newest Kendo UI release (2012.3.1114), but was unable to get the reordering to work.  So I suspect some Kendo UI code changed between 2012-11-14 and 2012-12-21, that causes this to work again.  Thanks,

ryan

[Dimo]

Hello Ryan,

Indeed, we changed our code shortly after the official Q3 release in order to fix some issues related to the new jQuery 1.8.#

Actually the discussed scenario works with any internal build after the official one.

All the best,
Dimo
the Telerik team