Autocomplete events Mvc

[Ryan]

I am using cshtml view to display an autocomplete using below.  The autocomplete works fine until i try setting the .Events. 

I copied the events code and script from the cshtml events example and am getting "Microsoft Jscript runtime error: 'change' is undefined"

@model CashBatchesViewModel
 
<div>
    
    @(Html.Kendo().AutoComplete()
                  .Name("autocomplete")
            //.Filter("startswith")
          .Placeholder("Select Batch...")
          .Filter("contains")
          //.DataTextField("ProductName")
          .DataSource(source =>
          {
              source.Read(read => read.Action("GetBatches", "Cash"));
          })          
                          .Events(e =>
                          {
                              e.Change("change").Select("select").Open("open").Close("close");
                          })
    )
<label id="batchLabel" class="k-header">Batch label</label>
</div>
 
<div>
</div>
 
<script>
 
    function close() {
        //kendoConsole.log("event: close");
        alert("Batch Auto Close");
    };
 
    function open() {
        //kendoConsole.log("event: open");
        alert("Batch Auto Open");
    };
 
    function change() {
        //kendoConsole.log("event: change");
        alert("Batch Auto Change");
    };
 
    function select(e) {
        //if ("kendoConsole" in window) {
            var dataItem = this.dataItem(e.item.index());
            alert("event :: select (" + dataItem + ")");
        //}
    };
</script>

[Georgi Krustev]

Hello Ryan,

The Kendo UI wrappers for ASP.NET MVC are self initalized and when they are loaded with ajax, the event handlers should be placed before the declaration of the widgets:

<script>

    function close() {
        //kendoConsole.log("event: close");
        alert("Batch Auto Close");
    };

    function open() {
        //kendoConsole.log("event: open");
        alert("Batch Auto Open");
    };

    function change() {
        //kendoConsole.log("event: change");
        alert("Batch Auto Change");
    };

    function select(e) {
        //if ("kendoConsole" in window) {
            var dataItem = this.dataItem(e.item.index());
            alert("event :: select (" + dataItem + ")");
        //}
    };
</script>
<div>

    @(Html.Kendo().AutoComplete()
                  .Name("autocomplete")
            //.Filter("startswith")
          .Placeholder("Select Batch...")
          .Filter("contains")
          //.DataTextField("ProductName")
          .DataSource(source =>
          {
              source.Read(read => read.Action("GetBatches", "Cash"));
          })
                          .Events(e =>
                          {
                              e.Change("change").Select("select").Open("open").Close("close");
                          })
    )
<label id="batchLabel" class="k-header">Batch label</label>
</div>

<div>
</div>

Greetings,
Georgi Krustev
the Telerik team