Value Binding with remote data source

3 posts, 0 answers
  1. Chris
    Chris avatar
    2 posts
    Member since:
    Mar 2014

    Posted 05 Mar 2014 Link to this post

    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({
                    transport: {
                        read: {
                            url: WEB_SERVICE_URL + "activities",
                            dataType: "json"
                selectedActivity: "2"

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

    the service returns json:

    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:
              { id: 1, name: "Name1" },
              { id: 2, name: "Name2" },
              { id: 3, name: "Name3" }];

    Could anybody tell me, what's mistake?

  2. Alexander Valchev
    Alexander Valchev avatar
    2873 posts

    Posted 07 Mar 2014 Link to this post

    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.

    Alexander Valchev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Chris
    Chris avatar
    2 posts
    Member since:
    Mar 2014

    Posted 07 Mar 2014 in reply to Alexander Valchev Link to this post

    Hi Alexander,

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

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

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

    thanks for the advice
Back to Top