[FileExplorer] Mobile-Support

[Joakim]

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!

[Ianko]

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