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>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
<span class="cloudy"> </span>
</div>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Sydney.</p>
</div>
<span class="rainy"> </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} #" /> #= {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.....
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>ºC</span></h2>
<p>Sunny weather in New York.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>21<span>ºC</span></h2>
<p>Sunny weather in London.</p>
</div>
<span class="sunny"> </span>
</div>
<div>
<div class="weather">
<h2>16<span>ºC</span></h2>
<p>Cloudy weather in Moscow.</p>
</div>
<span class="cloudy"> </span>
</div>
<div>
<div class="weather">
<h2>17<span>ºC</span></h2>
<p>Rainy weather in Sydney.</p>
</div>
<span class="rainy"> </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} #" /> #= {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.....