All Components
Change Theme

SASS Themes (beta)

    LESS 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