[FileExplorer] Mobile-Support

2 posts, 0 answers
  1. Joakim
    Joakim avatar
    5 posts
    Member since:
    Apr 2016

    Posted 07 Jun Link to this post

    Good afternoon,

     

    After some extended searching on the forums, Google and SO I have been unable to find any way to integrate mobile-support (long-touch) for FileExplorer.

    What I want is to show the context-menu (rename, download etc...) when a user is on a handheld device (most usually an iPad using Safari). 

    I've found some threads showing how to add mobile-support for radschedulers and attempted to integrate it into my code, but to no avail.

     

    To clarify: I want my FileExplorer to handle any longtouch on a handheld device as a right-click event by a mouse (desktop). 

    <%@ Control Language="vb" AutoEventWireup="false" CodeBehind="FileExplorer.ascx.vb" Inherits="WSC.DNN.WSCFileExplorer.FileExplorer" %>
    <%@ Register assembly="Telerik.Web.UI" namespace="Telerik.Web.UI" tagprefix="telerik" %>
    <script type="text/javascript">
        (function (global, undefined) {
            function OnClientFileOpen(oExplorer, args) {
                var item = args.get_item();
                var fileExtension = item.get_extension();
     
                var fileDownloadMode = true;
                if ((fileDownloadMode == true) && (fileExtension == "jpg" || fileExtension == "gif" || fileExtension == "png")) {// Download the file
                    // File is a image document, do not open a new window
                    args.set_cancel(true);
     
                    // Tell browser to open file directly
                    var requestImage = window.location.origin + "/Desktopmodules/WSCFileExplorer/Controls/Handler.ashx?path=" + item.get_url();
                    if (requestImage.indexOf("localhost") != -1)
                    {
                        requestImage = window.location.origin + "/jaberodnn7/Desktopmodules/WSCFileExplorer/Controls/Handler.ashx?path=" + item.get_url();
                    }
                    //var requestImage = "Handler.ashx?path=" + item.get_url();
                    //document.location = requestImage;
                    window.open(requestImage);
                }
            }
            global.OnClientFileOpen = OnClientFileOpen;
        })(window);
     
        jQuery(function ($) {
            var setupModule = function () {
                $('#frmWSCRepository').dnnPanels();
                $('#frmWSCRepository .dnnFormExpandContent a').dnnExpandAll({
                    targetArea: '#frmWSCRepository'
                });
            };
            setupModule();
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(function () {
                // note that this will fire when _any_ UpdatePanel is triggered,
                // which may or may not cause an issue
                setupModule();
            });
        });
     
        //function OnClientLoad(explorer, args) {
        //    var chkBox = $get("fileexplorer1_chkOverwrite");
        //    chkBox.checked = true;
        //    chkBox.parentNode.style.display = "none";
        //};
        //function OnClientFileOpen(sender, args) {
        //    if (!args.get_item().isDirectory()) {
        //        var href = args.get_item().get_path();
        //        window.location.href = href;
        //        args.set_cancel(true);
        //    }
        //};
    </script>
     
    <div class="dnnForm dnnClear" id="frmWSCRepository">
        <h2 id="WSCRepositoryExp" class="dnnFormSectionHead">
            <a href="#">Documents Repository</a></h2>
        <fieldset class="dnnClear">
            <telerik:RadFileExplorer runat="server" ID="WSCFileExplorer" Width="520px" Height="310px" Language="en-GB" PageSize="50" EnableOpenFile="true" onclientfileopen="OnClientFileOpen">
            </telerik:RadFileExplorer>
            <asp:CustomValidator ID="CustomValidator1" runat="server" CssClass="dnnFormMessage dnnFormValidationSummary"
            ErrorMessage="CustomValidator" Display="Dynamic"></asp:CustomValidator>
        </fieldset>
     
     
     
        <!-- javacsript taking care of the download (rightclick) event -->
     
        <script>
            function extendedFileExplorer_onGridContextItemClicked(oGridMenu, args) {
                var menuItemText = args.get_item().get_text();
                if (menuItemText == "Download") {// 'Download' command
                    extendedFileExplorer_sendItemsPathsToServer();
                }
            }
     
            function extendedFileExplorer_sendItemsPathsToServer() {
                var oExplorer = $find("<%= WSCFileExplorer.ClientID%>"); // Find the RadFileExplorer ;
            var selectedItems = oExplorer.get_selectedItems(); // Retrieve the selected items ;
            var selectedItemsPaths = extendedFileExplorer_combinePathsInAString(selectedItems); // Get the paths as a string in specific format ;
     
            var hiddenField = $get("<%= ctlHiddenField.ClientID %>"); // Find the hiddenField
            hiddenField.value = selectedItemsPaths;
            __doPostBack("<%= btnDownload.UniqueID %>", ""); // Call the 'btnDownload_Click' function on the server ;
        }
     
        function extendedFileExplorer_combinePathsInAString(arrayOfSelectedItems) {
            var itemPaths = new Array();
            for (var i = 0; i < arrayOfSelectedItems.length; i++) {
                // Pass all the selected paths ;
                itemPaths.push(arrayOfSelectedItems[i].get_path());
            }
     
            // Return a string that contains the paths ;
            return itemPaths.join("|");
        }
    </script>

    Thanks!

  2. Ianko
    Admin
    Ianko avatar
    1535 posts

    Posted 10 Jun Link to this post

    Hello Joakim,

    Currently, RadFileExplorer does not support a Mobile rendering (http://docs.telerik.com/devtools/aspnet-ajax/controls/fileexplorer/mobile-support/render-modes).

    Your requirement involves an entire reconstruction of how RadFileExplorer works and operates on the browser. In such cases, different render modes are implemented and with the help of DeviceDetection framework the render mode can dynamically change according to the device. Which changes the rendering and the event handling behind the scenes.

    Shortly, with no Mobile rendering there is no built-in facility that can enable the mobile (touch) events to be handled with the current structure and functionality.

    I can suggest you to post your query in out feedback portal (http://feedback.telerik.com/Project/108/) so to be properly evaluated as a feature request. 

    Regards,
    Ianko
    Telerik
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top