1. Home
  2. Forum
  3. Blazor
  4. Allow DragDrop inside of grid but no dragselection

Allow DragDrop inside of grid but no dragselection

Hey, 


I am using a TreeGrid with Flat data. I allow Dra&Drop inside the grid and allow mutliselection too.

But if I try to prevent selection by dragging with AllowDragSelection="false", this is not working and I still can select by dragging.

Are I am doing something wrong or is this a bug?

This is my Grid definition:

    <SfTreeGrid @ref="PositionGrid" DataSource="@GridItems" IdMapping="Id" ParentIdMapping="ParentId" TreeColumnIndex="0" AllowRowDragAndDrop="true" AllowSelection="true" Toolbar="@ToolbarItems">

        <TreeGridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple" Mode="Syncfusion.Blazor.Grids.SelectionMode.Row" AllowDragSelection="false"></TreeGridSelectionSettings>

        <TreeGridEvents TValue="TreeGridPositionWrapper" RowDropped="RowDropMethod" RowDropping="AllowDropCheck" OnToolbarClick="(x)=>ToolbarClickHandler(x.Item.Id)" CommandClicked="(x)=>ToolbarClickHandler(x.CommandColumn.Title,x.RowData)"></TreeGridEvents>



5 Replies
SK Sreedhar Kumar Panarapu Sreenivasulu Panarapu Syncfusion Team March 3, 2025 11:16 AM UTC

Hi Alexander Kuhlmann,

We are currently validating the behavior you reported. Since the issue is related to dependent components, we require additional time to investigate it thoroughly.

We will provide you with a further update on March 5, 2025.

Please let us know if you need any further assistance.

Regards,
Sreedhar Kumar


SK Sreedhar Kumar Panarapu Sreenivasulu Panarapu Syncfusion Team March 7, 2025 01:22 PM UTC

Hi   Alexander Kuhlmann,

 

On further validation, we have considered the reported issue (“AllowDragSelection Property Not Working Correctly When AllowDragDrop is Enabled”) as a bug. Thank you for taking the time to report this issue and helping us improve our product. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle) and will include the fix in our upcoming NuGet release which is expected to be rolled out on March 25, 2025. Until then we appreciate your patience.

 

You can now track the status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link. 

AllowDragSelection Property Not Working Correctly When AllowDragDrop is Enabled in Blazor | Feedback Portal

 

Note: To view the above feedback, kindly login into your account. 

 

Disclaimer: Inclusion of this solution in the weekly release may change due to other factors including but not limited to QA checks and works reprioritization.

 

Regards,

Sreedhar Kumar.


SM Shek Mohammed Asiq Abdul Jabbar Syncfusion Team March 27, 2025 01:19 PM UTC

Hi Alexander,


Apologies for the delayed response.


While working on the reported issue, we encountered some behavioral changes that caused errors in the default functionalities. Upon further review, we would like to clarify that the current behavior (drag selection) is the intended behavior of the Grid component when both multiple selection and row drag and drop are enabled.


By default, drag selection will be enabled when row drag and drop is active. The AllowDragSelection property is used to enable or disable selection in the Grid only when row drag and drop is not enabled. Although the functionality may appear similar, the AllowDragSelection property and drag selection during row drag and drop are separate features. Therefore, it is not possible to disable drag selection based on the AllowDragSelection property when row drag and drop is enabled.


As an alternative, we have implemented a solution using JSInterop to prevent drag selection on the JavaScript side. Please refer to the code example and sample below for your reference.


<SfTreeGrid @ref="TreeGridInstance" DataSource="@TreeGridData" AllowRowDragAndDrop="true" TreeColumnIndex="1" IdMapping="TaskId" ParentIdMapping="ParentId" AllowPaging="true">

    <TreeGridPageSettings PageSize="2"></TreeGridPageSettings>

    <TreeGridSelectionSettings AllowDragSelection="false" Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></TreeGridSelectionSettings>

    <TreeGridColumns>

        . . . . .

    </TreeGridColumns>

</SfTreeGrid>

 

