Hide message showed when drag and drop to root

[Afandi]

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

[Neli]

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

[Afandi]

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?

[Neli]

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