Copy checked node from source treeview to target treeview

[Fabian]

Hi,

      I have two treeview widget (source and target treeview), when I check any sub-node from Optional root node of the source treeview (this treeview has three root levels -Optional, Mandatory and All- within are its corresponding sub-nodes ) I want copy the sub-node to the corresponding root node of the target treeview, for that I'm doing this:

 <script>

 function onCheckCopyNode(sourceTreeView, targetTreeView)   
    {
        sourceTreeView.dataSource.bind('change', function (e) {
            var sourceNodes = sourceTreeView.dataSource.view();
            var targetNode = targetTreeView.findByText('Optional');
             for (var i = 0; i < sourceNodes.length; i++) {
                var sourceChildren = sourceNodes[i].children.view();
                if (sourceChildren) {
                    for(var j = 0; j < sourceChildren.length; j++){
                        if((typeof sourceChildren[j].checked!==undefined)&&(sourceChildren[j].checked)){
                            targetTreeView.append(sourceChildren[j], targetNode);
                        } else  if((typeof sourceChildren[j].checked!==undefined)&&(sourceChildren[j].checked)){

                                        var element = targetTreeView.findByUid(children[i].uid);
                                        targetTreeView.remove(element);

                            }

                    }
                }
            }

        });

    }

 

function KendoHierarchicalDataSource(element, data, textFields, checkBoxOption, dragAndDropOption, onLoadCopyNode) {

    element.kendoTreeView({
        checkboxes: {
            template: "<input type='checkbox' #= (item.Selectable === false) ? 'disabled' : '' #>", //#= item.Selectable ? 'checked' : '' #
            checkChildren: checkBoxOption
        },
        dragAndDrop: dragAndDropOption,
        dataSource: data,
        dataTextField: textFields
    });
}

     $(document).ready(function () {
        KendoHierarchicalDataSource($('#s-field-treeview'), [{ MandatoryId: 1, MandatoryName: 'Optional' }, { MandatoryId: 2, Selectable : false, MandatoryName: 'Mandatory' }], ['MandatoryName', 'FieldName'], true, true, null);
        KendoHierarchicalDataSource($('#a-field-treeview'),@Html.Raw(Json.Encode(@ViewBag.fields.Data)), ['MandatoryName', 'FieldName'], true, true, onLoadCopyNode);
        onCheckCopyNode($('#a-field-treeview').data('kendoTreeView'), $('#s-field-treeview').data('kendoTreeView'));
    });

</script>

 

The code above inserts the checked sub-node to the corresponding root node of the target treeview; this is removed when I uncheck the source sub-node, the troubles comes when I try it add again because the target treeview doesn't refresh, then I need check another source sub-node for the change event to be fired

 

 

 

 

 

[howell]

Hello, 

 

Did you ever get an answer to your question, and if not would you be happy me re-posting this same issue, as i'm having this issue also.

 

Thanks

[Alex Gyoshev]

Hello,

To achieve this scenario, it might be simpler to bind to the TreeView check event, filter out the unchecked items from the datasource, and provide the resulting data to the second TreeView through the setDataSource method. We do not have such an example at this time, so the implementation is left to the developer.

Regards,
Alex Gyoshev
Telerik