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

Select a file in code

7 Answers 307 Views

FileExplorer

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

Jason asked on 01 Apr 2009, 08:53 PM

I'm using the FileExplorer in a RadWindow called from a main page and would like to have a specific filename selected when the FileExplorer is displayed in the window. I have the javascript setup to pass the file name to and from the window so that's not the real problem. However, I don't seem to be able to find any way to select a file using either sever-side or client-side events. Can anyone help?

I have enclosed the main page and radWindow page code:

default.aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <script type="text/javascript">  
        
                    function clientShow(sender, eventArgs) {  
        
                        var txtInput = document.getElementById("TextBox1");  
        
                        sender.argument = txtInput.value;  
        
                    }  
        
                    function clientClose(sender, args) {  
        
                        if (args.get_argument() != null) {  
        
                            alert("'" + sender.get_name() + "'" + " was closed and returned the following argument: '" + args.get_argument() + "'");  
        
                        }  
        
                    }  
        
                </script> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server" > 
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                </div> 
        
                <asp:TextBox ID="TextBox1" runat="server" Width="250px">default.aspx</asp:TextBox> 
        
                &nbsp;<asp:Button ID="Button1" runat="server" onclick="Button1_Click"   
        
                    Text="Select File" /> 
        
                <br /> 
        
                <telerik:RadWindow ID="RadWindow1" runat="server" NavigateUrl="file.aspx" Width="550px" Height="450px" 
        
                    OnClientClose="clientClose" OnClientShow="clientShow">  
        
                </telerik:RadWindow> 
        
                </form> 
        
            </body> 
        
            </html>

file.aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="file.aspx.cs" Inherits="file" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <script type="text/javascript">  
        
                    function GetRadWindow() {  
        
                        var oWindow = null;  
        
                        if (window.radWindow)  
        
                            oWindow = window.radWindow;  
        
                        else if (window.frameElement.radWindow)  
        
                            oWindow = window.frameElement.radWindow;  
        
                        return oWindow;  
        
                    }  
        
                    function receiveArg() {  
        
                        txtInput = document.getElementById('TextBox1');  
        
                        var currentWindow = GetRadWindow();  
        
                        txtInput.value = currentWindow.argument;  
        
                    }  
        
                    function returnArg() {  
        
                        txtInput = document.getElementById('TextBox1');  
        
                        var oWnd = GetRadWindow();  
        
                        oWnd.close(txtInput.value);  
        
                    }   
        
                </script> 
        
            </head> 
        
            <body onload="receiveArg();" > 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" Height="300px"   
        
                        Width="450px" > 
        
            <Configuration SearchPatterns="*.*" ViewPaths="~/"></Configuration> 
        
                    </telerik:RadFileExplorer> 
        
                    <br /> 
        
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
        
                    <asp:Button ID="Button1" runat="server" Text="Close" OnClientClick="returnArg()" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

Many thanks in advance.
Jason

7 Answers, 1 is accepted

answered on 04 Apr 2009, 06:49 PM

Shaun,

many thanks. It worked great. I modified the way that I call the RadWindow and embed the filename into the querystring. I then call this server-side code during the page_load event. Much appreciated.

I enclose my code behind file here:

    
            using System;  
        
            using System.Collections.Generic;  
        
            using System.Linq;  
        
            using System.Web;  
        
            using System.Web.UI;  
        
            using System.Web.UI.WebControls;  
        
            public partial class file : System.Web.UI.Page  
        
            {  
        
                protected void Page_Load(object sender, EventArgs e)  
        
                {  
        
                    if (!Page.IsPostBack)  
        
                    {  
        
                        if (Request.QueryString.HasKeys())  
        
                        {  
        
                            string initialPath = Request.QueryString["filename"].ToString();  
        
                            RadFileExplorer1.InitialPath = initialPath;  
        
                            HiddenField1.Value = Request.QueryString["sender"].ToString();  
        
                        }  
        
                    }  
        
                }  
        
                protected void Button2_Click(object sender, EventArgs e)  
        
                {  
        
                    string fileName = TextBox1.Text;  
        
                    RadFileExplorer1.InitialPath = fileName;  
        
                }  
        
            }

And my aspx file here:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="file.aspx.cs" Inherits="file" %> 
        
            <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head runat="server">  
        
                <title></title>  
        
                <script type="text/javascript">  
        
                    function GetRadWindow() {  
        
                        var oWindow = null;  
        
                        if (window.radWindow)  
        
                            oWindow = window.radWindow;  
        
                        else if (window.frameElement.radWindow)  
        
                            oWindow = window.frameElement.radWindow;  
        
                        return oWindow;  
        
                    }  
        
                    function returnArg() {  
        
                        var currentWindow = GetRadWindow();  
        
                        var txtInput = document.getElementById('TextBox1').value;  
        
                        currentWindow.argument = txtInput;  
        
                        currentWindow.close();  
        
                    }  
        
                    function onClientItemSelected(sender, args) {  
        
                        var imageSrc = args.get_path();  
        
                        var txtInput = document.getElementById('TextBox1');  
        
                        txtInput.value = imageSrc;  
        
                    }  
        
                </script> 
        
            </head> 
        
            <body > 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <telerik:RadFileExplorer ID="RadFileExplorer1" runat="server" Height="300px"   
        
                        Width="450px" onclientitemselected="onClientItemSelected" > 
        
            <Configuration SearchPatterns="*.*" ViewPaths="~/"></Configuration> 
        
                    </telerik:RadFileExplorer> 
        
                    <br /> 
        
                    <asp:TextBox ID="TextBox1" runat="server" Width="338px"></asp:TextBox> 
        
                    <asp:HiddenField ID="HiddenField1" runat="server" /> 
        
                    <asp:Button ID="Button1" runat="server" Text="Close" OnClientClick="returnArg();  return false;" /> 
        
                </div> 
        
                </form> 
        
            </body> 
        
            </html>

