All Components
Theme

Themes

    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