Cloning Tab Breaks Events

[Shawn]

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>

[Shawn]

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.

[Shawn]

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.

[Dimo]

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

[Shawn]

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?

 

 

[Dimo]

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

 

 

[Shawn]

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.