javascriptjquerykendo-uitreeviewkendo-treeview

The kendoTreeView is not getting re-rendered after node removal upon adding new node


There are two event handlers: one adds a node to the tree, the other one - removes it. And it works fine as expected until the node gets removed by calling "check" event.

here is a tree (upon node check - it gets removed):

$('#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");

here is the add node method (it creates always nested elements):

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);

}

The problem is, when I try adding a node after its removal - a treeview is no more re-rendering (however if I check the console.log the data is getting added to the object as it should).

I'm new to kendo-ui. Please help me solving this.

Thank you in advance!


Solution

  • After submitting my question to teleriks support they answered with a pretty useful hint, that tended me to found a solution. For those, who has similar problem, here is the solution:

    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);
    
                    }
    

    The helpful hint was laying in using .append method instead of .push I didn't notice the append method had the second (optional) parameter called parentNode which apparently was so helpful in my case.