Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.common.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.rtl.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.515/styles/kendo.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.dataviz.default.min.css" rel="stylesheet" type="text/css" />
<link href="http://cdn.kendostatic.com/2013.1.514/styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2013.1.514/js/kendo.all.min.js"></script>
​
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
   <div id="example" class="k-content">
    <div class="current-state">
        <h4>Current view model state:</h4>
        <pre>
    {
        Name: <span data-bind="text: name"></span>,
        M53675 Value: <span data-bind="text:containers.C12409.rows[0].columns.M53675.value"></span>
       
    }
        </pre>
    </div>
    <div class="registration">
        <form>
            <ul>
                <li><label for="fname">Name:</label><input id="fname" data-bind="value: name" /></li>
              <li><label for="lname">M53675 Value:</label><input id="lname" data-bind="value: containers.C12409.rows[0].columns.M53675.value" /></li>               
            </ul>          
        </form>
    </div>   
    <script>
        $(document).ready(function() {
            var viewModel = kendo.observable({
                    "name": "Contact (Insured)",
        "ID": "4123",
        "reference": null,
        "rootContainerID": 12408,
        "instanceInfo": {
            "entityID": 419,
            "instanceID": -1,
            "instanceStateMemberID": 2235
        },
        "editID": "c7498a67-748d-4ed8-9e35-6cc39b9295fb",
        "hasChangedData": false,
        "containers": {         
            "C12409": {             
                "rowCount": 1,
                "rows": [{
                    "instanceInfo": {
                        "entityID": 419,
                        "instanceID": -1,
                        "instanceStateMemberID": 2235
                    },
                    "columns": {
                        "M53675": {
                            "memberID": 53675,
                            "name": "Contact Type",
                            "value": 2,
                            "description": "Organisation",
                            "isDisabled": false,
                            "isMandatory": true,
                            "isValid": true,
                            "isVisible": true,
                            "isTargetMandatory": false,
                            "isChangedThisUpdate": false
                        }
                    }
                }]
            }
            }
            });
​
          viewModel.bind("change", function(e){alert("changed -" + e.field);});
            kendo.bind($("#example"), viewModel);
        });
    </script>
​
  
​
    <style scoped>
        .current-state {
            float: right;
            width: 200px;
            margin: 60px 85px 0 0
        }
​
        .current-state pre {
            font-size: 12px;
        }
​
        .registration h3 {
            font-size: 2.5em;
            color: #787878;
            border-bottom: 1px solid #ccc;
        }
​
        .registration {
            float: left;
            clear: left;
            width: 370px;
            height: 131px;
            margin: 30px 0 30px 30px;
            padding: 60px 0 30px 30px;
            background: url('../../content/web/mvvm/regForm.png') transparent no-repeat 0 0;
        }
​
        .registration ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
​
        .registration li {
            height: 28px;
            vertical-align: middle;
            color: #000;
        }
​
        .registration ul label {
            display: inline-block;
            width: 100px;
            text-align: right;
            padding-right: 5px;
            color: #000;
        }
​
        .registration label {
            color: #000;
        }
​
        .registration ul input {
            border: 1px solid #ddd;
        }
​
        .registration button {
            float: right;
            margin-right: 85px;
        }
​
        .confirmation {
            float: left;
            clear: left;
            width: 274px;
            height: 65px;
            margin: 30px 0 30px 30px;
            padding: 20px 30px;
            background: url('../../content/web/mvvm/confirm.png') transparent no-repeat 0 0;
            text-align: center;
        }
​
        .code-details > ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
​
        .code-details li
        {
            height: 26px;
            line-height: 22px;
            vertical-align: middle;
        }
​
        .code-details {
            padding: 1em;
        }
​
        .source {
            clear: both;
        }
    </style>
</div>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers