This is a migrated thread and some comments may be shown as answers.

Copy checked node from source treeview to target treeview

2 Answers 86 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Fabian
Top achievements
Rank 1
Fabian asked on 24 Nov 2015, 10:22 PM

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

 

 

 

 

 

2 Answers, 1 is accepted

Sort by
0
howell
Top achievements
Rank 1
answered on 08 Jun 2016, 10:39 AM

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

0
Alex Gyoshev
Telerik team
answered on 10 Jun 2016, 07:10 AM

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
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
TreeView
Asked by
Fabian
Top achievements
Rank 1
Answers by
howell
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or