Cannot get MultiSelect to retain values with MVVM

[Stacey]

I am using the Multiselect widget along with Kendo MVVM. The tags are stored in an object that is saved to the database, this works fine when creating things.

But when retrieving them is a different story. I can add tags again, that is also fine, but when the item loads in from the database, it won't properly show the existing tag items that belong in the multiselect. So let's say I pull up an item with two tags. . { "Id": "tags/1", "Name" : "C#" }{ "Id" : "tags/2", "Name" : "Kendo UI" } .. these are not persisted into the multi-select box.

$widget = $element.kendoMultiSelect({
    dataTextField: "Name",
    dataValueField: "Id",
    // define a custom template
    dataSource: {
        transport: {
            read: {
                dataType: "json",
                url: $url
            }
        }
    },
    open: function (e) {
        this.list.addClass("tag-cloud");
    },
    close: function (e) {
        //e.preventDefault();
    },
    value: viewModel.get("Tags")
}).data("kendoMultiSelect");

<div style="width: 500px;">
    <h2 class="fg-color-blueDeep">Tags</h2>
    <div class="input-control" data-for="tags">
        <select id="tags" multiple="multiple"
                data-placeholder="Select Tags..."
                class="dark tag-cloud"
                data-bind="value: Tags"
                style="width: 500px;"></select>
    </div>
</div>

[Stacey]

I will add, I have tried to use the `value` method, it doesn't seem to work...

$widget = $element.kendoMultiSelect({
    dataTextField: "Name",
    dataValueField: "Id",
    // define a custom template
    itemTemplate: $('#editing-tags-template').html(),
    dataSource: {
        transport: {
            read: {
                dataType: "json",
                url: $url
            }
        }
    },
    open: function (e) {
        this.list.addClass("tag-cloud");
    },
    close: function (e) {
        //e.preventDefault();
    },
}).data("kendoMultiSelect");

$widget.value(["1", "2"]);

The item that populates the view model occurs on the change event of a grid, like this..

$widget = $target.kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: $url,
                dataType: "json",
                type: 'GET'
            }
        },
        schema: {
            total: "total",
            data: "data"
        },
        page: 0,
        pageSize: 15,
        take: 15,
        serverPaging: true,
        serverFiltering: true,
        type: "aspnetmvc-ajax"
    },
    pageable: {
        refresh: true,
        pageSizes: true
    },
    selectable: "row",
    change: function (e) {
        // get the selected row from the grid
        var selected = this.select();
        // get the data from the selected row
        var data = this.dataItem(selected);
        // convert the selected data into JSON
        viewModel.Constructor(data);

        //var widget = widgets.tags.data("kendoMultiSelect");
        //widget.value(["1", "2"]);
    },
    columns: [
        {
            field: "Id",
            width: 25,
            title: "Identity"
        },
        {
            field: "Name",
            width: 90,
            title: "Name"
        }
    ]
});

[Stacey]

Please ignore this. The problem was my own incompetence, not an issue with Kendo. I had the following code..

var viewModel = kendo.observable({
    Id: null,
    Name: null,
    Consumable: false,
    Equipable: false,
    Mutations: [],
    Tags: [],

    Constructor: function ($data) {
        this.set("Name", $data.Name);
        this.set("Id", $data.Id);
        this.set("Consumable", $data.Consumable);
        this.set("Equipable", $data.Equipable);
        this.set("Mutations", $data.Mutations);
    }
});

And then the code to populate the view model later was ...

change: function (e) {
    // get the selected row from the grid
    var selected = this.select();
    // get the data from the selected row
    var data = this.dataItem(selected);
    // convert the selected data into JSON
    viewModel.Constructor(data);
},

The problem here is that the Tags array was on my retrieved data, but the constructor function I made did not set it. So it never got set. Thus it is understandable why Kendo didn't recognize it.

Because I am an idiot.