Telerik UI for Windows 8 HTML

You can assign a template to RadComboBox using its template property. This template will be used for all items rendered in the control's 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 see how the three approaches.

Since the Q1 2014 release of Telerik UI for Windows 8 HTML, RadAutoCompleteBox also exposes a headerTemplate property. It allows you to provide static HTML (there is no binding context for this template) that would be shown as a header above the auto-complete suggestions.

In the following code examples, you will see different implementations, all of which result in the following RadAutoCompleteBox:

RadComboBox templates

Using WinJS.Binding.Template

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

Template Copy imageCopy
<span id="winTemplateComboBox"></span>
<div id="comboBoxTemplate" 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>
        <span style='color: #33ccff'>New Price: </span>
        <span style='color: #33ccff' data-win-bind="innerText: ConvertedCurrentPrice"></span>
    </div>
</div>
RadComboBox Definition Copy imageCopy
var winTemplateComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById("winTemplateComboBox"), {
    dataTextField: "Title",
    dataValueField: "Id",
    filter: "contains",
    dataSource: {
        transport: {
            read: {
                url: "/js/movies.json",
                dataType: "json"
            }
        },
        schema: {
            data: "movies"
        }
    },
    template: document.getElementById("comboBoxTemplate").winControl,
    height: 265
});

Using String Template with Binding Expressions

Another option is to utilize 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 identical results as those of the WinJS template by using binding expressions. This next example shows a declaration that will provide a result equivalent to the one from the previous section:

RadComboBox Using String Template Copy imageCopy
var stringTemplateComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById("stringTemplateComboBox"), {
    dataTextField: "Title",
    dataValueField: "Id",
    filter: "contains",
    dataSource: {
        transport: {
            read: {
                url: "/js/movies.json",
                dataType: "json"
            }
        },
        schema: {
            data: "movies"
        }
    },
    template: ["<div id='container'>",
    "<img src='#=SmallPictureUrl#' style='width:50px; margin-top:7px' alt='ProductName'/>",
    "<h5>#=Title#</h5><span style='color: \\#33ccff'>New Price: #=ConvertedCurrentPrice#</span></div>"].join(""),
    height: 265
});

Using a Function Returning a DOM Element

Another possible approach is to set the template property value to point to a function that 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:

RadComboBox Definiton Copy imageCopy
var functionComboBoxCtrl = new Telerik.UI.RadComboBox(document.getElementById("functionComboBox"), {
    dataTextField: "Title",
    dataValueField: "Id",
    filter: "contains",
    dataSource: {
        transport: {
            read: {
                url: "/js/movies.json",
                dataType: "json"
            }
        },
        schema: {
            data: "movies"
        }
    },
    template: getTemplate,
    height: 265
});
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";
    img.style.marginTop = "7px";
    container.appendChild(img);

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

    var price = document.createElement("span");
    price.style.color = "#33ccff";
    price.innerText = "New Price: " + item.ConvertedCurrentPrice;
    container.appendChild(price);

    return container;
}

See Also