1

与此问题相关，我想在 ListView 而不是剑道网格中实现相同的行为。我的尝试就在这里。编辑模板根据编辑开始时模型中的值切换到不同的控件。但问题是我找不到根据第一个字段中的用户选择来切换第二个字段的方法。

此外，如果我将第一个字段更改为“自动完成”列表，我还能遵循相同的模式吗？

我感谢任何帮助解决这个问题。

代码：

<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>
4

1 回答 1

0

在下拉列表的更改处理程序中，您可以执行此操作来查找当前编辑的列表元素：

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);      
}

此处演示：当您单击“添加记录”并在下拉列表中选择“日期时间”时，您可以看到它添加了日期选择器。

请注意，还有其他一些东西不适用于小提琴，我还没有解决这些问题。

于 2014-01-10T10:56:01.613 回答