MultiSelect in DropdownList not working in Tabstrip.

3 posts, 0 answers
  1. Quest Resource Management
    Quest Resource Management avatar
    15 posts
    Member since:
    Oct 2012

    Posted 10 Jun 2013 Link to this post

    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.....
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 12 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
  4. Quest Resource Management
    Quest Resource Management avatar
    15 posts
    Member since:
    Oct 2012

    Posted 12 Jun 2013 Link to this post

    Thanks Sir,,,
Back to Top