filemanager cancel keyboard events

[Jacek]

how to cancel keyboard shortcuts events in filemanager in asp mvc?
How to cancel delete key pressed events?

[Indhumathy Loganathan]

Hi Jacek,

Greetings from Syncfusion support.

We do not have any direct properties to prevent keyboard actions in the FileManager component. However, you can achieve your requirement by binding the keyup event for the corresponding view (large icons, details) of the FileManager component and preventing the keyboard interaction using the keyboard prevention method. In the below solution, we have prevented the entire keyboard interaction of the File Manager component (including left and right keys).

Refer to the below code snippet.

function created() {

    var largeicon_view = document.getElementById('overview_largeicons');

    var details_view = document.getElementById('overview_grid');

    //Bind keyup event for both LargeIcons and Details view.

    largeicon_view.addEventListener('keyup', this.keyDownHandler);

    details_view.addEventListener('keyup', this.keyDownHandler);

    ...

}

function keyDownHandler(event) {

    //Prevent all the keyboard interactions.

    event.preventDefault();

    event.stopPropagation();

    event.stopImmediatePropagation();

}

Try the suggested solution at your end and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Jacek]

var largeicon_view = document.getElementById('overview_largeicons');

there is not any element such as document.getElementById('overview_largeicons').

neither there is not any element such as document.getElementById('overview_grid').

is there any other name for wanted element??

[Prasanth Madhaiyan]

Hi Jacek,

We have validated your reported query in the ASP.NET MVC FileManager component by preparing the sample. We understand that you want to prevent keyboard actions in the FileManager component. To fulfill your requirement, please refer to the below code snippets.

[Index.cshtml]

 

<div>

    <div class="control-section">

        <div class="sample-container">

            <!-- Declare filemanager element -->

            @Html.EJS().FileManager("filemanager").AjaxSettings(new Syncfusion.EJ2.FileManager.FileManagerAjaxSettings

            {

                Url = "/Home/FileOperations",

                GetImageUrl = "/Home/GetImage",

                UploadUrl = "/Home/Upload",

                DownloadUrl = "/Home/Download"

            }).Created("OnCreated").Render()

            <!-- end of filemanager element -->

        </div>

    </div>

</div>

 

<script>

    function OnCreated() {

        var largeicon_view = document.getElementById('filemanager_largeicons');

        var details_view = document.getElementById('filemanager_grid');

        //Bind keyup event for both LargeIcons and Details view.

        largeicon_view.addEventListener('keyup', keyDownHandler);

        details_view.addEventListener('keyup', keyDownHandler);

    }

 

    function keyDownHandler(event) {

        // Prevent delete key pressed action

        //if (event.key === 'Delete') {

        //    event.preventDefault();

        //    event.stopPropagation();

        //    event.stopImmediatePropagation();

        //}

 

        //Prevent all the keyboard interactions.

        event.preventDefault();

        event.stopPropagation();

        event.stopImmediatePropagation();

 

    }

</script>

For your reference, we have attached the sample. Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: MVCFileManager_73aaf9a8.zip