for completeness.

One more thing. Is there a Telerik resource that will give me all of the methods and properties available to the client side javascript code as the bundled help doesn't contain documentation for the FileExplorer and the online list of methods and properties seems imcomplete?

Many thanks,

Jason.

answered on 06 Apr 2009, 09:11 PM

Georgi,

thanks for getting involved with this. I see that there are methods (although maybe only properties or fields) on the RadFileExplorer that relate to the selected items:

    
                    function onClientItemSelected(sender, args) {  
        
                        // get the path of the selected item. What other properties of the item are available.  
        
                        var imageSrc = args.get_path();  
        
                        // get the item selected.  What other properties are available.  
        
                        var item = args.get_item();  
        
                        // Check that the item is a file.  
        
                        if (item.get_type() == Telerik.Web.UI.FileExplorerItemType.File) {  
        
                            // Locate the text box where I want to put the file name  
        
                            var txtInput = document.getElementById('txtFileName');  
        
                            // update the text box  
        
                            txtInput.value = item.get_name();  
        
                            // locate the image that we want to change the src for  
        
                            var img = document.getElementById("Image1");  
        
                            // change the source of the image to update the picture  
        
                            img.src = imageSrc;  
        
                        }  
        
                    }

The code above uses

var

imageSrc = args.get_path();

var

item = args.get_item();

item.get_type() == Telerik.Web.UI.FileExplorerItemType.File

I do not see these properties defined anywhere in the help file. Am I looking in the wrong place or are they not documented?

I would be greatful if you could let me know.

I also have a small code example that I would like to submit. I would like to send it so you can see what I am using the control for, but I should also like to submit it as a code example so that others can use it. I have a details view control that contains several fields that contain file names that the RadFileExplorer helps the user to select without having to key potentially long file name. Please let me know how I can get the file to you and whether I should submit it as a code example.

Regards,

Jason.

answered on 07 Apr 2009, 03:18 PM

Just to add another suggestion. I'm not sure if it's intended or not, but the structure of the help seems to vary a bit from control to control in the online help. I understand that the controls are different and therefore there will be different help topics, but the arrangement could be made more similar. For example:

RadDock - it has a Section called "Getting Started" which contains a single page, also called "Getting Started"
RadEditor - it only has a page called "Getting Started" - no section.

The same can be said about the "Overview" for those two controls. Perhaps its time to take a global look at the structure of the help and define 5 to 8 main sections that every control will have, and then re-arrange the topics to fit within this common structure. For example:

ControlName
Introduction
    Overview
    What Is New
    Changes And Backward Compatibility
    Migrating From Other Controls
      Migrating From The ASP.NET Equivalent
      Migrating From The RadControls For ASP.NET Equivalent
Basic Topics
    Getting Started (Design-Time)
    Most Important Properties
    Basic DataBinding
    <Other Basics For This Control, As Needed>
Advanced Topics
    Advanced DataBinding
    Templates
    <Other Advanced Topics, Which will be very control-specific>
Appearance & Styling
    Built-In Skins
    CssClasses Used (HTML Structure)
    Tweaking Built-In Skins
    Creating Custom Skins
Server-Side API
    Properties
    Methods
    Events
Client-Side API
    Properties
    Methods
    Events
    ObjectName
      Properties
      Methods
      Events
    ObjectName
      Properties
      Methods
      Events
Troubleshooting
    <specific for each control>
Example Scenarios (How-To)
    <specific for each control>

I think that most people use the online help a few times for basic topics, but then again repeatedly for advanced topics. I know that determining what is "basic" and what is "advanced" is a bit subjective, but I'm sure it's something you can get feedback from pretty easily. In any case, coming up with a structure that is more consistent across the controls will help to solve problems like the one being discussed in this thread, namely that the "Client-side programming" topic within the RadFileExplorer section is structurally different than the other controls (it's a single topic in a "Programming" section rather than multiple topics within a "Client-Side Programming" section) and doesn't provide the properties, methods, and events available for both the composite control as well as the client-side objects available within it.

It sounds painful to me to re-arrange all the help sections to fit a common structural layout, but just as with the new skins in Q1, it's probably for the better in the long-run.

Shaun.