All Components
Theme

Themes

    MVVM / Style binding

    One Big Orange Spot.

    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);
            

    HTML5/JavaScript source

    API Reference
    • style.html
    • Widget configuration

    Support & learning resources