Kendo: Binding cheat sheet

Varies by type

BUTTON
<button data-bind="text: toggleButtonText, click: toggleButtonClick"></button>

DIV
<div data-bind="text: someText"></div>

<div data-bind="html: rawHtml"></div>


INPUT
<input type="button" style="float: left" data-bind="value: someField, click: toggleChildrenVisibilty" />
<input type="checkbox" style="float: left" data-bind="checked: itemIsLocked" />

SPAN
<span data-bind="text: originalAmount"></span>

SELECT
<select data-value-field="id" data-text-field="name" data-bind="value: selectedProduct, source: products">
</select>

<script>
   var viewModel = kendo.observable({ selectedProduct: null, products:
     [ { id: 1, name: "Coffee" }, { id: 2, name: "Tea" }, { id: 3, name: "Juice" } ] });

   viewModel.selectedProduct = viewModel.products[1];
   kendo.bind($("select"), viewModel);
</script>

Reference
• From http://docs.telerik.com/kendo-ui/getting-started/framework/mvvm/bindings/value


Template
<div data-template="items-template" data-bind="source: items"></div>

TEXTAREA
<textarea id="note" data-bind="value: myNote" rows="3"></textarea>