1. Home
  2. Forum
  3. Blazor
  4. Drag operation causes the whole page to scroll down

Drag operation causes the whole page to scroll down

If I have a web page which does not show any scrollbars and has a treeview with data. Then the user drags a node with a downward direction, the web page will scroll to the bottom and keep scrolling and keep scrolling. The same is if the user drags to the right side of the page past the right boundary. This is a confusing user experience. We need the drag to honor the boundaries of the overall page size.

<div class="container ml-0 p-0">
    <div class="row p-0">
        <div class="col-sm-12">
            <ControlNavBar props="@props" />
        </div>
    </div>
    <div class="row p-0">
        <div class="col-2 p-0 pr-2" @onmouseover="mouse1">            
            <SfTreeView TValue="TreeItem" @ref="tree1" AllowDragAndDrop="true" AllowMultiSelection="false" CssClass="has-border">
                <TreeViewEvents TValue="TreeItem" OnNodeDragged="drag1" NodeDropped="drop1" OnNodeDragStart="start1" ></TreeViewEvents>
                <TreeViewFieldsSettings TValue="TreeItem" Id="Id" DataSource="@Data1" Text="Label" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings>
            </SfTreeView>
        </div>
    </div>
</div>

2 Replies
SP Sowmiya Padmanaban Syncfusion Team April 17, 2020 05:44 PM UTC

Hi Scott,  
 
Greetings from Syncfusion support. 
 
We have checked your reported problem that dragging a TreeView node that produce the scroller in the output web page. Currently, we don’t have any property to prevent the scroll when drag a TreeView node. However, we have already consider this as a feature from our end. It will be included in our Volume 2 Release which is expected to be released at the June 2020. 
 
Track the below link to know the feature status. 
 
But, you can resolve your issue by setting the target for dragArea of TreeView’s drag object in the created event. When setting the target, you can drag the element only inside the target element. It prevents the element from scrolling exceeding that element. 
 
Refer the below code snippet. 
  public void create() 
    {      
       JSRuntime.InvokeAsync<string>("TreeView_action");     
    } 
Host.cshtml 
 
  <script> 
        function TreeView_action() { 
            var treeview = document.getElementById("treeview").ej2_instances[0]; 
            treeview.dragObj.dragArea = ".control_wrapper"; 
                } 
     </script> 
 
Refer the below sample link. 
 
You can use the above solution until the feature included in TreeView component. 
 
We appreciate your patience until then. 
 
Regards,  
Sowmiya.P 


SP Sowmiya Padmanaban Syncfusion Team July 13, 2020 08:01 AM UTC

Hi Scott,  
 
We are glad to announce that our Essential Studio 2020 Volume 2 release v18.2.0.44 is rolled out and is available for download under the following link. 
  
  
In this release, we have included a feature for DragArea property of TreeView component. To access this feature, we suggest you to update the package to the latest version (18.2.0.44).  
  
Refer the release notes below. 
 
Refer the sample link below. 
 
Please note that we have introduced several API breaking changes in this release. We would like you to review the breaking changes from the following location before you upgrade. 
  
  
We thank you for your support and appreciate your patience in waiting for this release. Please get in touch with us if you would require any further assistance. 
  
Regards, 
Sowmiya.P 


Loader.
Up arrow icon