jube-fork/Jube.App/wwwroot/kendo/examples/mvvm/elements.html

<!DOCTYPE html>
<html>
<head>
    <title>HTML element binding</title>
    <meta charset="utf-8">
    <link href="../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../styles/kendo.rtl.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.min.css" rel="stylesheet">
    <link href="../../styles/kendo.default.mobile.min.css" rel="stylesheet">
    <script src="../../js/jquery.min.js"></script>
    <script src="../../js/jszip.min.js"></script>
    <script src="../../js/kendo.all.min.js"></script>
    <script src="../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example">
    <div class="demo-section k-content wide">
        <div>
            <ul class="fieldlist">
                 <li><h4>Text</h4> <input type="text" data-bind="value: textValue" class="k-textbox" /></li>
                 <li><h4>Text with update on keyup event</h4> <input type="text" data-value-update="keyup" data-bind="value: textValue" class="k-textbox" /></li>
                 <li><h4>Textarea</h4> <textarea data-bind="value: textareaValue" class="k-textbox" style="height: 40px; width: 140px;"></textarea></li>
                 <li><h4>Checkbox</h4>
                     <label>
                         <input type="checkbox" data-bind="checked: checkboxValue" />Check
                     </label>
                 </li>
            </ul>
        </div>
        <div>
            <ul class="fieldlist">
                 <li><h4>Radio</h4>
                     <label>
                         <input type="radio" name="fruit" value="Apple"
                                data-bind="checked: radioValue" />Apple
                     </label>
                     <label>
                         <input type="radio" name="fruit" value="Banana"
                                data-bind="checked: radioValue" />Banana
                     </label>
                     <label>
                         <input type="radio" name="fruit" value="Orange"
                                data-bind="checked: radioValue" />Orange
                     </label>
                 </li>
                 <li><h4>Checkbox list</h4>
                     <label>
                         <input type="checkbox" value="Apple"
                                data-bind="checked: checkboxListValue" />Apple
                     </label>
                     <label>
                         <input type="checkbox" value="Banana"
                                data-bind="checked: checkboxListValue" />Banana
                     </label>
                     <label>
                         <input type="checkbox" value="Orange"
                                data-bind="checked: checkboxListValue" />Orange
                     </label>
                 </li>
                 <li><h4>Select</h4> <select data-bind="source: fruits, value: selectValue" style="width: 147px;"></select></li>
                 <li><h4>Multiple select</h4> <select multiple data-bind="source: fruits, value: multipleSelectValue" style="width: 147px;"></select></li>
            </ul>
        </div>
        <div>
            <h4>Current view model state</h4>
            <pre class="prettyprint">
{
    textValue: <span data-bind="text: textValue"></span>,
    textareaValue: <span data-bind="text: textareaValue"></span>,
    checkboxValue: <span data-bind="text: checkboxValue"></span>,
    radioValue: <span data-bind="text: radioValue"></span>,
    checkBoxListValue: [<span data-bind="text: displayCheckBoxListValue"></span>],
    selectValue: <span data-bind="text: selectValue"></span>,
    multipleSelectValue: [<span data-bind="text: displayMultipleSelectValue"></span>]
}
            </pre>
        </div>
    </div>
    
    <script>
        $(document).ready(function() {
            var viewModel = kendo.observable({
                textValue: "Text value",
                textareaValue: "Textarea value",
                checkboxValue: false,
                radioValue: "Apple",
                checkboxListValue: ["Apple"],
                multipleSelectValue: ["Apple"],
                fruits:["Apple", "Banana", "Orange"],
                selectValue: "Apple",
                displayCheckBoxListValue: function() {
                    return this.get("checkboxListValue").join(", ");
                },
                displayMultipleSelectValue: function() {
                    return this.get("multipleSelectValue").join(", ");
                }
            });

            kendo.bind($("div.demo-section"), viewModel);
        });
    </script>
    <div class="box wide">
        <h4>View source code:</h4>
        <div class="code-details">
