Deploy Document Editor component for Mobile

19 Dec 20221 minute to read

Document editor component for Mobile

At present, Document editor component is not responsive for mobile, and the editing functionalities aren’t ensured in mobile browsers. Whereas it works properly as a document viewer in mobile browsers.

Hence, it is recommended to switch the Document editor component as read-only in mobile browsers. Also, invoke fitPage method with FitPageWidth parameter in document change event, such as to display one full page by adjusting the zoom factor.

CSHTML

<ejs-documenteditorcontainer id="container" enableToolbar=true documentChange="onDocumentChange" height="590px">
</ejs-documenteditorcontainer>
<script>
    function onDocumentChange() {
        var container = document.getElementById("container").ej2_instances[0];
        //To detect the device
        var isMobileDevice = /Android|Windows Phone|webOS/i.test(navigator.userAgent);

        if (isMobileDevice) {
            container.restrictEditing = true;
            setTimeout(() => {
                container.documentEditor.fitPage("FitPageWidth");
            }, 50);
        }
        else {
            container.restrictEditing = false;
        }
    }
</script>

NOTE

You can use the restrictEditing in DocumentEditorContainer and isReadOnly in DocumentEditor based on your requirement to change component to read only mode.