data binding to model

2 posts, 0 answers
  1. Maxim Konstantinovski
    Maxim Konstantinovski avatar
    63 posts
    Member since:
    Mar 2007

    Posted 26 Nov 2012 Link to this post

    Hi,

    Is there a way to data bind selected value to model. I have try to use this, data, and self but it does not work. What does work is creating a nested object and binding it to a user selection.

    Below is what I am trying to do but it does not work:
    <div id="data-view" data-bind="source: this" data-template="data-view-template">
    </div>
    <script type="text/html" id="data-view-template">
        <div>
            <input id="search" data-role="autocomplete" data-bind="source: ds, value: this" data-text-field="Name" />
            <div data-bind="text: Value"></div>
        </div>
    </script>
    $(function () {
        var values = [{ Name: "Foo + Bar", Value: 1 }, { Name: "Foo - Bar", Value: 2 }, { Name: "Foo * Bar", Value: 3 }];
        var model = kendo.observable({
            Name: "???",
            Value: "???",
            ds:  values
        });
        kendo.bind($("#data-view"), model);
    });
    Below is what I can do but feels funny:
    <script type="text/html" id="data-view-template">
        <div>
            <input id="search" data-role="autocomplete" data-bind="source: ds, value: Person" data-text-field="Name" />
            <div data-bind="text: Person.Value"></div>
        </div>
    </script>
    var model = kendo.observable({
        Person: {
            Name: "???",
            Value: "???",
        },
        ds:  values
    });
    Thanks,
    Max
  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2875 posts

    Posted 29 Nov 2012 Link to this post

    Hello Maxim,

    It is not possible to bind the value to "this" keyword, because it refers to the View-Model itself.
    The AutoComplete value can be bound to a string or object property. Please check the following examples:
    <input id="search" data-role="autocomplete" data-bind="source: ds, value: Value" data-text-field="Name" />
     
    var model = kendo.observable({
        Name: "???",
        Value: "???", //or Value: null,
        ds:  values
    });
    kendo.bind($("#data-view"), model);

    When the value is bound to a string field it will be updated with the value of the AutoComplete's data-text-field. In the value of the widget is bound to object it will be updated with the selected dataItem.
    //case one
    model.Value: "Foo - Bar"
    //case two
    model.Value: { Name: "Foo - Bar", Value: 2 }

    I hope this information will help.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Kendo UI is VS 2017 Ready
Back to Top