Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.common.min.css" />
  <link rel="stylesheet" href="http://cdn.kendostatic.com/2015.1.318/styles/kendo.default.min.css" />
</head>
<body>
  <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  <script src="http://cdn.kendostatic.com/2015.1.318/js/kendo.all.min.js"></script>
  
  <input id="dropdown" style="width:230px;" />
  <script id="template"><img src="#:url#/75/75"> #=name#</script>
  <script id="valueTemplate"><img src="#:url#/75/75"> #=name#</script>
  
  <script>
    $("#dropdown").kendoDropDownList({
        dataSource: [
            {url: 'http://p-hold.com/', name:'<i>p-hold.com</i>'}, 
            {url: 'http://lorempixel.com', name:'<i>lorempixel.com</i>'},
            {url: 'http://placehold.it', name:'<i>placehold.it</i>'}
        ],
        template: kendo.template('<img src="#:url#/75/75"> #=name#'),
        valueTemplate: kendo.template('<img src="#:url#/75/75"> #=name#'),
        dataTextField: 'name',
        dataValueField: 'url'
    });
  </script>
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
codylindleypro
0viewers