@code {

 

 public List<WrapData> TreeGridData { get; set; }

SfTreeGrid<WrapData> TreeGridInstance { get; set; }

protected override void OnInitialized()

{

     TreeGridData = WrapData.GetWrapData();

}

protected override async Task OnAfterRenderAsync(bool firstRender)

{

     if (firstRender)

     {           

         await JSRuntime.InvokeAsync<object>("preventDragSelection", TreeGridInstance?.ID, TreeGridInstance.SelectionSettings.AllowDragSelection);

     }

}


var dataGridElement = null;

var allowDragSelecion = true;;

function preventDragSelection(treegridID, dragSelection) {

    document.body.addEventListener('mousedown', function (e) {

        //Grid chekbox deselect row prevention...

        treeGridElement = document.getElementById(treegridID); // Get the grid element

        if (!treeGridElement) return; //  Exit if no grid element is found

        var allowDragSelecion =  dragSelection;

        if (!dragSelection) {     // Add listeners for mousemove and mouseup if the target as checkbox

            treeGridElement.addEventListener('mousemove', mouseMoveEvent, true);

            treeGridElement.addEventListener('mouseup', mouseUpEvent, true);

        }

        //Existing code.....

    });

}

function mouseUpEvent(event) {

    // Remove event listener if its mouse up.

    if (!treeGridElement) return;

    treeGridElement.removeEventListener('mousemove', mouseMoveEvent, true);

    treeGridElement.removeEventListener('mouseup', mouseUpEvent, true);

    treeGridElement = null;

}

 

function mouseMoveEvent(event) {

    if (!treeGridElement) return;

    if (!treeGridElement) {  // prevented drag selection if the drag target as checkbox

        event.preventDefault();

        event.stopPropagation();

    }

}

 


Refer to the attached sample in attachment. Please get back to us if you have further queries.


Sample: https://drive.google.com/file/d/1cXdrpZBWiLwTdsUTNaKuVHa-fJCrdNMb/view?usp=sharing      


Regards,

Shek



AK Alexander Kuhlmann April 16, 2025 12:46 PM UTC

Hi Shek, 


I am using your solution now.
I had to fix some parts in the JS file.


var dataGridElement = null;

var allowDragSelecion = true;;


function preventDragSelection(treegridID, dragSelection) {

    document.body.addEventListener('mousedown', function (e) {

        //Grid chekbox deselect row prevention...

        dataGridElement = document.getElementById(treegridID); // Get the grid element

        if (!dataGridElement) return; // Exit if no grid element is found

        allowDragSelecion = dragSelection;

        if (!dragSelection) { // Add listeners for mousemove and mouseup if the target as checkbox

            dataGridElement.addEventListener('mousemove', mouseMoveEvent, true);

            dataGridElement.addEventListener('mouseup', mouseUpEvent, true);

        }

        //Existing code.....

    });

}

function mouseUpEvent(event) {

    // Remove event listener if its mouse up.

    if (!dataGridElement) return;

    dataGridElement.removeEventListener('mousemove', mouseMoveEvent, true);

    dataGridElement.removeEventListener('mouseup', mouseUpEvent, true);

    dataGridElement = null;

}


function mouseMoveEvent(event) {

    if (!dataGridElement) return;

    if (!allowDragSelecion) { // prevented drag selection if the drag target as checkbox

        event.preventDefault();

        event.stopPropagation();

    }

}


Now the Drag inside my input is not rekognised by the Treegrid anymore, this is good.

But now the Row Drag an Drop inside the Grid is not working any more.

How can I prevent the drag operation from within the input but keep the RowDragDrop working?





SK Sreedhar Kumar Panarapu Sreenivasulu Panarapu Syncfusion Team April 17, 2025 12:31 PM UTC

Hi Alexander,

Thank you for your feedback and for identifying the issue with the initial implementation.

We’ve reviewed your scenario and understand the need to:

  • Prevent drag selection when interacting with input fields inside the TreeGrid (like during editing),
  • But allow row drag-and-drop functionality to remain unaffected.

To address this, we’ve revised and improved the JavaScript logic accordingly. Please refer to the updated code snippet below:

var treeGridElement = null;

var allowDragSelection = true;

var isFromInput = false;

 

function preventDragSelection(treegridID, dragSelection) {

    document.body.addEventListener('mousedown', function (e) {

        treeGridElement = document.getElementById(treegridID);

        if (!treeGridElement) return;

 

        allowDragSelection = dragSelection;

 

        const target = e.target;

 

        // 👇 Check if the click starts inside an input field or similar

        isFromInput = Boolean(

            target.tagName === 'INPUT' ||

            target.tagName === 'TEXTAREA' ||

            target.closest('.e-input')

        );

        if (!dragSelection && isFromInput) {

            treeGridElement.addEventListener('mousemove', mouseMoveEvent, true);

            treeGridElement.addEventListener('mouseup', mouseUpEvent, true);

        }

    });

}

 

function mouseUpEvent(event) {

    if (!treeGridElement) return;

 

    treeGridElement.removeEventListener('mousemove', mouseMoveEvent, true);

    treeGridElement.removeEventListener('mouseup', mouseUpEvent, true);

    treeGridElement = null;

    isFromInput = false;

}

 

function mouseMoveEvent(event) {

    if (!treeGridElement) return;

 

    // ✅ Only block drag if it started from an input

    if (!allowDragSelection && isFromInput) {

        event.preventDefault();

        event.stopPropagation();

    }

}

 

✅ Summary of Changes:

  • Ensures that drag operations are only blocked when initiated from input fields or textareas.
  • Leaves row drag-and-drop fully functional, allowing TreeGrid features like row reordering to work as expected.
  • Added a Boolean cast (Boolean(...)) to ensure reliable logic evaluation.

We’ve also included a sample project and demo video for your reference in the attached files. Let us know if you encounter any further issues or need customization based on your specific TreeGrid configuration.



Best regards,

Sreedhar Kumar.

 


Loader.
Up arrow icon