Telerik UI for Windows 8 HTML

You can assign a template to RadDropDownList using its template property. This template will be used for all items rendered in the dropdown. It could be:

  • a WinJS.Binding.Template reference

  • a string template with binding expressions

  • a function returning a DOM element

In this article, you can find examples of the three possible scenarios.

From Q1 2014 on, RadDropDownList also exposes headerTemplate, that controls the look of the header of the list of suggestions, and valueTemplate that allows you to customize the look of the selected value.

Using WinJS.Binding.Template

You can use the native template as you would with any other control that uses templates. Declare the template in HTML, add bindings to it and then, in JavaScript, assign a reference to the control as a template for RadDropDownList:

Template Definition Copy imageCopy
<div id="dropDownListTemplate" data-win-control="WinJS.Binding.Template">
    <div id="container">
        <img src="#" style="width: 50px;"
            data-win-bind="alt: Title; src: SmallPictureUrl" />
        <h6 data-win-bind="innerText: Title"></h6>
    </div>
</div>
RadDropDownList Definition Copy imageCopy
var winTemplateDropDownCtrl = new Telerik.UI.RadDropDownList(document.getElementById("winTemplateDropDown"), {
    dataTextField: "Title",
    dataValueField: "Id",
    dataSource: {
        transport: {
            read: {
                url: "/js/movies.json",
                dataType: "json"
            }
        },
        schema: {
            data: "movies"
        }
    },
    template: document.getElementById("dropDownListTemplate").winControl,
    height: 330
});

Using String Template with Binding Expressions

Another option is to use a string template with binding expressions to provide more flexibility to the content. You can evaluate JavaScript expressions and based on the result, return different content. You can provide an identical template to the one shown in the previous section by using binding expressions.

JavaScript Copy imageCopy
var stringTemplateDropDownCtrl = new Telerik.UI.RadDropDownList(document.getElementById("stringTemplateDropDown"), {
    dataTextField: "Title",
    dataValueField: "Id",
    dataSource: {
        transport: {
            read: {
                url: "/js/movies.json",
                dataType: "json"
            }
        },
        schema: {
            data: "movies"
        }
    },
    template: "<div id='container'><img src='#=SmallPictureUrl#' style='width:50px' alt='ProductName'/><h6>#=Title#</h6></div>",
    height: 330
});

Using a Function Returning a DOM Element

The third possible approach is to set the template property value to point to a function which returns a DOM element for each item. This function can receive the data item for the current entry as an argument so that you can populate the template.

RadDropDownList Definition Copy imageCopy
var functionDropDown = new Telerik.UI.RadDropDownList(document.getElementById("functionDropDown"), {
    dataTextField: "Title",
    dataValueField: "Id",
    dataSource: {
        transport: {
            read: {
                url: "/js/movies.json",
                dataType: "json"
            }
        },
        schema: {
            data: "movies"
        }
    },
    template: getTemplate,
    height: 330
});
Template Function Copy imageCopy
function getTemplate(item) {
    var container = document.createElement("div");
    container.id = "container";

    var img = document.createElement("img");
    img.src = item.SmallPictureUrl;
    img.alt = "Product picture";
    img.style.width = "50px";
    container.appendChild(img);

    var title = document.createElement("h6");
    title.innerText = item.Title;
    container.appendChild(title);

    return container;
}

The result from all three examples of displaying templated items containing an image and a heading is one and the same, shown in the image below.

Templated RadDropDownList

See Also