привязка данных не работает в шаблоне представления списка в шаблоне сведений сетки

Мне нужна помощь в использовании представления списка пользовательского интерфейса Kendo, которое находится в шаблоне сведений о строке сетки. вот что я сделал до сих пор.

<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 внутри строки и преобразовываю его в список пользовательского интерфейса кендо, для которого был создан шаблон.

Теперь, когда я использую data-bind="value: DataVal()" , он не получает значения источника данных List. Это работает так, как я сделал, т.е. value="#: DataVal() #". Но роль данных не преобразует поля в указанные типы, которые в моем случае являются средством выбора даты и числовым вводом.

Я считаю, что неиспользуемая роль данных вызвана той же проблемой, что и привязка данных, не прочитанная.

Может ли кто-нибудь помочь мне с этим? Кроме того, не стесняйтесь предлагать любые альтернативные способы и общие улучшения кода. Я разработчик ASP.NET и обычно не работаю с чистым html и javascript.

PS: Я был бы рад предоставить контекст того, чего я пытаюсь достичь здесь, если кому-то интересно.

Заранее спасибо.


kendo-grid kendo-ui kendo-listview
person stripathi    schedule 23.09.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Если вы можете настроить пример jsFiddle или jsBin, это поможет отладить проблему.

Однако попробуйте удалить скобки:

data-bind="value: DataVal"

Кендо должен определить, что DataVal является функцией, и вызвать ее самостоятельно.

person CodingWithSpike    schedule 24.09.2013

arrow_upward
0
arrow_downward

У меня возникла аналогичная ситуация в шаблоне списка. Я создал 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);
person zacharydl    schedule 13.03.2014