View source code:
<div id="target" data-bind="style: {
backgroundColor: selectedBackground,
color: selectedColor,
borderStyle: selectedBorderStyle,
borderColor: selectedBorderColor,
webkitBorderRadius: selectedBorderRadius,
mozBorderRadius: selectedBorderRadius,
borderRadius: selectedBorderRadius
}">
One Big Orange Spot.
</div>
<ul>
<li>
Color: <select data-text-field="name" data-value-field="hex" data-bind="source: colors, value: selectedColor"></select>
</li>
<li>
<label>Background color: <select data-text-field="name"
data-value-field="hex" data-bind="source: colors, value: selectedBackground"></select></label>
</li>
<li>
<label>Border color: <select data-text-field="name"
data-value-field="hex" data-bind="source: colors, value: selectedBorderColor"></select></label>
</li>
<li>
<label>Border style: <select data-text-field="name"
data-value-field="value" data-bind="source: borders, value: selectedBorderStyle"></select></label>
</li>
<li>
<label>Border radius: <select data-bind="source: radii, value: selectedBorderRadius"></select></label>
</li>
</ul>
View model source code:
var viewModel = kendo.observable({
selectedColor: "#8b0000",
selectedBorderRadius: "20px",
selectedBackground: "#ffd700",
selectedBorderStyle: "solid",
selectedBorderColor: "#ff8c00",
radii: [ "0px", "5px", "10px", "20px" ],
colors: [
{ name: "Dark Red", hex: "#8b0000" },
{ name: "Orange Red", hex: "#ff4500" },
{ name: "Dark Orange", hex: "#ff8c00" },
{ name: "Gold", hex: "#ffd700" }
],
borders: [
{ name: "Solid", value: "solid" },
{ name: "Dashed", value: "dashed" },
{ name: "Double", value: "double" },
{ name: "Dotted", value: "dotted" },
{ name: "Ridge", value: "ridge" },
{ name: "None", value: "none" }
]
});
kendo.bind($("#example"), viewModel);