View source code:
<table>
<tr>
<th>Widget</th>
</tr>
<tr>
<td>
<h4>AutoComplete</h4>
<input data-role="autocomplete" data-text-field="name" data-bind="source: colors, value: autoCompleteValue"/>
</td>
</tr>
<tr>
<td>
<h4>ComboBox</h4>
<select data-role="combobox"
data-text-field="name" data-value-field="value" data-bind="source: colors, value: comboBoxValue"></select>
</td>
</tr>
<tr>
<td>
<h4>DatePicker</h4>
<input data-role="datepicker" data-bind="value: datePickerValue" />
</td>
</tr>
<tr>
<td>
<h4>DropDownList </h4>
<select data-role="dropdownlist"
data-text-field="name" data-value-field="value" data-bind="source: colors, value: dropDownListValue"></select>
</td>
</tr>
<tr>
<td>
<h4>Grid</h4>
<div data-role="grid"
data-sortable="true" data-editable="true"
data-columns='["Name", "Price", "UnitsInStock", {"command": "destroy"}]'
data-bind="source: gridSource"></div>
</td>
</tr>
<tr>
<td>
<h4>NumericTextBox</h4>
<input data-role="numerictextbox" data-format="c" data-bind="value: numericTextBoxValue" />
</td>
</tr>
<tr>
<td>
<h4>Slider</h4>
<input data-role="slider" data-bind="value: sliderValue" />
</td>
</tr>
<tr>
<td>
<h4>TimePicker</h4>
<input data-role="timepicker" data-bind="value: timePickerValue" />
</td>
</tr>
<tr>
<td>
<h4>TabStrip</h4>
<div data-role="tabstrip" data-animation="false">
<ul>
<li class="k-state-active">First</li>
<li>Second</li>
</ul>
<div>
<h4>First page:</h4>
Pick a time: <input data-role="timepicker" data-bind="value: timePickerValue"/>
</div>
<div>
<h4>Second page:</h4>
Time is: <span data-bind="text: displayTimePickerValue"></span>
</div>
</div>
</td>
</tr>
<tr>
<td>
<h4>TreeView</h4>
<div data-role="treeview"
data-animation="false"
data-drag-and-drop="true"
data-bind="source: treeviewSource"></div>
</td>
</tr>
</table>
View model source code:
var viewModel = kendo.observable({
autoCompleteValue: null,
colors: [
{ name: "Red", value: "#f00" },
{ name: "Green", value: "#0f0" },
{ name: "Blue", value: "#00f" }
],
displayAutoCompleteValue: function() {
var autoCompleteValue = this.get("autoCompleteValue");
return kendo.stringify(autoCompleteValue);
},
comboBoxValue: null,
displayComboBoxValue: function() {
var comboBoxValue = this.get("comboBoxValue");
return kendo.stringify(comboBoxValue);
},
datePickerValue: new Date(),
displayDatePickerValue: function() {
var datePickerValue = this.get("datePickerValue");
return kendo.toString(datePickerValue, "yyyy-MM-dd");
},
dropDownListValue: null,
displayDropDownListValue: function() {
var dropDownListValue = this.get("dropDownListValue");
return kendo.stringify(dropDownListValue);
},
gridSource: [
{ Name: "Chai", Price: 18.00, UnitsInStock: 39 },
{ Name: "Chang", Price: 19.00, UnitsInStock: 17 },
{ Name: "Mishi Kobe Niku", Price: 97.00, UnitsInStock: 29 }
],
displayGridSource: function() {
return stringify(this.get("gridSource"));
},
numericTextBoxValue: 10,
displayNumericTextBoxValue: function() {
var numericTextBoxValue = this.get("numericTextBoxValue");
return kendo.toString(numericTextBoxValue, "c");
},
timePickerValue: new Date(),
displayTimePickerValue: function() {
var timePickerValue = this.get("timePickerValue");
return kendo.toString(timePickerValue, "hh:mm:ss");
},
treeviewSource: kendo.observableHierarchy([
{ text: "Andrew", expanded: true, items: [
{ text: "Nancy" },
{ text: "Steve" }
] }
]),
displayTreeviewSource: function() {
return stringify(this.get("treeviewSource").toJSON());
}
});
viewModel.autoCompleteValue = viewModel.colors[1];
viewModel.dropDownListValue = viewModel.colors[0];
viewModel.comboBoxValue = viewModel.colors[0];
kendo.bind($("table"), viewModel);