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

Cloning Tab Breaks Events

6 Answers 38 Views
TabStrip
This is a migrated thread and some comments may be shown as answers.
Shawn
Top achievements
Rank 1
Shawn asked on 28 May 2015, 08:21 PM

I need to create tabs dynamically, with the same structure but different data. When I clone a tab, the events (dropdownlist specifically do not work).

var tabpanel = $('[data-name="tabpanel"]').data("kendoTabStrip");
        if (typeof tabpanel === 'undefined') tabpanel = tabpanel = $('[data-name="tabpanel"]').kendoTabStrip().data("kendoTabStrip");
        
        $.each(addresses, function (key, value) {
            var tabHeader = value["AddressTypeDescription"];
            var tab = $('<div>').attr('name', tabHeader);
            $(tabpanel.contentHolder(0)).children().clone().appendTo(tab);

            value['phonetypes'] = phonetypes;// data for dropdownlist
            value['addrtypes'] = addrTypes; //data for dropdownlist
                        
            var vm = kendo.observable(value);
            kendo.bind(tab, vm);

            //Need to do this otherwise the input values will not get passed
            tab.children().find('input').each(function () { $(this).attr('value', this.value);})
            tabpanel.insertAfter({
                text: tabHeader,
                content: tab.html()
            }
                , tabpanel.tabGroup.children(":nth-last-child(2)")
            );
            
        });

 

snippet of the markup for the dropdownlist

<select class="form-control" data-role="dropdownlist" data-bind="source: addrtypes, value: AddressTypeID" data-text-field="text" data-value-field="value" name="ContactAddress.AddressType"></select>

6 Answers, 1 is accepted

Sort by
0
Shawn
Top achievements
Rank 1
answered on 28 May 2015, 08:40 PM

After reading another post, found that I had to initialize the tapstrip after adding the new tabs.

kendo.init($('[data-name="tabpanel"]'))

 Also found that the dropdownlist had to be 'select' tags instead of input.

0
Shawn
Top achievements
Rank 1
answered on 29 May 2015, 12:30 AM

Issue is not resolved.

calling kendo.init() on an element that was already initialized causes problems. Getting the following error in Chrome:

Uncaught RangeError: Maximum call stack size exceeded.

Still need a way to add tabs with bound events.

0
Accepted
Dimo
Telerik team
answered on 01 Jun 2015, 02:44 PM
Hello Shawn,

My advice is the following:

- do not use kendo.bind() for elements, which have already been MVVM-bound
- do not use kendo.bind() for HTML fragments, i.e. elements, which are detached and outside the DOM.

In other words, first add the new TabStrip tab, and then use kendo.bind() for the new content container only.

Regards,
Dimo
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Shawn
Top achievements
Rank 1
answered on 08 Jun 2015, 04:24 AM

It works when I use the TabStrip inside of a Bootstrap modal dialog. 

It doesn't work inside a popup editor from the KendoGrid.

The data is no longer binding, and when the popup is closed there are stack errors in Chrome and "too much recursion" errors in FireFox. I used the debugger and when the popup is closed, Kendo is destroying every element which seems to be the source of the stack/recursion errors.

When the user clicks a column to edit the record, the data to populate the popup is not coming from the grid, but an ajax call.

Any ideas how I can create dynamic TabPanels?

 

 

0
Dimo
Telerik team
answered on 08 Jun 2015, 02:35 PM
Hello Shawn,

My previous reply has been misleading, sorry about that.

Using kendo.bind() for a given container "A" and then for a descendant element of "A" is not supported. You need to call kendo.bind() for the initial element "A" when adding new descendants.

Try refactoring your code, so that the new tab is first appended to the TabStrip, and then kendo.bind() is executed over the same element, which you have used initially. If you have any problems, send a demo.

Regards,
Dimo
Telerik
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Shawn
Top achievements
Rank 1
answered on 09 Jun 2015, 09:39 PM
I added a parent TabStrip with a data-role attribute. In the JavaScript I was initializing the TabStrip so I could do things with it. I had to remove the data-role attribute from the parent TabStrip.
Tags
TabStrip
Asked by
Shawn
Top achievements
Rank 1
Answers by
Shawn
Top achievements
Rank 1
Dimo
Telerik team
Share this question
or