Test Multiple Bind

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.metro.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id='container'>
    <input data-bind='value:person.Name' class='k-textbox'/>
    <input id='lstDisease' class='lstDisease' 
        data-bind='source:diseaseDS, value:person.Disease, events:{change:bindDisease}'
            data-role='combobox' data-text-field='Name' data-value-field='ID' data-auto-bind='false'
            data-filter='false' data-placeholder='Choose a Disease'/>
    
    <div id='diseaseContainer'>
        <div id='grdMetrics'></div>
    <div>
</div>

JavaScript

var viewModelPatient = new kendo.observable({
    person: {
        Name: 'Fred',
        Disease: null
    },
    diseaseDS: new kendo.data.DataSource({
        data: [{
            ID: 1,
            Name: 'Diabetes',
            Metrics: [{
                ID: 1,
                Name: 'Blood Pressure',
                Weight: 80},
            {
                ID: 2,
                Name: 'Breaths per Minute',
                Weight: 22}]},
        {
            ID: 3,
            Name: 'Obesity',
            Metrics: [{
                ID: 4,
                Name: 'Heart Rate(bpm)',
                Weight: 100}]}],
        schema: {
            model: {
                id: 'ID'
            }
        }
    }),
    bindDisease: function() {
        //we want to make sure they actually selected a value
        //if they did not then we should clear out the drop down and the grid
        if (viewModelPatient.person.Disease && typeof viewModelPatient.person.Disease == 'string') {
            viewModelPatient.person.set('Disease', null);
        }

        var viewModelDisease = new kendo.observable({
            disease: viewModelPatient.person.Disease
        });

        //kendo.bind($('#diseaseContainer'), viewModelDisease); no need to use the bind method

        $('#grdMetrics').kendoGrid({
            dataSource: new kendo.data.DataSource({
                data: viewModelDisease.get('disease.Metrics').toJSON(),
                schema: {
                    model: {
                        id: "ID",
                        fields: {
                            ID: {
                                editable: false,
                                nullable: true
                            },
                            Name: {
                                editable: false
                            },
                            Weight: {
                                editable: true,
                                type: 'number',
                        ...