Extending kendo multiselect and working with MVVM

Question

I'm trying to extend a kendo multiselect so that it has a default data source as well as templates. It's all working except the pre-loaded values in the MVVM object. When I start updating the exented multiselect, the value of the MVVM gets updated, the initial items are just not pre-loaded:

kendo.ui.plugin(kendo.ui.MultiSelect.extend({
    init: function(element, options) {
        var ds = new kendo.data.DataSource({
            type: "json",
            serverFiltering: true,
            transport: {
                read: {
                    url: "/SecurityEntities",
                    dataType: "json"
                },
                parameterMap: function(data) {
                    return {
                        prefixText: '',
                        count: 5,
                        getUsers: true,
                        getGroups: false
                    };
                }
            },
            schema: {
                data: function(data) {
                    console.log($.parseJSON(data));
                    return $.parseJSON(data);
                }
            }
        });
        options = options == null ? {} : options;
        options.itemTemplate = "...";
        options.tagTemplate = "...";
        options.dataSource = ds;

        kendo.ui.MultiSelect.fn.init.call(this, element, options);
    },
    options: {
        name: 'EntityMultiSelect'
    }
}));

kendo.data.binders.widget.entitymultiselect = 
kendo.data.binders.widget.multiselect;

Then my html is:

<div data-bind="value: machine.Managers" data-role="entitymultiselect" 
     data-delay="400" data-animation="false" 
     data-placeholder="Select users to notify"></div>

And I am binding the whole container to the page's viewModel object.

I've seen other people have issues with this very problem and added the

kendo.data.binders.widget.entitymultiselect = 
    kendo.data.binders.widget.multiselect;

(And yes that does seem like a bug)

But it still doesn't work.

When there are already values in Machine.Managers, it doesn't load them. However, if I add values to the multiselect, they get added to Machine.Managers .

EDIT:

I've added a live example

Answer 1

At least in your demo it's a trivial problem: your data-value-field is wrong. As a result, the binder can't match the selected elements.

Instead of

<div data-role="entitymultiselect" 
 data-bind="value: selected" 
 data-value-field="ProductId"></div>

you need

<div data-role="entitymultiselect" 
 data-bind="value: selected" 
 data-value-field="ProductID"></div>

(working demo)

Since you're not defining the value field in the code in your question, it might be the same issue.