Kendo ui - search combobox with images

csHtml file


@{
    ViewBag.Title = "Combobox";
}

<h2>Combobox</h2>

<div class="demo-section k-content">
    <h4>Customers</h4>
    <input id="customers" style="width: 101%;" />
    <p class="demo-hint">
        Open the DropDownList to see the customized appearance.
    </p>
</div>


<script src="~/assest/my/ComboboxWithImage.js"></script>
  <style>

                .dropdown-header {
                    border-width: 0 0 1px 0;
                    text-transform: uppercase;
                }

                .dropdown-header > span {
                    display: inline-block;
                    padding: 10px;
                }

                .dropdown-header > span:first-child {
                    width: 50px;
                }

                .selected-value {
                    display: inline-block;
                    vertical-align: middle;
                    width: 24px;
                    height: 24px;
                    background-size: 100%;
                    margin-right: 5px;
                    border-radius: 50%;
                }

                #customers-list .k-item {
                    line-height: 1em;
                    min-width: 300px;
                }
             
                /* Material Theme padding adjustment*/
             
                .k-material #customers-list .k-item,
                .k-material #customers-list .k-item.k-state-hover,
                .k-materialblack #customers-list .k-item,
                .k-materialblack #customers-list .k-item.k-state-hover {
                    padding-left: 5px;
                    border-left: 0;
                }

                #customers-list .k-item > span {
                    -webkit-box-sizing: border-box;
                    -moz-box-sizing: border-box;
                    box-sizing: border-box;
                    display: inline-block;
                    vertical-align: top;
                    margin: 20px 10px 10px 5px;
                }

                #customers-list .k-item > span:first-child {
                    -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    box-shadow: inset 0 0 30px rgba(0,0,0,.3);
                    margin: 10px;
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;
                    background-size: 100%;
                    background-repeat: no-repeat;
                }

                #customers-list h3 {
                    font-size: 1.2em;
                    font-weight: normal;
                    margin: 0 0 1px 0;
                    padding: 0;
                }

                #customers-list p {
                    margin: 0;
                    padding: 0;
                    font-size: .8em;
                }

            </style>
<style>
    .dropdown-header {
        border-width: 0 0 1px 0;
        text-transform: uppercase;
    }

        .dropdown-header > span {
            display: inline-block;
            padding: 10px;
        }

            .dropdown-header > span:first-child {
                width: 50px;
            }

    .selected-value {
        display: inline-block;
        vertical-align: middle;
        width: 24px;
        height: 24px;
        background-size: 100%;
        margin-right: 5px;
        border-radius: 50%;
    }

    #customers-list .k-item {
        line-height: 1em;
        min-width: 300px;
    }

    /* Material Theme padding adjustment*/

    .k-material #customers-list .k-item,
    .k-material #customers-list .k-item.k-state-hover,
    .k-materialblack #customers-list .k-item,
    .k-materialblack #customers-list .k-item.k-state-hover {
        padding-left: 5px;
        border-left: 0;
    }

    #customers-list .k-item > span {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: inline-block;
        vertical-align: top;
        margin: 20px 10px 10px 5px;
    }

        #customers-list .k-item > span:first-child {
            -moz-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            -webkit-box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            box-shadow: inset 0 0 30px rgba(0,0,0,.3);
            margin: 10px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background-size: 100%;
            background-repeat: no-repeat;
        }

    #customers-list h3 {
        font-size: 1.2em;
        font-weight: normal;
        margin: 0 0 1px 0;
        padding: 0;
    }

    #customers-list p {
        margin: 0;
        padding: 0;
        font-size: .8em;
    }
</style>


//////////////////

Ts file

/// <reference path="../jquery.d.ts" />
/// <reference path="../kendo.all.d.ts" />
/// <reference path="../tsmessage.ts" />

// [2016-05-17]
module EventDetailView {

    var dataLength = 0;
    var startPos = 0;

    $(document).ready(function () {
     
        $("#customers").kendoDropDownList({
            dataTextField: "PostName",
            dataValueField: "PostID",
            headerTemplate: '<div class="dropdown-header k-widget k-header">' +
            '<span>Photo</span>' +
            '<span>Contact info</span>' +
            '</div>',
            valueTemplate: '<span class="selected-value" style="background-image: url(\'#:Image#\')"></span><span>#:PostName#</span>',
            template: '<span class="k-state-default" style="background-image: url(\'#:Image#\')"></span>' +
            '<span class="k-state-default"><h3>#: PostName #</h3><p>#:PostName #</p></span>',
         
            height: 400
        });


        var dropdownlist = $("#customers").data("kendoDropDownList");
        var dataSource = new kendo.data.DataSource();

        new apiConnector().callservice('/TTT/GetPosts', { begin: 10 }).done(function (data) {
            console.log(data);
            dataSource.data(data);
            dropdownlist.setDataSource(dataSource);

        });


    });



      class apiConnector {

        callservice(url: string, data: any): JQueryDeferred<any> {
            var dfd = jQuery.Deferred();
            $.ajax({
                url: url,
                method: "GET",
                contentType: "application/json; charset=utf-8",
                data: data,
                dataType: "json",
                cache: false,
                success: function (data) {
                    var value = data;
                    dfd.resolve(value);
                },
                error: function (xhr, textStatus, errorThrown) {
                    console.log(textStatus);
                    dfd.reject();
                }
            });
            return dfd;
        }

    }

}

//////////

Json 

[{"PostID":10,"PostName":"post name 10","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":11,"PostName":"post name 11","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":12,"PostName":"post name 12","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":13,"PostName":"post name 13","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":14,"PostName":"post name 14","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":15,"PostName":"post name 15","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":16,"PostName":"post name 16","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":17,"PostName":"post name 17","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"},{"PostID":18,"PostName":"post name 18","Image":"http://srilankanspuwath.co.uk/web/wp-content/uploads/2013/01/Sri-Lanka-logo.jpg"}]