MultiSelect in DropdownList not working in Tabstrip.

[Quest Resource Management]

Hello All,

  I have a issue in apply custom DropDownList control in Tabstrip control.
  In my Tabstrip i have multiple DropDownList box with different id and also i set Checkbox in DropDownList item.
 My problem is First Tab render perfectly but rest of tab data does not render.

 Please see below my code....

HTML Page:
<div id="example" class="k-content">
            <div id="forecast">
                <div id="tabstrip">
                    <ul>
                        <li class="k-state-active">
                            Paris
                        </li>
                        <li>
                            New York
                        </li>
                        <li>
                            London
                        </li>
                        <li>
                            Moscow
                        </li>
                        <li>
                            Sydney
                        </li>
                    </ul>
                    <div>
                        <div id="testView">
    <select id="testItems"  multiple="multiple" data-role="multiselectbox" data-option-label="-" data-text-field="Text" data-value-field="Value" data-bind="source: testItemSource, value: testItems" />
</div>
                        
                    </div>
                    <div>
                        <div class="weather">
                            <h2>29<span>&ordm;C</span></h2>
                            <p>Sunny weather in New York.</p>
                        </div>
                        <span class="sunny">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>21<span>&ordm;C</span></h2>
                            <p>Sunny weather in London.</p>
                        </div>
                        <span class="sunny">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>16<span>&ordm;C</span></h2>
                            <p>Cloudy weather in Moscow.</p>
                        </div>
                        <span class="cloudy">&nbsp;</span>
                    </div>
                    <div>
                        <div class="weather">
                            <h2>17<span>&ordm;C</span></h2>
                            <p>Rainy weather in Sydney.</p>
                        </div>
                        <span class="rainy">&nbsp;</span>
                    </div>
                </div>
            </div>
     
     
            <script>
                $(document).ready(function() {
                    $("#tabstrip").kendoTabStrip({
                        animation:  {
                            open: {
                                effects: "fadeIn"
                            }
                        }
                    });
                });
            </script>


JS File:
// MultiSelectBox, Kendo Plugin
// -----------------------------------------------------------
(function ($) {
    var MultiSelectBox = window.kendo.ui.DropDownList.extend({

        init: function (element, options) {
            var me = this;
            // setup template to include a checkbox
            options.template = kendo.template(
                kendo.format('<label><input type="checkbox" name="{0}" value="#= {1} #" />&nbsp;#= {2} #</label>',
                    element.id + "_option_" + options.dataValueField,
                    options.dataValueField,
                    options.dataTextField
                )
            );
            // remove option label from options, b/c DDL will create an item for it
            if (options.optionLabel !== undefined && options.optionLabel !== null && options.optionLabel !== "") {
                me.optionLabel = options.optionLabel;
                options.optionLabel = undefined;
            }

            // create drop down UI
            window.kendo.ui.DropDownList.fn.init.call(me, element, options);
            // setup change trigger when popup closes
            me.popup.bind('close', function () {
                var values = me.ul.find(":checked")
                    .map(function () { return this.value; }).toArray();
                // check for array inequality
                if (values < me.selectedIndexes || values > me.selectedIndexes) {
                    me._setText();
                    me._setValues();
                    me.trigger('change', {});
                }
            });
            me._setText();
        },

        options: {
            name: "MultiSelectBox"
        },

        optionLabel: "",

        selectedIndexes: [],

        _accessor: function (vals, idx) { // for view model changes
            var me = this;
            if (vals === undefined) {
                return me.selectedIndexes;
            }
        },

        value: function (vals) {
            var me = this;
            if (vals === undefined) { // for view model changes
                return me._accessor();
            } else { // for loading from view model
                var checkboxes = me.ul.find("input[type='checkbox']");
                if (vals.length > 0) {
                    // convert to array of strings
                    var valArray = vals
                        .map(function (item) { return item + ''; });
                    checkboxes.each(function () {
                        this.checked = $.inArray(this.value, valArray) !== -1;
                    });
                    me._setText();
                    me._setValues();
                }
            }
        },

        _select: function (li) { }, // kills highlighting behavior
        _blur: function () { }, // kills popup-close-on-click behavior

        _setText: function () { // set text based on selections
            var me = this;
            var text = me.ul.find(":checked")
                .map(function () { return $(this).parent().text(); })
                .toArray();
            if (text.length === 0)
                me.text(me.optionLabel);
            else
                me.text(text.join(', '));
        },
        _setValues: function () { // set selectedIndexes based on selection
            var me = this;
            var values = me.ul.find(":checked")
                .map(function () { return this.value; })
                .toArray();
            me.selectedIndexes = values;
            me.element.val(values);
        }

    });

    window.kendo.ui.plugin(MultiSelectBox);

})(jQuery);
// ===========================================================

// view model
// -----------------------------------------------------------
var testVM = kendo.observable({
    testItems: [],
    testItemSource: new kendo.data.DataSource({
        data: [
            { Value: 1, Text: "Test 1" },
            { Value: 2, Text: "Test 1" }
        ]
    }),
});
// ===========================================================

$(document).ready(function () {
    kendo.bind($("#testView"), testVM);
    kendo.bind($("#templateView"), testVM);
    
});

Css:
body { font-family: sans-serif; }

Thanks in advance.....

[Alexander Valchev]

Hello Erik,

I believe that the problem is caused by an incorrect HTML mark-up. I edited the closing <div> tags and got everything to work ask expected.

For your convenience I prepared a small sample: http://jsbin.com/isuviq/2/edit
I hope this will help.

Regards,
Alexander Valchev
Telerik

[Quest Resource Management]

Thanks Sir,,,