Cannot get MultiSelect to retain values with MVVM

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

    Posted 29 Oct 2013 Link to this post

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

    Posted 29 Oct 2013 Link to this post

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


  3. Kendo UI is VS 2017 Ready
  4. Answer
    Stacey
    Stacey avatar
    55 posts
    Member since:
    Aug 2013

    Posted 29 Oct 2013 Link to this post

    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.
Back to Top