Kendo MVVM Dropdown - How to set initial value based on other data?

0
votes

I have the following html for a Kendo MVVM DropDownList:

                <select id="responseTypeDDL"
                    data-role="dropdownlist"
                    data-text-field="SystemResponseTypeCode"
                    data-value-field="SystemResponseTypeId"
                    data-bind="value: selectedSystemResponseTypeCode, source: responseTypes">
                </select>

This is my view model:

        SC.ViewModels.Reference.ResponseTypeDataSource.read();

        var responseTypeDDL = kendo.observable({
            responseTypes: SC.ViewModels.Reference.ResponseTypeDataSource,
            selectedSystemResponseTypeCode: null,
            setSelectedSystemResponseTypeCode: function (code) {
                this.selectedSystemResponseTypeCode = code;
            },
        });

        kendo.bind($("#responseTypeDDL"), responseTypeDDL);

        // after reading data, I call the method to set the selected value like this:
        self.ResponseTypeDDL.setSelectedSystemResponseTypeCode(results.code);

The ResponseTypeDataSource.read() method returns a list of "XML", "JSON". This is the SystemResponseTypeCode field. I also read another data item from the database and check its response type. Let's say it is "JSON". How do I set the drop down to have "JSON" selected?

2
kendo-uikendo-dropdownkendo-mvvm
Can you please update the question with code where you have tried setting the value of the Dropdown? – D_Learning
I haven't tried to set the value. I don't know where to begin... – Scott
You can set the same way you have set your Dropdown, if you want to bind the view after the details are loaded. For example see the example: jsfiddle.net/D_Learning/m9W3g – D_Learning
I added value to data-bind and also the setSelectedSystemResponseTypeCode function, but a new value is never set as the selected one. – Scott
Try using the example flow and code shown in jsbin.com/eqimiz/176/edit which is provided and explained by Telerik Admin at telerik.com/forums/… – D_Learning

2 Answers

2
votes

First of all this part seems to be wrong

setSelectedSystemResponseTypeCode: function (code) {
    this.selectedSystemResponseTypeCode = code;
},

You should make sure to call set() method while modifying an observed variable, otherwise it might not update the bindings:

this.set("selectedSystemResponseTypeCode", code);

And for your actual question

You need to set data-value-primitive="true" in order to work with just the id (Kendo Docs) (Please note changes below, value: selectedSystemResponseTypeId)

<select id="responseTypeDDL"
    data-role="dropdownlist"
    data-text-field="SystemResponseTypeCode"
    data-value-field="SystemResponseTypeId"
    data-value-primitive="true"
    data-bind="value: selectedSystemResponseTypeId, source: responseTypes">
</select>

SC.ViewModels.Reference.ResponseTypeDataSource.read();

var responseTypeDDL = kendo.observable({
    responseTypes: SC.ViewModels.Reference.ResponseTypeDataSource,
    selectedSystemResponseTypeCode: null,
    selectedSystemResponseTypeId: null,
    setSelectedSystemResponseTypeId: function (id) {
        this.set("selectedSystemResponseTypeId", id);
    },
});

kendo.bind($("#responseTypeDDL"), responseTypeDDL);

// Get your id
var id = ...    
responseTypeDDL.setSelectedSystemResponseTypeId(id);

Working example: http://dojo.telerik.com/AbIm/8

0
votes

I've managed to manually set the value in dropdownlist without resorting to data-value-primitive="true" because i need to access the selected value and display other fields.

Here's the solution:

var id = 1004;
var dataItem = responseTypeDDL.responseTypes.get(id); //get the id in your datasource
responseTypeDDL.set("selectedsystemResponse", dataItem);