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

Error Popup Editor with AutoComplete and DropDownList

1 Answer 148 Views
Grid
This is a migrated thread and some comments may be shown as answers.
rooney
Top achievements
Rank 1
rooney asked on 11 Oct 2012, 03:58 AM
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

1 Answer, 1 is accepted

Sort by
0
rooney
Top achievements
Rank 1
answered on 11 Oct 2012, 04:16 AM
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");
                 });
   },
....
Tags
Grid
Asked by
rooney
Top achievements
Rank 1
Answers by
rooney
Top achievements
Rank 1
Share this question
or