You can assign a template for the items in RadTokenInput if you set its itemTemplate property. This template will be used for all items
rendered in the control's dropdown. It could be:
In this help article, you can see how these two approaches are used to achieve the following result:
Using a String Template with Binding Expressions
You can utilize a string template with binding expressions to provide more flexibility to the content of RadTokenInput items. You can evaluate JavaScript
expressions and based on the result, return different content.
You can see a simple example of string template usage below:
String Template Example | Copy |
---|
var stringTemplateTokenInput = new Telerik.UI.RadTokenInput(document.getElementById("tokenInput2"), {
dataSource: {
data: cities
},
dataTextField: "City",
dataValueField: "City",
itemTemplate: "<div class='tItem'><img height=60 src='/images/Cities/#=City#.jpg'/><h3>#=City#</h3></div>"
});
|
Here cities is an array of simple objects but if needed, you can access all fields of the current data item, even if they are not
assigned as dataTextField/dataValueField.
JavaScript | Copy |
---|
var cities = [
{ City: "Beijing" },
{ City: "Berlin" },
{ City: "Bombay" },
{ City: "Bonn" },
{ City: "Boston" },
{ City: "Cairo" },
{ City: "Cancun" },
{ City: "Cannes" },
{ City: "Frankfurt" }];
|
Using a Function Returning a String
Another possible approach is to set the itemTemplate property value to point to a function which returns a string for each
item. This function can receive the data item for the current item as an argument, so that you can populate the template.
Control Definition | Copy |
---|
var functionTemplateTokenInput = new Telerik.UI.RadTokenInput(document.getElementById("tokenInput1"), {
dataSource: {
data: cities
},
dataTextField: "City",
dataValueField: "City",
itemTemplate: getTemplate
});
|
And the templating function:
Templating Function | Copy |
---|
function getTemplate(item) {
var template = ["<div class='tItem'><img height='60' src='/images/Cities/" + item.City + ".jpg'/>",
"<h3>" + item.City + "</h3></div>"].join("");
return template;
}
|
Same as before, the item object passed to the templating function contains all fields of the current data item, even the ones
that are not assigned as dataTextField/dataValueField.
See Also