javascript - KendoUI - ListView - 如何在编辑模板中运行时显示动态控件

Question

与此相关question ，我想在 ListView 而不是剑道网格中实现相同的行为。我的尝试是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 :当您点击“添加记录”并在下拉列表中选择“日期时间”时，您可以看到它添加了日期选择器。

请注意，还有其他一些问题无法与 fiddle 一起使用，我还没有修复这些问题。