Strange "pseudo caching" or repetition in MutliSelect

4 posts, 0 answers
  1. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 31 Oct 2013 Link to this post

    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.




  2. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 04 Nov 2013 Link to this post

    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
    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. Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 04 Nov 2013 Link to this post

    Thank you for looking into this. I am glad to know I am not just crazy.
  5. Daniel
    Admin
    Daniel avatar
    2117 posts

    Posted 20 Nov 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top
Kendo UI is VS 2017 Ready