Dropdownlist binding

Dropdownlist binding

by stevescotthome

HTML

<script src="http://cdn.kendostatic.com/2012.1.515/js/kendo.all.min.js"></script>
<script src="http://cdn.kendostatic.com/2012.1.515/styles/kendo.common.min.css "></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.515/styles/kendo.default.min.css">
<select id="dropDownList">

</select>

CSS

.header{
  font-weight:bold;
   
}

.item{
  padding-left: 10px;   
}

JavaScript

$(document).ready(function() {

    $("#dropDownList").kendoDropDownList({
        template: "<option class='${ data.css }'><a href='${ data.url }'>${ data.text }</a></option>",
        dataTextField: "text",
        dataValueField: "url",
        dataSource: [
            {
            text: "Item1",
            url: "http://www.google.com",
            css: "header"},
        {
            text: "Item2",
            url: "http://www.yahoo.com",
            css: "item"}
        ]
    });
});