This is a migrated thread and some comments may be shown as answers.

Cannot debug script afer selecting folders

3 Answers 150 Views
FileExplorer
This is a migrated thread and some comments may be shown as answers.
Jermaine
Top achievements
Rank 1
Jermaine asked on 01 Apr 2014, 08:14 PM
I am using Firebug to debug my application.  The Script window is filled with unreadable characters when I click on files or folder in the FileExplorer window.  For example,
vKRbWcp115O9Ai2IejVeFDu72S0JXgFIYwWxaBKlTf5cQ1M3igsUrKz5SbSzBwx2DZN6cJqhlMDQ={"count":5,"data":[{"Path":"

I cut the example short but It seems the explorer is injecting these characters and replacing my page's code.  The application runs without errors except it will not respond to functions that occur after selecting folders and files in the FileExplorer.  What could be the issue?  Thanks.

3 Answers, 1 is accepted

Sort by
0
Vessy
Telerik team
answered on 03 Apr 2014, 02:15 PM
Hi Jermaine,

I tried to debug a handler of the FileExplorer's ClientItemSelected event and the function is the same on my page and in the browser. You can see a video from my test here. Could you please provide a sample fully runnable project where the issue can be reproduced? Bellow is the markup from my test:
<telerik:RadFileExplorer runat="server" ID="rfeExplorer" OnClientItemSelected="clientItemSelected">
    <Configuration ViewPaths="~/Images" DeletePaths="~/Images" UploadPaths="~/Images" EnableAsyncUpload="true" />
</telerik:RadFileExplorer>
<script>
    function clientItemSelected(explorer, args) {
        debugger;
        var a = 5;
        console.log(a);
    }
</script>

Additionally, please note that there is a known FireBug issue bringing a similar result (the debugger is hit properly, but not the right function is rendered inside the Script tab). If this is the case - I am afraid that this behavior cannot be controlled by our products, but usually it is fixed by refreshing the browser, deleting the cache, restarting the computer, etc.

Kind regards,
Vessy
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
0
Jermaine
Top achievements
Rank 1
answered on 08 Apr 2014, 04:43 PM
I was able to partially get around the issue by moving the file explorer to it's own aspx page that opens modally when a user clicks a button, such as your File Selector Dialog Example.  However, it doesn't appear to be fixing the issue of breakpoints being ignored after making selections and closing the dialog.  The default page's code is ignoring breakpoints in Firebug, Visual Studio 2k10, and IE debuggers.  I verified that the application is performing it's task by placing alerts throughout the code and all seems well except that I cannot debug.  The application has a handler.ashx file that uses the file paths received in a queue from the file explorer to download files from the server to a client's folder path.  No breakpoints are being hit.  So I need to debug to determine why my functions are falling silent.  I cannot provide a runnable sample of my app due to proprietary information used in the business logic used throughout the application.  However, I can tell you that the file explorer is being used in the same fashion as the File Selector Dialog and is using the CustomFileSystemProvider.vb from your example here.  Here's a code snippet:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Explorer.aspx.vb" Inherits="MasterTemplate.Explorer" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<head runat="server">
    <title>File Explorer</title>
         <style type="text/css">
 
          html, body
 
          {
               margin: 0;
               padding: 0;
          }
 
     </style>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server" />
       <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server"
            EnableOpenFile="false"
            ExplorerMode="Default" Width="100%"
                OnClientLoad="attachHandlers" >
                <Configuration AllowMultipleSelection="true">
                </Configuration>
       </telerik:RadFileExplorer>
 
       <script type="text/javascript">
 
           //<![CDATA[
           //A function that will return a reference to the parent radWindow in case the page is loaded in a RadWindow object
 
           function getRadWindow() {
 
               var oWindow = null;
               if (window.radWindow) oWindow = window.radWindow;
               else if (window.frameElement.radWindow) oWindow = window.frameElement.radWindow;
               return oWindow;
            ]
           }
 
           //  Select button added to the file explorer for initiating file queue population implemented instead of single clientfileselection from within file explorer
           function toolbarClicked(toolbar, args) {
 
               var buttonValue = args.get_item().get_value();
 
               if (buttonValue == "SelectCommand") {
 
                   // Find the RadFileExplorer
                   var oExplorer = $find("<%= RadFileExplorer1.ClientID %>");
 
                   // Get the selected Files form the RadFileExplorer
                   var filesArray = oExplorer.get_selectedItems();
 
                   // Cancel the default dialog - Errors here in my solution so commented out
//                   args.set_cancel(true);
 
                   // get reference to the RadWindow
                   var wnd = getRadWindow();
 
                   //Get a reference to the opener parent page using RadWndow
                   var openerPage = getRadWindow().BrowserWindow;
                    
                   //if you need the URL for the item, use get_url() instead of get_path()
                   // Changed from onFileSelected to custom added button's toolbarClicked function on parent page
                   openerPage.OnFileSelected(filesArray);
 
                   // Close the RadWindow
                   wnd.close();
               }
           }
 
           function gridContextMenuClicked(toolbar, args) {
 
           }
           function treeContextMenuClicked(toolbar, args) {
 
           }
 
           function attachHandlers(explorer, args) {
 
               //support for grid context menu
               var toolbar = explorer.get_toolbar();
               toolbar.add_buttonClicked(toolbarClicked);
 
               //support for grid context menu
               var gridContextMenu = explorer.get_gridContextMenu();
               gridContextMenu.add_itemClicked(gridContextMenuClicked);
 
               //TreeView handler is attached in codebehind
           }
               //]]>
          </script>
    </form>
</body>
</html>

The default.aspx page that contains the radWindow and button for opening the Explorer.aspx/radFileExplorer follows:

function RadMenu1ItemClicked(sender, args) {
 
     var itemValue = args.get_item().get_value();
 
     if (itemValue == "Internal Wire!") {
 
         extendedFileExplorer_sendItemsToServer();
     }
 }
 
 function extendedFileExplorer_sendItemsToServer() {
 
     //  Obtains webMethod for loading path setting variables for client and codebehind processing of download request
     getInternalPath();
      
     // Retrieve an array of selected items from the queue
     var selectedItems = {};
 
     // Iterate over queue rows to get the input text values of the first input box, which is the files virtual source path
     $(".ReceiveInternal > table").each(function () {
 
         var fields = $(this).find(":text");
         selectedItems = fields.eq(0).val();
         
     });
 
     //  The selectedItemsPaths value holds the selected files. This function sends them to the handler.ashx file for downloading to client
     $.ajax({
 
         type: "POST",
         url: "default.aspx/getFilesinQueue",
         data: "{ 'selectedItems': '" + selectedItems + "' }",
         contentType: "application/json; charset=utf-8",
         dataType: "json",
         success: function (data) {
 
         },
         error: function (e) {
         }
     });
 
 }
 
 //  Add functions that will open the Explorer.aspx page modally on button click and will pass values to default.aspx page on user file selection
 
 //<![CDATA[
 
 function OpenFileExplorerDialog() {
 
     var wnd = $find("<%= ExplorerWindow.ClientID %>");
 
     wnd.show();
 
 }
 
 
 
 //  This function is called from a code declared on the Explorer.aspx page
 // This function receives an list of files from the file Explorer populates the filequeue
 function OnFileSelected(filesSelected) {
 
     // Configure transmit menu items for Receive Internal operations
     blnshowExplorer = true;
     blnshowupload = false;
 
     EnableMenuAll();
 
     $.each(filesSelected, function (int, file) {
 
         //  Add the file to the file queue
         AddFile(file.get_name(), file.get_path());
 
         // Set Options
         var options = { autoHeight: false, collapsible: true, active: false, heightStyle: "content" };
 
         // Create the message
         $('#AccordianPane').append('<h2>' + file.get_name() + '</h2><div><p>' + file.get_name() + '</p></div>');
 
         // Apply Accordian style
         $('#AccordionPane').accordion('destroy').accordion(options);
 
     });
 }
 
 //]]>

 
0
Vessy
Telerik team
answered on 11 Apr 2014, 02:31 PM
Hi Jermaine,

I examined the provided code and after making it runnable the debugger was hit properly on my side - video. I assume that there might be another part of your application, which is causing the issue.

For your convenience I am attaching my test project so you can test in on your side. On a side note, you can open a formal support ticket where to provide a simplified runnable project, so the source code will be used only for testing purposes and will not be published.

Kind regards,
Vessy
Telerik
 

Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

 
Tags
FileExplorer
Asked by
Jermaine
Top achievements
Rank 1
Answers by
Vessy
Telerik team
Jermaine
Top achievements
Rank 1
Share this question
or