1. Home
  2. Forum
  3. ASP.NET MVC - EJ 2
  4. AllowDragAndDrop(false) is not working

AllowDragAndDrop(false) is not working

we are trying to disable DragandDrop option. AllowDragAndDrop(false) is not working and none file drag events are triggering.

We are using Chrome browser. How to solve this problem please let us know.


Is there any event to capture file/folder checkbox unchecked event?

5 Replies
SP Sowmiya Padmanaban Syncfusion Team April 27, 2020 07:53 AM UTC

Hi Mahesh,  
 
Greetings from Syncfusion support. 
 
Query 1 – DragAndDrop operations. 
 
We have checked your reported problem with FileManager component but it is not reproducing at our end. When setting the AllowDragAndDrop as false, it prevents the drag and drop operations in FileManager component. Refer the below code snippet for FileManager component. 
 
    @Html.EJS().FileManager("filemanager").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 
            { 
                GetImageUrl = "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage", 
            }).AllowDragAndDrop(false).FileSelect("AfterFileSelection").FileSelection("beforeFileSelection").Render() 
 
Refer the below link, to more about the drag and drop support and events triggered in dragging. 
 
 
If you are expecting to prevent the drag and drop functionality only in upload operation of FileManager component, then you need to set the drop area of FileManager component as null in created event. It prevents the drag and drop operations. 
 
Refer the below code snippet. 
   <!-- Declare filemanager element --> 
            @Html.EJS().FileManager("filemanager").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 
            { 
                GetImageUrl = "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage", 
            }).AllowDragAndDrop(false).Created("created"). Render() 
<script> 
    function created() { 
        var filemanagerInstance = document.getElementById("filemanager").ej2_instances[0]; 
        filemanagerInstance.uploadObj.dropArea = null; 
    } 
</script> 
 
 
 
Query2 – Event triggers for file check. 
 
In FileManager component, FileSelection event is triggered before checking the file/folder. And also FileSelect event is triggered for after selecting the file/folder. 
 
  @Html.EJS().FileManager("filemanager").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 
            { 
                GetImageUrl = "https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage", 
            }).AllowDragAndDrop(false).FileSelect("AfterFileSelection").FileSelection("beforeFileSelection").Render() 
<script> 
    function AfterFileSelection(args) { 
        // Event triggered after the file checked or unchecked. 
        console.log(args); 
    } 
    function beforeFileSelection(args) { 
        // Event triggered before the file checked or unchecked. 
        console.log(args); 
    } 
</script> 
 
 
Refer the below link to know more about the file selection event. 
 
Refer the sample link for your reference. 
 
To know more about the FileManager component. Refer the below links. 
 
 
 
 
If we misunderstood your requirement, can you please share the below details. It will help us to resolve your problem at the earliest. 
·        Are you expecting to disable the drag and drop in particular file/folder. 
·        Exact requirement. 
·        Please, let us know which file provider you are using for File Manager in your application. Refer the  below link to know about the available File Manager’s file provider services. 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


MM Mahesh Machina April 27, 2020 08:05 AM UTC

Thank you Sowmiya.

We are able to prevent dropping the file. Thank you

One more query is it possible to scroll file manager content on my page body scroll and change file manager height


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team April 27, 2020 02:22 PM UTC

Hi Mahesh, 
 
Thanks for the update. 
 
Unfortunately, we are unable to understand your exact requirement with File Manager from your query. Could you please share us more details regarding your requirement? This information would help us to understand your exact requirement and to provide you the prompt solution. 
 
Regards, 
Shameer Ali Baig S. 


MM Mahesh Machina April 28, 2020 12:32 PM UTC

Our requirement is simple

user should not be allowed to drag&drop the file into FileManager area

SP Sowmiya Padmanaban Syncfusion Team April 29, 2020 08:52 AM UTC

Hi Mahesh,  
 
Thanks for the update. 
 
Query 1- Prevent file from dropping. 
 
By setting the dropArea of upload object as null, we can prevent the file from dropping into the FileManager area. We have used this solution in the sample which provided to you in our previous update. Can you please ensure the above provided solution. 
 
Query 2 – Change the height of FileManager component. 
 
In FileManager component, we have provided a Height API property. Using this property , you can change the height of the FileManager component. Refer the below code snippet. 
 
  @Html.EJS().FileManager("file").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings 
            { 
            }).Height("600px").Render() 
 
If we misunderstood your requirement, then please share us the video footage or screenshot of your problem. It will help us to check and help you to resolve the problem at the earliest. 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon