ComboBoxes with placeholder

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/jquery.min.js"></script>
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<button class="k-button" id="enable">Enable</button>
<button class="k-button" id="disable">Disable</button>

<div id="example" class="k-content">
    <div class="demo-section">
        <p>
            <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" />
        </p>
        
        <p>
            <label>Text:</label><input id="textboxtest" type="text" class="k-textbox" value="test" style="width: 300px" />
        </p>
    </div>
</div>

CSS

.demo-section {
    width: 460px;
    padding: 30px;
}
.demo-section h2 {
    text-transform: uppercase;
    font-size: 1.2em;
    margin-bottom: 30px;
}
.demo-section label {
    display: inline-block;
    width: 120px;
    padding-right: 5px;
    text-align: right;
}

JavaScript

var products = $("#products").kendoComboBox({
    cascadeFrom: "categories",
    filter: "contains",
    placeholder: "Select product...",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    dataSource: {
        data: [{"ProductName": "ProductName1", "ProductID": "1"}, {"ProductName": "ProductName2", "ProductID": "2"}]
    },
    index: 0
}).data("kendoComboBox");

$("#disable").on("click", function() {
    $("#textboxtest").prop("disabled", true).addClass("k-state-disabled");
});

$("#enable").on("click", function() {
    $("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");
});