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

Value Binding with remote data source

2 Answers 223 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Chris
Top achievements
Rank 1
Chris asked on 05 Mar 2014, 11:07 PM
Hi everybody,

i am starting to use kendo ui mobile and i have a problem.
I am trying to link a html select to a remote datasource.

my html:
        <select id="fromto-activity" data-value-field="id" data-text-field="name" data-bind="source: activitiesDataSource, value: selectedActivity"></select>

my javascript:
        var viewModel = kendo.observable({
            activitiesDataSource:new kendo.data.DataSource({
                transport: {
                    read: {
                        url: WEB_SERVICE_URL + "activities",
                        dataType: "json"
                    }
                }
            }),
            selectedActivity: "2"
        });

        kendo.bind($("#fromto-activity"), viewModel);

the service returns json:
        [{"id":1,"name":"Name1"},{"id":2,"name":"Name2"}]

The select element is filled with the data of the service.

The Problem is, that the value selectedActivity isn't bound to the select element.

When I add data-role="dropdownlist", everything works fine. But I don't want that, because I want to develop a mobile app and want to use the html select element with his styling.

When I don't use a remote data source, then everything works fine too. For example with this datasource:
     activitiesDataSource:[
          { id: 1, name: "Name1" },
          { id: 2, name: "Name2" },
          { id: 3, name: "Name3" }];

Could anybody tell me, what's mistake?
                              ],

2 Answers, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 07 Mar 2014, 04:03 PM
Hi Chris,

Your code is correct but currently the HTML value binding does not work with dataSource. The behavior which you observe is caused by the fact that value binding is evaluated before source is populated and as a result at the time when value is set the <select> element does not have options rendered.

The best solution would be to retrieve the data via separate Ajax request and on its success event to set the activitiesDataSource and selectedActivity. In this way the pre-selected value will be set after the source.

Regards,
Alexander Valchev
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Chris
Top achievements
Rank 1
answered on 07 Mar 2014, 04:43 PM
Hi Alexander,

thank you for your answer.
I solved it now as follows:

<select id="fromto-activity" data-value-field="id"
    data-text-field="name"
    data-bind="source: activitiesDataSource, value: selectedActivityId, events: {change: onChange}">
</select>

$(document).ready(function () {
    var activitiesDataSource = [];
     
    var viewModel = kendo.observable({
        activitiesDataSource : activitiesDataSource,
        selectedActivityId: null,
        onChange: function(e) {
            console.log(this.get("selectedActivityId"));
        }
    });
     
    $.ajax({
        type: 'GET',               
        url: WEB_SERVICE_URL + "activities",
        dataType : "json",
        context: this,
        success: function(data) {
            console.log(data);
            viewModel.set("activitiesDataSource", data);
            viewModel.set("selectedActivityId", 3);
        }
    });
     
    kendo.bind($("select"), viewModel);
});

thanks for the advice
Tags
MVVM
Asked by
Chris
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Chris
Top achievements
Rank 1
Share this question
or