KendoUI - ListView - 如何在運行時顯示編輯模板中的動態控件

Question

與此question相關，我想在ListView中實現相同的行爲而不是Kendo Grid。我的嘗試是here。編輯模板根據編輯開始時模型中的值切換到不同的控件。但問題是，我無法找到一種方法來根據第一個字段中的用戶選擇切換第二個字段。

此外，如果我將第一個字段更改爲「自動完成」列表，我仍然可以遵循相同的模式？

我明白任何幫助解決這個問題。

代碼：

<div class="row"> 
    <div class="col-xs-6 col-md-4"> 
     <!-- Inputs --> 
     <div class="demo-section"> 
      <a class="k-button k-button-icontext k-add-button" href="#"><span class="k-icon k-add"></span>Add new record</a> 
     </div> 

     <div id="listView"></div> 

     <script type="text/x-kendo-tmpl" id="template"> 
      <div class="product-view k-widget"> 
       <div class="edit-buttons"> 
        <a class="k-button k-button-icontext k-edit-button" href="\\#"><span class="k-icon k-edit"></span></a> 
        <a class="k-button k-button-icontext k-delete-button" href="\\#"><span class="k-icon k-delete"> </span></a> 
       </div> 
       <dl> 
        <dt>Type</dt> 
        <dd> #: typeTitle# </dd> 
        <dt>Value</dt> 
        <dd> 
         # if (typeTitle === "DateTime") { # 
         #: kendo.toString(name, "MM/dd/yyyy hh:mm")# 
         #} else { # 
         #:name # 
         # } # 
        </dd> 
       </dl> 
      </div> 
     </script> 

     <script type="text/x-kendo-tmpl" id="editTemplate"> 
      <div class="product-view k-widget"> 
       <div class="edit-buttons"> 
        <a class="k-button k-button-icontext k-update-button" href="\\#"><span class="k-icon k-update"></span></a> 
        <a class="k-button k-button-icontext k-cancel-button" href="\\#"><span class="k-icon k-cancel"></span></a> 
       </div> 
       <dl> 
        <dt>Key</dt> 
        <dd> 
         <select data-role="dropdownlist" 
           data-text-field="title" 
           data-value-field="id" 
           data-source="_typeDataSource" 
           data-bind="value: typeTitle" 
           name="InputType" 
           data-change="dropdownlist_change" 
           required="required" 
           validationmessage="required"></select> 
         <span data-for="InputType" class="k-invalid-msg"></span> 
        </dd> 
        <dt>Value</dt> 
        <dd> 
         <div id="divInputType"> 
          # if (typeTitle === "DateTime") { # 
          <input data-role="datetimepicker" type="text" data-bind="value: name" data-format="MM/dd/yyyy hh:mm" name="InputValue" required="required" validationmessage="required" /> 
          #} else { # 
          <input type="text" data-bind="value: name" name="InputValue" required="required" validationmessage="required" /> 
          # } # 
          <span data-for="name" class="k-invalid-msg"></span> 
         </div> 
        </dd> 
       </dl> 
      </div> 
     </script> 

    </div> 
    <div class="col-sm-6 col-md-8"> 
     <!-- Data --> 
     Diagnostics Data will be shown here. 
    </div> 
</div> 

<script> 
    _typeDataSource = new kendo.data.DataSource({ 
     data: [{ 
      id: 1, 
      title: "String" 
     }, { 
      id: 2, 
      title: "Number" 
     }, { 
      id: 3, 
      title: "DateTime" 
     }] 
    }); 

    _peopleDataSource = new kendo.data.DataSource({ 
     data: [{ 
      id: 1, 
      name: "John", 
      typeId: 1, 
      typeTitle: "String" 
     }, { 
      id: 2, 
      name: "12345", 
      typeId: 2, 
      typeTitle: "Number" 
     }, { 
      id: 3, 
      name: "12/20/2013", 
      typeId: 3, 
      typeTitle: "DateTime" 
     }], 
     schema: { 
      model: { 
       id: "id", 
       fields: { 
        id: { 
         editable: false, 
         nullable: true 
        }, 
        name: { 
         validation: { 
          required: true 
         } 
        }, 
        typeTitle: "typeTitle" 
       } 
      } 
     } 
    }); 

    listView = $("#listView").kendoListView({ 
     dataSource: _peopleDataSource, 
     template: kendo.template($("#template").html()), 
     editTemplate: kendo.template($("#editTemplate").html()) 
    }).delegate(".k-edit-button", "click", function (e) { 
     listView.edit($(this).closest(".product-view")); 
     e.preventDefault(); 
    }).delegate(".k-delete-button", "click", function (e) { 
     listView.remove($(this).closest(".product-view")); 
     e.preventDefault(); 
    }).delegate(".k-update-button", "click", function (e) { 
     listView.save(); 
     e.preventDefault(); 
    }).delegate(".k-cancel-button", "click", function (e) { 
     listView.cancel(); 
     e.preventDefault(); 
    }).data("kendoListView"); 

    $(".k-add-button").click(function (e) { 
     listView.add(); 
     e.preventDefault(); 
    }); 

    function dropdownlist_change(e) { 
     var value = this.value(); 
     // Use the value of the widget 

     console.log(value); 
     //if (value == 2) { 
     // console.log('here'); 

     // var secondColumn = $('#divInputType'); 
     // secondColumn.empty(); 
     // //var model = grid._modelForContainer(secondColumn); 

     // $("<input data-bind='value: Value '/>").appendTo(secondColumn).kendoDateTimePicker(); 
     // kendo.bind(secondColumn, model); 
     //} 
    } 
</script> 

Answer 1

在您的下拉菜單的變化處理，你可以做到這一點，找到當前編輯列表元素：

var kEditItem = $(e.sender.element).closest(".k-edit-item"); 

所以，如果你有這樣的一個模板：

<script type="text/x-kendo-tmpl" id="dynamicTemplate"> 
# if (value === "DateTime") { # 
    <input data-role="datetimepicker" type="text" data-bind="value: name" data-format="MM/dd/yyyy hh:mm" name="InputValue" required="required" validationmessage="required" /> 
    #} else { # 
    <input type="text" data-bind="value: name" name="InputValue" required="required" validationmessage="required" /> 
    # } # 
    <span data-for="name" class="k-invalid-msg"></span> 
</script> 

然後你可以像這樣在更改處理程序中創建編輯器：

window.dropdownlist_change = function (e) { 
    var kEditItem = $(e.sender.element).closest(".k-edit-item"); 
    var divInput = $(kEditItem).find(".divInputType"); 
    // TODO remove existing widgets with .destroy()  

    var template = kendo.template($("#dynamicTemplate").html()); 
    divInput.html(template(e.sender.dataItem())); 
    kendo.init(divInput);  
} 

演示here：當你點擊「添加記錄」，並在下拉列表中選擇「日期時間」，你可以看到它增加了日期選擇器。

請注意，還有其他的東西，不與小提琴一起工作，我還沒有解決這些問題。