1

我需要帮助使用位于网格行详细信息模板中的 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：如果有人感兴趣，我很乐意提供我在这里想要实现的目标的背景。

提前致谢。

4

2 回答 2

0

我在列表视图模板中遇到了类似的情况。我创建了一个 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);
于 2014-03-13T00:31:05.257 回答
0

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

但是，请尝试删除括号：

data-bind="value: DataVal"

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

于 2013-09-24T02:04:27.577 回答