Kendo 多选在做出一些选择后启用摘要标记模式
Kendo multiselect enable summary tag mode after a few selections are made
我有一个 kendo 多选,我已使用此模板在摘要标记模式下设置:
# if (dataItems.length < 4) { #
# for (var idx = 0; idx < values.length; idx++) {#
#:dataItems[idx].Name#
# if (idx < values.length - 1) {#</li><li class="k-button" unselectable="on"> # } #
#}#
# } else {#
#:values.length# item(s) selected
# } #
这行得通,但很麻烦。它的作用是显示前几个条目,然后如果您选择四个或更多则将它们分组。此控件的 kendo ui 版本有一个 属性 允许我想在这里做的事情自动工作。 [kendoMultiSelectSummaryTag]="3"
但是 属性 似乎不可用,除非我找错了地方。有人可以告诉我如何使用它吗?我希望使用默认功能,因为它允许从选择显示中删除。
据我所知,没有一个简单的 属性 可以为您设置。幸运的是,解决方案并不太棘手。这个想法是将默认值 tagMode
设置为 'multiple'
(默认情况下是这样),然后创建一个事件处理程序,当项目数量超过您的阈值。
您的 multiselect 定义需要将事件处理程序附加到 change
事件:
@(Html.Kendo().MultiSelect()
.Name("multiSelect")
// other properties as needed of course
.Events(events => events
.Change("tagModeSet")
)
)
javascript 事件处理程序将如下所示:
function tagModeSet() {
// Get the currently selected values and tagMode
var selectedValues = this.value();
var currentTagMode = this.options.tagMode;
var newTagMode = currentTagMode;
// Test to see if you have crossed the threshold
if (selectedValues.length <= 3) {
newTagMode = "multiple";
} else {
newTagMode = "single"
}
// Update the tagMode if needed
if (newTagMode != currentTagMode) {
this.value([]);
this.setOptions({
tagMode: newTagMode
});
this.value(selectedValues);
}
}
请注意,更新tagMode
时先清除项目,然后调整模式,然后重新select项目。希望对您有所帮助。
我有一个 kendo 多选,我已使用此模板在摘要标记模式下设置:
# if (dataItems.length < 4) { #
# for (var idx = 0; idx < values.length; idx++) {#
#:dataItems[idx].Name#
# if (idx < values.length - 1) {#</li><li class="k-button" unselectable="on"> # } #
#}#
# } else {#
#:values.length# item(s) selected
# } #
这行得通,但很麻烦。它的作用是显示前几个条目,然后如果您选择四个或更多则将它们分组。此控件的 kendo ui 版本有一个 属性 允许我想在这里做的事情自动工作。 [kendoMultiSelectSummaryTag]="3"
但是 属性 似乎不可用,除非我找错了地方。有人可以告诉我如何使用它吗?我希望使用默认功能,因为它允许从选择显示中删除。
据我所知,没有一个简单的 属性 可以为您设置。幸运的是,解决方案并不太棘手。这个想法是将默认值 tagMode
设置为 'multiple'
(默认情况下是这样),然后创建一个事件处理程序,当项目数量超过您的阈值。
您的 multiselect 定义需要将事件处理程序附加到 change
事件:
@(Html.Kendo().MultiSelect()
.Name("multiSelect")
// other properties as needed of course
.Events(events => events
.Change("tagModeSet")
)
)
javascript 事件处理程序将如下所示:
function tagModeSet() {
// Get the currently selected values and tagMode
var selectedValues = this.value();
var currentTagMode = this.options.tagMode;
var newTagMode = currentTagMode;
// Test to see if you have crossed the threshold
if (selectedValues.length <= 3) {
newTagMode = "multiple";
} else {
newTagMode = "single"
}
// Update the tagMode if needed
if (newTagMode != currentTagMode) {
this.value([]);
this.setOptions({
tagMode: newTagMode
});
this.value(selectedValues);
}
}
请注意,更新tagMode
时先清除项目,然后调整模式,然后重新select项目。希望对您有所帮助。