Error Popup Editor with AutoComplete and DropDownList

[rooney]

Hi, i want to make input AutoComplete and DropDownList on custom popup editor
Look at this :
Script HTML in x-kendo-template :

<!-- grid element -->

<div id="grid" style="width: 700px; margin: 0 auto;"></div>

 

<!-- popup editor template -->

<script id="popup_editor" type="text/x-kendo-template">

    <p>Custom editor template</p>

    <div class="k-edit-label">

        <label for="FirstName">First Name</label>

    </div>

    <!-- autoComplete editor for field: "FirstName" -->

    <input name="FirstName"

        data-bind="value:FirstName"

        data-value-field="firstName"

        data-text-field="firstName"

        data-source="autoCompleteDS"

        data-role="autocomplete" />

         

    <div class="k-edit-label">

        <label for="LastName" style="color: red;">Last Name</label>

    </div>

    <!-- dropdownlist editor for field: "LastName" -->

    <input name="LastName"

        data-bind="value:LastName"

        data-value-field="lastName"

        data-text-field="lastName"

        data-source="dropDownListDS"

        data-role="dropdownlist" />

     

    <div class="k-edit-label">

        <label for="BirthDate">Birth Date</label>

    </div>

    <!-- datepicker editor for field: "BirthDate" -->

    <input type="text"

        name="BirthDate"

        data-type="date"

        data-bind="value:BirthDate"

        data-role="datepicker" />

         

    <div class="k-edit-label">

        <label for="Age">Age</label>

    </div>

    <!-- numeric textbox editor for field: "Age" -->

    <input type="text" name="Age" data-type="number" data-bind="value:Age" data-role="numerictextbox" />

 

</script>

and this script on javascript :

var autoCompleteDS = new kendo.data.DataSource({

    data: [

        {firstName: "Alex"},

        {firstName: "Alice"},

        {firstName: "Antony"},

        {firstName: "Anne"},

        {firstName: "Anna"}

    ]

});

 

var dropDownListDS = new kendo.data.DataSource({

    data: [

        {lastName: "Alex"},

        {lastName: "Alice"},

        {lastName: "Antony"},

        {lastName: "Anne"},

        {lastName: "Anna"}

    ]

});

.......

editable: {

   mode: "popup",

      template: $("#popup_editor").html()

   },

   edit: function(e) {

      $(e.container)

         .find("input[name='FirstName']")

            .data("kendoAutoComplete")

         .find("input[name='LastName']")

             .data("kendoDropDownList")

                 .bind("change", function(e) {

                     console.log("auto complete changed");

                 });

   },

....

So, a problem is button update and cancel can't be action
original code from here http://jsfiddle.net/valchev/BCBzS/17/

Thank

[rooney]

i solve this problem
change it :

editable: {

   mode: "popup",

      template: $("#popup_editor").html()

   },

   edit: function(e) {

      $(e.container)

         .find("input[name='FirstName']")

            .data("kendoAutoComplete")

         .find("input[name='LastName']")

             .data("kendoDropDownList")

                 .bind("change", function(e) {

                     console.log("auto complete changed");

                 });

   },

....

to be :

editable: {

   mode: "popup",

      template: $("#popup_editor").html()

   },

   edit: function(e) {

      $(e.container)

         .find("input[name='FirstName']", "input[name='LastName']")

            .data("kendoAutoComplete", "kendoDropDownList")

                 .bind("change", function(e) {

                     console.log("auto complete changed");

                 });

   },

....