This is a migrated thread and some comments may be shown as answers.

Autocomplete events Mvc

1 Answer 252 Views
AutoComplete
This is a migrated thread and some comments may be shown as answers.
Ryan
Top achievements
Rank 1
Ryan asked on 19 Sep 2012, 05:25 PM
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>

1 Answer, 1 is accepted

Sort by
0
Georgi Krustev
Telerik team
answered on 24 Sep 2012, 10:05 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
AutoComplete
Asked by
Ryan
Top achievements
Rank 1
Answers by
Georgi Krustev
Telerik team
Share this question
or