This is a migrated thread and some comments may be shown as answers.

Cannot get MultiSelect to retain values with MVVM

2 Answers 143 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Stacey
Top achievements
Rank 1
Stacey asked on 29 Oct 2013, 09:31 PM
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>

2 Answers, 1 is accepted

Sort by
0
Stacey
Top achievements
Rank 1
answered on 29 Oct 2013, 09:42 PM
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"
        }
    ]
});


0
Accepted
Stacey
Top achievements
Rank 1
answered on 29 Oct 2013, 10:28 PM
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.
Tags
MultiSelect
Asked by
Stacey
Top achievements
Rank 1
Answers by
Stacey
Top achievements
Rank 1
Share this question
or