ComboBox with table view

by krustev

HTML

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

<script type="text/x-kendo-template" id="template">
    <div style="clear:both; float:left; width: 60px; ">
        #=ProductID#
    </div>
    <div style="float:left; width: 300px; ">
        #=ProductName#
    </div>
    <div style="float:left; width: 100px; ">
        #=UnitPrice#
    </div>
    <div style="float:left; width: 100px;">
        #=UnitsInStock#
    </div>
</script>

CSS

#products-list {
  padding-bottom: 23px;        
}

#products-list ul {
  clear: both;
}

#products-list .k-list .k-item {
  overflow: hidden;   
}

.header {
   width:700px; 
   margin-left: 5px;
}

JavaScript

var html = $("#template").html();

$("#products").kendoComboBox({
    placeholder: "Select product",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    filter: "contains",
    autoBind: false,
    minLength: 3,
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Products",
            }
        }
    }
});

var combobox = $("#products").data("kendoComboBox");

// set width of the drop-down list
combobox.list.width(600);

//add headers
var template = kendo.template(html);
var headers = {
    ProductID: "Id",
    ProductName: "Name",
    UnitPrice: "Price",
    UnitsInStock: "In Stock"
};

combobox.list.prepend($('<div class="header">' + template(headers) + "</div>"));