Autocomplete events Mvc

2 posts, 0 answers
  1. Ryan
    Ryan avatar
    9 posts
    Member since:
    Sep 2012

    Posted 19 Sep 2012 Link to this post

    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>
  2. Georgi Krustev
    Admin
    Georgi Krustev avatar
    3707 posts

    Posted 24 Sep 2012 Link to this post

    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!
  3. Kendo UI is VS 2017 Ready
Back to Top