<pre class="prettyprint">
    &lt;div class=&quot;demo-section k-content wide&quot;&gt;
        &lt;div&gt;
            &lt;ul class=&quot;fieldlist&quot;&gt;
                 &lt;li&gt;&lt;h4&gt;Text&lt;/h4&gt; &lt;input type=&quot;text&quot; data-bind=&quot;value: textValue&quot; class=&quot;k-textbox&quot; /&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;h4&gt;Text with update on keyup event&lt;/h4&gt; &lt;input type=&quot;text&quot; data-value-update=&quot;keyup&quot; data-bind=&quot;value: textValue&quot; class=&quot;k-textbox&quot; /&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;h4&gt;Textarea&lt;/h4&gt; &lt;textarea data-bind=&quot;value: textareaValue&quot; class=&quot;k-textbox&quot; style=&quot;height: 40px; width: 140px;&quot;&gt;&lt;/textarea&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;h4&gt;Checkbox&lt;/h4&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;checkbox&quot; data-bind=&quot;checked: checkboxValue&quot; /&gt;Check
                     &lt;/label&gt;
                 &lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;ul class=&quot;fieldlist&quot;&gt;
                 &lt;li&gt;&lt;h4&gt;Radio&lt;/h4&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;Apple&quot;
                                data-bind=&quot;checked: radioValue&quot; /&gt;Apple
                     &lt;/label&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;Banana&quot;
                                data-bind=&quot;checked: radioValue&quot; /&gt;Banana
                     &lt;/label&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;radio&quot; name=&quot;fruit&quot; value=&quot;Orange&quot;
                                data-bind=&quot;checked: radioValue&quot; /&gt;Orange
                     &lt;/label&gt;
                 &lt;/li&gt;
                 &lt;li&gt;&lt;h4&gt;Checkbox list&lt;/h4&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;checkbox&quot; value=&quot;Apple&quot;
                                data-bind=&quot;checked: checkboxListValue&quot; /&gt;Apple
                     &lt;/label&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;checkbox&quot; value=&quot;Banana&quot;
                                data-bind=&quot;checked: checkboxListValue&quot; /&gt;Banana
                     &lt;/label&gt;
                     &lt;label&gt;
                         &lt;input type=&quot;checkbox&quot; value=&quot;Orange&quot;
                                data-bind=&quot;checked: checkboxListValue&quot; /&gt;Orange
                     &lt;/label&gt;
                 &lt;/li&gt;
                 &lt;li&gt;&lt;h4&gt;Select&lt;/h4&gt; &lt;select data-bind=&quot;source: fruits, value: selectValue&quot; style=&quot;width: 147px;&quot;&gt;&lt;/select&gt;&lt;/li&gt;
                 &lt;li&gt;&lt;h4&gt;Multiple select&lt;/h4&gt; &lt;select multiple data-bind=&quot;source: fruits, value: multipleSelectValue&quot; style=&quot;width: 147px;&quot;&gt;&lt;/select&gt;&lt;/li&gt;
            &lt;/ul&gt;
        &lt;/div&gt;
        &lt;div&gt;
            &lt;h4&gt;Current view model state&lt;/h4&gt;
            &lt;pre&gt;
{
    textValue: &lt;span data-bind=&quot;text: textValue&quot;&gt;&lt;/span&gt;,
    textareaValue: &lt;span data-bind=&quot;text: textareaValue&quot;&gt;&lt;/span&gt;,
    checkboxValue: &lt;span data-bind=&quot;text: checkboxValue&quot;&gt;&lt;/span&gt;,
    radioValue: &lt;span data-bind=&quot;text: radioValue&quot;&gt;&lt;/span&gt;,
    checkBoxListValue: [&lt;span data-bind=&quot;text: displayCheckBoxListValue&quot;&gt;&lt;/span&gt;],
    selectValue: &lt;span data-bind=&quot;text: selectValue&quot;&gt;&lt;/span&gt;,
    multipleSelectValue: [&lt;span data-bind=&quot;text: displayMultipleSelectValue&quot;&gt;&lt;/span&gt;]
}
            &lt;/pre&gt;
        &lt;/div&gt;
    &lt;/div&gt;
</pre>
        </div>

        <h4 style="padding-top: 2em;">View model source code:</h4>
        <div class="code-details">
<pre class="prettyprint">
var viewModel = kendo.observable({
    textValue: "Text value",
    textareaValue: "Textarea value",
    checkboxValue: false,
    radioValue: "Apple",
    checkboxListValue: ["Apple"],
    multipleSelectValue: ["Apple"],
    fruits:["Apple", "Banana", "Orange"],
    selectValue: "Apple",
    displayCheckBoxListValue: function() {
        return this.get("checkboxListValue").join(", ");
    },
    displayMultipleSelectValue: function() {
        return this.get("multipleSelectValue").join(", ");
    }
});

kendo.bind($(&quot;div.demo-section&quot;), viewModel);
</pre>
        </div>
    </div>
    <style>      
        .demo-section > div {
            float: left;
            margin-bottom: 2em;
        }
        .fieldlist {
            margin: 0 3em 0 0;
            padding: 0;
        }

        .fieldlist li {
            list-style: none;
            padding-bottom: 1.5em;
            text-align: left;
        }

        .prettyprint {
            background-color: #fff;
            border: 1px solid #ccc;
            overflow: auto;
            padding: 5px;
        }
    </style>
</div>


    
</body>
</html>