0

我在 ASP .NET MVC 应用程序中使用 Kendo UI。我有剑道树列表。有时,在编辑一行后,所有行都消失了,我只看到没有子行的根元素。是剑道虫子吗?或者我可以防止它?当行消失时,我刷新页面,进行相同的更改并保存树列表 - 树列表正常工作。

var parsedXmlDataInJson = @Html.Raw(@ViewBag.XmlData); //jsonarray data


    $( document ).ready(function() {
    });

    function ShowMessage(message,timeout) //пока сообщению пользователю в левом верхнем углу
    {
        var divMessage = $('#toggler');
        if(divMessage.css('display') != 'none')
        {
            divMessage.clearQueue();
            divMessage.stop();
            divMessage.css('display','none');
        }

        if (timeout == 0)
            divMessage.text(message).toggle('slow');
        else
            divMessage.text(message).toggle('slow').delay(timeout).toggle('slow');

    }

    var treelistds = new kendo.data.TreeListDataSource({ //CRUD for dataSource
        transport: {
            read: function(e) {
                e.success(parsedXmlDataInJson);
            },
            update: function(e) {
                var updatedItem = e.data;

                $.each(parsedXmlDataInJson, function(indx, value) {
                    if (value.id == updatedItem.Id) {
                        value = updatedItem;
                        return false;
                    }
                });
                e.success();
            },
            create: function(e) {//Works for root element when editing only once - it's broke my treelist.
                 e.data.Id = GetId();
                 parsedXmlDataInJson.push(e.data);
                 e.success(e.data);
            },
            destroy: function(e) {
                var updatedItem = e.data;

                $.each(parsedXmlDataInJson, function(indx, value) {
                    if (value.id == updatedItem.Id) {
                        parsedXmlDataInJson.splice(indx, 1);
                    }
                });
                e.success();
            },
            parameterMap: function(options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
            }
        },
        batch: false,
        schema: {
            model: { 
                id: "Id",
                parentId: "parentId",
                fields: {
                    Id: {
                        type: "number",
                        editable: true,
                        nullable: false
                    },
                    parentId: {
                        field: "parentId",
                        nullable: true
                    }
                }
            }
        }
    });


    $("#treeList").kendoTreeList({
        resizable: true,
        dataSource: treelistds,
        toolbar: ["create"],
        columns: [{
            field: "typeAndAttributes",
            width:400
        }, {
            field: "text",
            title: "Текст",
        }, {
            field: "cData",
            title: "CDATA",
        }, { //my custom command
            command: ["edit", "destroy", "createchild", {
                name: "commentOut",
                text: "commentOut",
                click: function(e) {
                    var dataItem = this.dataItem($(e.target).closest("tr")); ///my custom command

                    dataItem.commentedOut = !dataItem.commentedOut;
                    var isCommentedOut = dataItem.commentedOut;

                    var childNotes = this.dataSource.childNodes(dataItem);
                    childNotes.forEach(function(childModel, i) //
                    {
                        childModel.commentedOut = isCommentedOut;
                        SetChildrenIsCommentedOut(childModel, isCommentedOut);
                    })

                    //обновляем цвет и текст кнопок у всех элементов вызывая dataBound
                    $("#treeList").data("kendoTreeList").refresh();
                },
            }, ]
        }],
        messages: {
            commands: {
                edit: "Изменить",
                destroy: "Удалить",
                createchild: "Добавить"
            }
        },
        dataBound: function(e) {
            this.autoFitColumn(3);
            Databound(e.sender, e.sender.table.find("tr"));
        },
        editable: true,
        editable: {
            mode: "popup",
            template: kendo.template($("#popup-editor").html()),
            window: {
                width:800
            }
        },
        edit: function(e) { //invokes when popup open
            $("#date").kendoDateTimePicker({
            });

            $("#cDataEditor").kendoEditor({
                tools: [
                    "formatting", "bold", "italic", "underline", "insertUnorderedList",
                    "insertOrderedList", "indent", "outdent", "createLink", "unlink"
                ],
                resizable: {
                    content: true,
                    toolbar: true,
                    max:350
                }
            });
           //my custom logic. Popup contains many fileds splitted from one model field
            if (!e.model.isNew()) { //split typeAndAttrubites to popup's fileds
                var fileds = e.model.typeAndAttributes.split(';').
                filter(function(v) {
                    return v !== ''
                });

                e.container.find("#type").val(fileds[0]);

                var length = fileds.length;
                for (i = 1; i < length; i++) {
                    var keyAndValue = fileds[i].split('=');

                    if (keyAndValue[0] != "id")
                        e.container.find("#" + keyAndValue[0].trim()).val(keyAndValue[1].trim());
                    else
                        e.container.find("#xmlId").val(keyAndValue[1].trim());
                }
            }

        },
        save: function(e) { //invokes when saving 
            var splitter = "; ";
            var inputValue = $("input[id='type']").val().trim();

            if (e.model.type !== undefined) {
                e.model.typeAndAttributes = e.model.type;
            } else {
                e.model.typeAndAttributes = inputValue;
            }

            var allInputs = $(":input[data-appointment=attributes]");
            allInputs.each(function(index, input) { //collect inputs in one filed
                var attrName;
                var attrValue;
                if (input.id != "id") {
                    attrName = input.id;
                    e.model[attrName];
                } else {
                    attrName = "id";
                    attrValue = e.model["xmlId"];
                }
                //значение изменили и оно не пустое
                if (attrValue !== undefined && attrValue !== "") {
                    if (attrValue == false)
                        return true;

                    e.model.typeAndAttributes += splitter + attrName + "=" + attrValue;
                }
                    //my custom logic
                else if (input.value.trim() && input.value != "on") {
                    e.model.typeAndAttributes += splitter + attrName + "=" + input.value.trim();
                }
            })
        }
    });

    //рекурсивно помечаем ряды как закомментированные или нет
    function SetChildrenIsCommentedOut(dataItem, isCommentedOut) {
        var childNotes = $("#treeList").data("kendoTreeList").dataSource.childNodes(dataItem);
        childNotes.forEach(function(childModel, i) {
            childModel.commentedOut = isCommentedOut;
            SetChildrenIsCommentedOut(childModel, isCommentedOut);
        })
    }

    //Раскрашивает строки соответственно значению закомментировано или нет
    function Databound(sender, rows) {
        rows.each(function(idx, row) {
            var dataItem = sender.dataItem(row);

            if (dataItem.commentedOut) {
                //обозначаем ряд как закомментированный
                $(row).css("background", "#DCFFE0");
                $(row).find("[data-command='commentout']").html("Раскомментировать");
            } else {
                //обозначаем ряд как незакомментированный
                $(row).css("background", "");
                $(row).find("[data-command='commentout']").html("Закомментировать");
            }
        })
    }

    });

    var currentId = 0;

    function GetId() { //генерирование Id для новых записей
        var dataSource = $("#treeList").data("kendoTreeList").dataSource;

        do {
            currentId++;
            var dataItem = dataSource.get(currentId);
        } while (dataItem !== undefined)

        return currentId;
    }
4

0 回答 0