Cloning Tab Breaks Events

7 posts, 1 answers
  1. Shawn
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 28 May 2015 Link to this post

    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>

  2. Shawn
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 28 May 2015 in reply to Shawn Link to this post

    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.

  3. Kendo UI is VS 2017 Ready
  4. Shawn
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 28 May 2015 in reply to Shawn Link to this post

    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.

  5. Answer
    Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 01 Jun 2015 Link to this post

    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!
  6. Shawn
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 07 Jun 2015 in reply to Dimo Link to this post

    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?

     

     

  7. Dimo
    Admin
    Dimo avatar
    8330 posts

    Posted 08 Jun 2015 Link to this post

    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!
     
  8. Shawn
    Shawn avatar
    13 posts
    Member since:
    Mar 2015

    Posted 09 Jun 2015 Link to this post

    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.
Back to Top
Kendo UI is VS 2017 Ready