Kendo UI

jQuery + Kendo UI + MockJax

by wolfpackt99

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<div id="grid">
    
    <form method="post" action="/echo/xml/">
    <div>
        <input id='autocomplete'/>
    </div>
        <input id='btnSubmit' type='submit' value='do this'/>
</form>
    <div id='target'></div>
    <ul id='result'>
    </li>
</div>

JavaScript

$("#states-kendo").kendoDropDownList();

var count = 1;
var items = [{
    ID: 1,
    Name: "Item 1"},
{
    ID: 2,
    Name: "Item 2"}];
$("#autocomplete").kendoAutoComplete({
    dataSource: items,
    dataTextField: "Name",
    placeholder: "Enter value...",
    select: function(e) {
        $("#result").append("<li>" + e.item.html() + "</li>");
    },
    change: function(e) {
        //alert('change');
    },
    close: function(e) {
        $("#autocomplete").data("kendoAutoComplete").value("");
    }
});

$("#btnSubmit").click(function(e) {
    e.preventDefault();
    $("#target").html("doing ajaxy " + count++);

});

$("#autocomplete").keypress(function(e) {
    //if (e.keyCode == 13) {
        //e.preventDefault();
    //}
});