Combobox - add items on client

by krustev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.716/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.2.716/js/kendo.all.min.js"></script>
<div class="demo-section">
    <h2>Products</h2>
    <input id="products" style="width: 250px" />
</div>

JavaScript

$("#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",
            }
        }
    },
    dataBound: function() {
        var dataSource = this.dataSource;
        var data = dataSource.data();
      
        if (!this._adding) {
            this._adding = true;

            data.splice(0, 0, {
                "ProductName": "test",
                "ProductID": "10000"
            });
            
            //OR add it at the and  
            /*dataSource.add({
                "ProductName": "test",
                "ProductID": "10000"
            });*/
            
            this._adding = false;
        }
    }
});