Copy checked node from source treeview to target treeview

3 posts, 0 answers
  1. Fabian
    Fabian avatar
    1 posts
    Member since:
    Oct 2015

    Posted 24 Nov 2015 Link to this post


          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:


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






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

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



    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. howell
    howell avatar
    1 posts
    Member since:
    Oct 2015

    Posted 08 Jun 2016 Link to this post



    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.



  3. Alex Gyoshev
    Alex Gyoshev avatar
    2527 posts

    Posted 10 Jun 2016 Link to this post


    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.

    Alex Gyoshev
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
Back to Top