All Components
Change Theme

SASS Themes (beta)

    LESS Themes

      SASS Theme Builder

      Create new or customize SASS themes
      Launch Theme Builder

      MVVM / Attribute binding

      Src

      Alt

      Title

      <img src="" alt="" title="" />

      View source code:

      <div class="demo-section k-content">
          <img data-bind="attr: { src: imageSrc, alt: imageAlt, title: imageTitle }" />
          <h4 style="padding-top: 2em;">Src</h4>
          <select data-text-field="name" data-value-field="url" data-bind="source: food, value: imageSrc" style="width: 100%;" ></select>
          <h4 style="padding-top: 2em;">Alt</h4>
          <input type="textbox" data-bind="value: imageAlt" class="k-textbox" style="width: 100%;" />
          <h4 style="padding-top: 2em;">Title</h4>
          <input type="textbox" data-bind="value: imageTitle" class="k-textbox" style="width: 100%;" />
      </div>
              

      View model source code:

      var viewModel = kendo.observable({
          imageSrc: null,
          food: [
              { name: "Mishi Kobe Niku", url: "../content/web/foods/9.jpg" },
              { name: "Chef Anton's Cajun Seasoning", url: "../content/web/foods/4.jpg" },
              { name: "Queso Manchego La Pastora", url: "../content/web/foods/12.jpg" },
          ],
          imageAlt: "Alt attribute value",
          imageTitle: "Title attribute value"
      });
      
      viewModel.imageSrc = viewModel.food[0].url;
      
      kendo.bind($("#example"), viewModel);
              

      HTML5/JavaScript source

      API Reference
      • attributes.html
      • Widget configuration

      Support & learning resources