Question

我需要使用Kendo UI列表视图的帮助，该视图存在于网格行详细信息模板中。这是我到目前为止所做的事情。

<div id="grid">
        </div>

 <script type="text/x-kendo-template" id="gridDetailTemplate">
            <div class='grid-edit'>
                <div class='edit-list'></div>
            </div>
        </script>

<script type="text/x-kendo-template" id="editItemtemplate">
            <div class='edit-Item'>
            #if(Type=='string'){#
            <ul><li><b>#:Name#</b></li><li><input class='inputString' value='#:DataVal()#'/></li></ul>
            #}else if(Type=='number'){#
            <ul><li><b>#:Name#</b></li><li><input class='inputNumber' data-role='numerictextbox' data-type='number' value='#:DataVal()#'/></li></ul>
            #}else if(Type=='date'){#
            <ul><li><b>#:Name#</b></li><li><input class='inputDate' data-role='datepicker' value='#:kendo.toString(DataVal(),'MM/dd/yyyy')#'/></li></ul>
            #}else if(Type=='boolean'){Name #<input type='checkbox'/>
            #}#
            </div>
        </script>

<script type="text/javascript">
            $(document).ready(function () {

                $.get("http://localhost:4916/DataAttribute", function (data, status) {
                    var selFields = new Object();
                    $.each(data, function (index, elem) {
                        selFields[elem.Name] = new Object();
                        selFields[elem.Name]["type"] = elem.Type;
                    });
                    $("#grid").kendoGrid({
                        dataSource: {
                            type: "json",
                            transport: {
                                read: { url: "http://localhost:4916/Deal",
                                    dataType: "json"
                                }
                            },
                            schema: {
                                data: "Data", total: "Total",
                                model: {

                                    fields: selFields
                                }
                            }
                        },
                        height: 430,
                        filterable: true,
                        sortable: true,
                        pageable: false,
                        detailTemplate: kendo.template($("#gridDetailTemplate").html()),
                        detailInit: detailInit,
                        columns: [{
                            field: "SecurityName",
                            title: "Security Name",
                            width: 250
                        },
                            {
                                field: "DateOfAcquisition",
                                title: "Date Of Acquisition",
                                width: 120,
                                format: "{0:MM/dd/yyyy}"
                            }, {
                                field: "Acres",
                                title: "Acres",
                                width: 120
                            }
                        ]
                    });
                });
            });


            function detailInit(e) {
                $.get("http://localhost:4916/DataAttribute", function (data, status) {
                    var detailRow = e.detailRow;

                    detailRow.find(".edit-list").kendoListView({
                        dataSource: {
                            data: data,
                            schema: {
                                model: {
                                    DataVal: function () {
                                        switch (this.get("Type")) {
                                        case "number"
                                        }
                                        if (e.data[this.get("Name")])
                                            return e.data[this.get("Name")];
                                        else
                                            return '';
                                    }
                                }
                            }
                        },
                        template: kendo.template($("#editItemtemplate").html())
                    });
                });
            }


        </script>

我的代码获取动态字段列表并将其绑定到网格的数据源。然后，在detailInit事件中，我在行详细信息中找到div并将其转换为已创建模板的kendo UI列表。

现在，当我使用data-bind="value: DataVal()"时，它不会获取List数据源的值。它按我的方式工作，即value="#: DataVal() #"。但是，data-role不会将字段转换为指定类型，在我的情况下是datepicker和numericinput。

我认为未使用数据角色的原因与数据绑定未被读取的问题相同。

任何人都可以帮我解决这个问题吗？此外，您可以随意提出任何替代方法和一般代码改进建议。我是一名ASP.NET开发人员，通常不使用纯HTML和JavaScript。

PS：如果有兴趣的话，我很乐意提供我想要实现的目标背景。

提前致谢。

Answer 1

如果您可以安装一个有助于调试问题的jsFiddle或jsBin示例。

但是，请尝试删除括号：

data-bind="value: DataVal"

Kendo应该检测到DataVal是一个函数并自行调用它。

Answer 2

我在listview模板中遇到了类似的情况。我创建了一个JSFiddle来演示：

http://jsfiddle.net/zacharydl/7L3SL/

奇怪的是，解决方案是将模板的内容包装在div 中。看起来你的模板已经有了这个，所以YMMV。

<div id="example">
    <div data-role="listview" data-template="template" data-bind="source: array"></div>
</div>

<script type="text/x-kendo-template" id="template">
    <!--<div>-->
        <div>method 1: #:field#</div>
        <div>method 2: <span data-bind="text: field"></span></div>
        <input data-role="datepicker" />
    <!--</div>-->
</script>

var model = kendo.observable({
    array: [
        { field: 'A'},
        { field: 'B'}
    ]
});

kendo.bind($('#example'), model);

数据绑定在网格详细信息模板中的列表视图模板中不起作用

2 个答案: