KendoTreeView не перерисовывается после удаления узла при добавлении нового узла - PullRequest
0 голосов
/ 27 мая 2019

Есть два обработчика событий: один добавляет узел в дерево, другой - удаляет его. И он работает нормально, как и ожидалось, пока узел не будет удален путем вызова события "check".

вот дерево (при проверке узла - оно удаляется):

$('#folderAttributeTree').kendoTreeView({
    dataSource: this.attributeTree,
    dataRole: "treeview",
    dataTextField: "name",
    checkboxes: true,
    loadOnDemand: true,
    check: function(e) {
        var treeView = e.sender,
            checkedNode = e.node;
        treeView.remove(checkedNode);
    },
    dataBound: function(e) {
        if (!this.dataSource.data().length) {
            this.element.append("<li class='no-items'>No items yet.</li>");
        } else {
            this.element.find(".no-items").remove();
        }
    }
}).data("kendoTreeView");

вот метод добавления узла (он создает всегда вложенные элементы):

addLabel: function(e) {
    e.preventDefault();

    var label = this.get('folder_label'),
        folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
        attributeTree = this.get('attributeTree')
        data = [];

    if (label !== null && label !== '') {

        if (attributeTree.length) {

            data = attributeTree;

            var i = 0;

            while (data.length) {
                data = data[0].items;
                i++;
            }

            data.push({
                name: label,
                type: 'folder',
                expanded: true,
                id: i,
                items: [],
                hasChildren: true,
                itemIndex: 0
            });

        } else {

            this.set('attributeTree', [{
                name: label,
                type: 'folder',
                expanded: true,
                id: 0,
                items: [],
                hasChildren: true,
                itemIndex: 0
            }]);

        }
    }

    this.set('folder_label', '');

    folderAttributeTree.setDataSource(this.attributeTree);

}

Проблема в том, что когда я пытаюсь добавить узел после его удаления - древовидная структура больше не перерисовывается (однако, если я проверяю console.log, данные добавляются к объекту, как и должно быть).

Я новичок в кендоу. Пожалуйста, помогите мне решить эту проблему.

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

1 Ответ

0 голосов
/ 11 июля 2019

После отправки моего вопроса в службу поддержки teleriks они ответили довольно полезным советом, который помог мне найти решение.Для тех, у кого похожая проблема, вот решение:

addLabel: function(e) {
                    e.preventDefault();

                    var label = this.get('folder_label'),
                        folderAttributeTree = $("#folderAttributeTree").data("kendoTreeView"),
                        attributeTree = this.get('attributeTree');

                    if (label !== null && label !== '') {

                        if (attributeTree.length) {

                            var deepest = this.findDeepest(this.attributeTree[0]);

                            folderAttributeTree.append({
                                name: label,
                                type: 'folder',
                                expanded: true,
                                id: deepest.id + 1,
                                items: [],
                                hasChildren: true
                            }, $("#folderAttributeTree .k-item:last"));

                        } else {

                            this.set('attributeTree', kendo.observableHierarchy([{
                                name: label,
                                type: 'folder',
                                expanded: true,
                                id: 0,
                                items: [],
                                hasChildren: true
                            }]));

                        }
                    }

                    this.set('folder_label', '');

                    folderAttributeTree.setDataSource(viewModel.attributeTree);

                }

Полезный совет заключался в использовании метода .append вместо .push Я не заметил, что у метода добавления есть второе (опционально) параметр под названием parentNode, который, по-видимому, был очень полезен в моем случае.

...