Cannot debug script afer selecting folders

4 posts, 0 answers
  1. Jermaine
    Jermaine avatar
    13 posts
    Member since:
    Feb 2013

    Posted 01 Apr 2014 Link to this post

    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.
  2. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 03 Apr 2014 Link to this post

    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.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Jermaine
    Jermaine avatar
    13 posts
    Member since:
    Feb 2013

    Posted 08 Apr 2014 Link to this post

    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);
     
         });
     }
     
     //]]>

     
  5. Vessy
    Admin
    Vessy avatar
    1385 posts

    Posted 11 Apr 2014 Link to this post

    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.

     
Back to Top