I am using a Kendo MultiSelect for a "Tag Cloud" type thing. Tags look like this ... they are simple JSON.
The view model looks a lot like this ...
The javascript to create the multi-select looks like this ...
Where k-tag-cloud is a custom CSS style, this isn't giving me any trouble.
The HTML that this applies to is like this...
All of this works exactly as I expect. It appears like this on my screen, the behavior is normal, etc; I can select multiple tags, and when I save the item, they get saved without any extra code - just by being bound to the view model. If I retrieve an item, the tags list gets re-populated correctly with the selected tags.
However there is a template that is being used to draw the list to the screen in a different part of the page, that looks like this ..
And then this is the actual template that I call.
Now what happens is that once a tag gets added, it draws to this section, but then it stays there - it will not "go away" if I remove the tag. So ..
If I start out and select "Weapon", the draw looks like this ..
Weapon
If I remove "Weapon", it removes it fine. But if I go above 1 tag ... it starts to repeat itself for each item. So if I select "Weapon" and then "Slashing", I get...
Weapon
Slashing
Weapon
This continues in infinite amounts, each time I add a new tag.
{
Id:
"tags/weapon"
,
Name:
"Weapon"
,
Description:
"This item qualifies as a weapon in the game."
},
{
Id:
"tags/sword"
,
Name:
"Sword"
,
Description:
"This item qualifies as a sword in the game."
},
{
Id:
"tags/shield"
,
Name:
"Shield"
,
Description:
"This item qualifies as a shield in the game."
}
var
viewModel = kendo.observable({
Id:
null
,
Name:
null
,
Consumable:
false
,
Equipable:
false
,
Tags: [],
});
The javascript to create the multi-select looks like this ...
var
$tags = $(
"#tags"
).kendoMultiSelect({
dataTextField:
"Name"
,
dataValueField:
"Id"
,
itemTemplate: $(
'#editing-tags-template'
).html(),
dataSource: {
transport: {
read: {
dataType:
"json"
,
url: url
}
}
},
open:
function
(e) {
this
.list.addClass(
"k-tag-cloud"
);
},
close:
function
(e) {
}
}).data(
"kendoMultiSelect"
);
The HTML that this applies to is like this...
<select id=
"tags"
multiple=
"multiple"
data-placeholder=
"Select Tags..."
class=
"dark k-tag-cloud"
data-bind=
"value: Tags"
style=
"width: 500px;"
></select>
However there is a template that is being used to draw the list to the screen in a different part of the page, that looks like this ..
<
h2
>Preview</
h2
>
<
div
style
=
"border: dashed 2px black;"
>
<
div
style
=
"padding: 8px;"
>
<
h3
data-bind
=
"text: Name"
style
=
"margin: auto;"
></
h3
>
<
h5
data-bind
=
"visible: Equipable"
style
=
"margin: auto;"
>Equipable</
h5
>
<
h5
data-bind
=
"visible: Consumable"
style
=
"margin: auto;"
>Consumable</
h5
>
<
div
data-template
=
"templates-admin-prototype-tags-preview"
data-bind
=
"source: Tags"
></
div
>
</
div
>
</
div
>
<
script
type
=
"text/x-kendo-template"
id
=
"templates-admin-prototype-tags-preview"
>
<
div
class
=
"k-prototype-tag"
>${ Name }</
div
>
</
script
>
If I start out and select "Weapon", the draw looks like this ..
Weapon
If I remove "Weapon", it removes it fine. But if I go above 1 tag ... it starts to repeat itself for each item. So if I select "Weapon" and then "Slashing", I get...
Weapon
Slashing
Weapon
This continues in infinite amounts, each time I add a new tag.