Hide message showed when drag and drop to root

4 posts, 1 answers
  1. Afandi
    Afandi avatar
    22 posts
    Member since:
    Aug 2014

    Posted 26 Apr 2018 Link to this post

    Hi Telerik,

     

    Can you advice on how to hide message showed when drag and drop to root? You may refer attached picture for your reference.

     

    Thank you,

    Afandi Sha'ari

  2.
  3. Neli
    Admin
    Neli avatar
    428 posts

    Posted 27 Apr 2018 Link to this post

    Hi Afandi,

    To achieve the desired behavior, you could subscribe to the drag event of the TreeView. In the event handler you could find the data regarding the target node. To find the parent of the source node the parent() method could be used. Then, you could compare for example the id of the target with the id of the parent node. In case they are equal, you could hide the message. 
    drag: function (e){        
       
        var target = e.sender.dataItem(e.dropTarget);
         
        var source = e.sender.dataItem(e.sourceNode)                   
        var parent = e.sender.parent(e.sender.findByText(source.text));
        var dataParent = e.sender.dataItem(parent)
         
        if(target.id == dataParent.id){                      
              $('.k-drag-clue').css('display', 'none');
        }else{
             $('.k-drag-clue').css('display', 'block');
        }                  
    }

    Here is a Dojo example, where the described behavior is implemented. 


    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Afandi
    Afandi avatar
    22 posts
    Member since:
    Aug 2014

    Posted 02 May 2018 Link to this post

    Hi Neli,

    Thanks for the reply.

    Actually I want to hide message that contains with '+' symbol.  Can this be done with simple styling, or would some JS be the way to go?


  7. Answer
    Neli
    Admin
    Neli avatar
    428 posts

    Posted 04 May 2018 Link to this post

    Hi Afandi,

    If I understand the issue correctly, you need to hide the entire message when a node is dragged over its root element. When the node is dragged over elements that are on the same level, the message even with a 'plus' sign should be visible.
    If this is the case, you could use the same approach as described in my previous reply, but with a different selector. 
    if(target.id == dataParent.id){                          
    $('.k-drag-status.k-i-plus').parent().css('display', 'none');
    }else{                          
    $('.k-drag-status.k-i-plus').parent().css('display', 'inline-block');
    }

    Here is the modified Dojo example.

    If you need to hide only the icon, you could remove the parent() method, as it is below:
    $('.k-drag-status.k-i-plus').css('display', 'none');

    In case you need to hide the '+' icon while dragging over the entire TreeView, you could use only css, as there will be no need to check for the parent.
    <style>
    .k-i-plus{
    display: none;
    }
    </style>

    If I did not understood the requirements correctly, could you please send us more details about the scenario, so we could provide appropriate assistance. 

    Regards,
    Neli
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top