Strange "pseudo caching" or repetition in MutliSelect

[Stacey]

I am using a Kendo MultiSelect for a "Tag Cloud" type thing. Tags look like this ... they are simple JSON.

{
    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."
}

The view model looks a lot like this ...

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");

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...

<select id="tags" multiple="multiple"
        data-placeholder="Select Tags..."
        class="dark k-tag-cloud"
        data-bind="value: Tags"
        style="width: 500px;"></select>

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 ..

<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>

And then this is the actual template that I call.

<script type="text/x-kendo-template" id="templates-admin-prototype-tags-preview">
    <div class="k-prototype-tag">${ Name }</div>
</script>

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.

[Daniel]

Hi,

Thank you for bringing our attention to this problem. I reproduced it on my side and we will look into it. A possible workaround for now is to trigger the change event for the Tags field when the multiselect value is changed:

var $tags = $("#tags").kendoMultiSelect({
    change: function(){
      viewModel.trigger("change", {field: "Tags"});
    },

Regards,
Daniel
Telerik

[Stacey]

Thank you for looking into this. I am glad to know I am not just crazy.

[Daniel]

Hello again,

This issue is now fixed and the changes are available in the latest official release which you can download from your account. I have also updated your Telerik points for the bug report.

Regards,
Daniel
Telerik