FileManager in Bootstrap modal is not initiallized

[Sotiris]

Greetings,

I am trying to use the FileManager control in a Razor Pages application. When I place the control in a razor page it works fine (see image1). If I try to place it in a Bootstrap modal window or try to place it inside a Collapse div in order to show it on demand, the control seems not to be initialized (see image2). If I simply resize the browser (Chrome), the control is displayed correctly (image3).

Here is my simple .cshtml code:

@page

@model Sandbox2Model

<div class="mb-1 mx-2 ">

    <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalFMThumb">open modal</button>

</div>

<div class="modal fade" id="modalFMThumb" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-sm-down">

        <div class="modal-content">

            <div class="modal-header">

                <h1 class="modal-title fs-5" id="exampleModalLabel">FileManager in modal example</h1>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <ejs-filemanager id="filemanagerThumb"

                                 allowMultiSelection="false">

                    <e-filemanager-navigationpanesettings visible="true"></e-filemanager-navigationpanesettings>

                    <e-filemanager-ajaxsettings getImageUrl="https://localhost:7114/api/FileManager/GetImage"

                                                url="https://localhost:7114/api/FileManager/FileOperations"

                                                downloadUrl="https://localhost:7114/api/FileManager/Download"

                                                uploadUrl="https://localhost:7114/api/FileManager/Upload">

                    </e-filemanager-ajaxsettings>

                </ejs-filemanager>

            </div>

            <div class="modal-footer">

            </div>

        </div>

    </div>

</div>

Attachment: images_8f2801cd.rar

[Indhumathy Loganathan]

Hi Sotiris,

Greetings from Syncfusion support.

We understand the reported query in the File Manager component. The reported issue occurs due to the height of parent element is not set on initial rendering and FileManager is not rendered correctly. You can resolve this issue by including the below code in Created event.

function onCreated() {

    var filemanagerObj = document.getElementById("file").ej2_instances[0];

    setTimeout(function () { filemanagerObj.refreshLayout(); }, 200);

}

Try this suggestion at your end and get back to us if you need any further assistance.

Regards,

Indhumathy L

[Sotiris]

Hi!

Thanks for the feedback, but your suggestion does not work. 

Here is my updated code:

<section>

    <div class="container">

        <div class="mb-1 mx-2 ">

            <button class="btn btn-sm btn-primary" type="button" data-bs-toggle="modal" data-bs-target="#modalFMThumb">open modal</button>

        </div>

    </div>

</section>

<div class="modal fade" id="modalFMThumb" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-sm-down">

        <div class="modal-content">

            <div class="modal-header">

                <h1 class="modal-title fs-5" id="exampleModalLabel">FileManager in modal example</h1>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <ejs-filemanager id="filemanagerThumb" created="onCreated"

                                 allowMultiSelection="false">

                    <e-filemanager-navigationpanesettings visible="true"></e-filemanager-navigationpanesettings>

                    <e-filemanager-ajaxsettings getImageUrl="https://localhost:7114/api/FileManager/GetImage"

                                                url="https://localhost:7114/api/FileManager/FileOperations"

                                                downloadUrl="https://localhost:7114/api/FileManager/Download"

                                                uploadUrl="https://localhost:7114/api/FileManager/Upload">

                    </e-filemanager-ajaxsettings>

                </ejs-filemanager>

            </div>

            <div class="modal-footer">

            </div>

        </div>

    </div>

</div>

@section Scripts {

    <script>

        function onCreated() {

            var filemanagerObj = document.getElementById("filemanagerThumb").ej2_instances[0];

            setTimeout(function () { filemanagerObj.refreshLayout(); }, 200);

        }

    </script>

}

[Prasanth Madhaiyan]

Hi Sotiris,

We have validated your reported query in the ASP.NET Core FileManager component by preparing a sample using the shared code snippets. We understand that you are facing an issue where the layout folder/file details are not shown when initializing the FileManager within the Bootstrap modal. To overcome this issue, you need to refresh the FileManager layout when you click the open modal button to open the FileManager component.

Refer to the below code snippets.

[Index.cshtml]

 

<section>

    <div class="container">

        <div class="mb-1 mx-2 ">

            <button class="btn btn-sm btn-primary" onclick="openModal()" type="button" data-bs-toggle="modal" data-bs-target="#modalFMThumb">open modal</button>

        </div>

    </div>

</section>

 

<div class="modal fade" id="modalFMThumb" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered modal-xl modal-fullscreen-sm-down">

        <div class="modal-content">

            <div class="modal-header">

                <h1 class="modal-title fs-5" id="exampleModalLabel">FileManager in modal example</h1>

                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>

            </div>

            <div class="modal-body">

                <ejs-filemanager id="filemanagerThumb" allowMultiSelection="false">

                    <e-filemanager-navigationpanesettings visible="true"></e-filemanager-navigationpanesettings>

                    <e-filemanager-ajaxsettings url=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations

                                                downloadUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download

                                                uploadUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload

                                                getImageUrl=https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage>

                    </e-filemanager-ajaxsettings>

                </ejs-filemanager>

            </div>

            <div class="modal-footer">

            </div>

        </div>

    </div>

</div>

 

 

<script>

    function openModal(){

        var filemanagerObj = document.getElementById("filemanagerThumb").ej2_instances[0];

        setTimeout(function () { filemanagerObj.refreshLayout(); }, 200);

    }

</script>

For your reference, we have attached the sample.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/COREFI~2-878475108

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

[Sotiris]

Great! It works like a charm!

Thank you very much!

Best Regards,
Sotiris