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

Using fileexplorer with a radGrid editItemTemplate

12 Answers 300 Views

FileExplorer

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

12 Answers, 1 is accepted

answered on 20 Mar 2009, 02:04 PM

Any thoughts on this?

Using the file explorer example I can access the ExplorerWindow in javascript using $find("<%= ExplorerWindow.ClientID %>"); to show the window as in the examples

Then in the OnFileSelected I can access a text box outside the radGrid using $get('<%= fileNameTB1.ClientID %>'); and set the name of the selected file.

But if I try to access the radGrid via javascript using var grid = $find("<%= RG1.ClientID %>"); I get The name 'RG1' does not exist in the current context. The grid id is set to RG1 when its created in codeBehind and added to a placeholder.

The grid is in a content page in a rad pane in a masterPage, but If I can access other controls in the javascript on this content page why cant I access the RadGrid?

answered on 21 Mar 2009, 12:52 AM

I quit trying to work with the FileExplorer,   The only reason I was trying to use it was the old way broke in Q109 so using the DialogOpenerhandler for the radeditor dialog example doesn't seem to work any more! Then how can I fix the old way of doing it with Q109 When the window is displayed from my edititemtemplate calling openDialog I get

Line: 492
Error: Object doesn't support this property or method Telerik.Web.UI.Dialoghandler

    _loadLinkProperties : function()
   {
       var currentLink = this._clientParameters.get_value();
       var currentHref = currentLink.getAttribute("href", 2);
       var anchors = this._clientParameters.documentAnchors;

Any Thoughts about this?

answered on 24 Mar 2009, 03:50 PM

fileselectordialog-repeater.zip

Hello SonicImaging,

It is not complicated to hook a single RadFileExplorer to multiple "file select boxes".
I reworked the example which you used as a starting point and I am attaching the modified version here.
For other people that might be reading this thread, the original example is: File Selector Dialog

Instead of RadGrid, I used a simple control - <asp:Repeater> because the logic is 100% the same.
Basically, what you need to do is provide an extra argument to the RadWindow opening method - telling it in which textbox to return the selected file path, e.g.:

    
                <asp:Repeater runat="server" ID="Repeater1"> 
        
                    <ItemTemplate> 
        
                        <br /><br />                 
        
                        <asp:TextBox runat="server" ID="fileName" Columns="50" />            
        
                        <input type="button" onclick="OpenFileExplorerDialog('<%#Container.FindControl("fileName").ClientID %>'); return false;" value="Open ..." />                 
        
                    </ItemTemplate> 
        
                </asp:Repeater>

Then, you do a couple of slight modifications to the javascript to handle this extra information

    
                <script type="text/javascript">      
        
                    //This function is called from the Explorer.aspx page 
        
                    function OnFileSelected(wnd, fileSelected) 
        
                    { 
        
                        //NEW: Insert the returned value in the textbox with currentInputID 
        
                        var textbox = $get(currentInputID); 
        
                        textbox.value = fileSelected; 
        
                    } 
        
                    var currentInputID = null; 
        
                    function OpenFileExplorerDialog(inputID) 
        
                    {        
        
                        var wnd = $find("<%= ExplorerWindow.ClientID %>"); 
        
                        wnd.show(); 
        
                        //NEW: Set the ID of the textbox in a global variable            
        
                        currentInputID = inputID; 
        
                    } 
        
                </script>

For additional convenience I have attached the modified page as well.

Best regards,
Tervel
the Telerik team

Check out Telerik Trainer , the state of the art learning tool for Telerik products.

answered on 06 Oct 2009, 09:52 AM

showhiddenpages.jpg

Hello,

I believe that this online demo will be of help for you. The Explorer.aspx page can be found by expanding the dropdown shown in the attached screenshot.

Regards,
Fiko
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

answered on 30 Aug 2010, 03:51 PM

I could use some assistance from the Telerik Guru's.....

I am getting this error: The name 'ExplorerWindow' does not exist in the current context

var currentInputID = null;

function OpenFileExplorerDialog(inputID) {

var wnd = $find("<%= ExplorerWindow.ClientID %>");

wnd.show();

I tried Container.FindControl but that did not work. It works great when it's outside of the radgrid. Could use some guidance on how to locate/figure out how this all works for other projects that are like this

<telerik:RadGrid ID="RadGrid1" Skin="Default" runat="server" CssClass="RadGrid" GridLines="None"

AllowPaging="true" PageSize="20" AllowSorting="true" Width="100%" AutoGenerateColumns="False"

EnableAJAX="true" ShowStatusBar="true" AllowAutomaticDeletes="true" AllowAutomaticInserts="true"

AllowAutomaticUpdates="true" DataSourceID="SqlDataSource1" EnableAJAXLoadingTemplate="true"

LoadingTemplateTransparency="50" HorizontalAlign="NotSet" OnItemDeleted="RadGrid1_ItemDeleted"

OnItemInserted="RadGrid1_ItemInserted" OnItemUpdated="RadGrid1_ItemUpdated" OnInsertCommand="RadGrid1_OnInsert"

OnDeleteCommand="RadGrid1_OnDelete" OnUpdateCommand="RadGrid1_OnUpdate" OnItemDataBound="RadGrid1_ItemDataBound">

<PagerStyle Mode="NumericPages"></PagerStyle>

<MasterTableView Name="Master" DataSourceID="SqlDataSource1" NoMasterRecordsText="No Rotators to Display"

NoDetailRecordsText="No Items to Display" CommandItemDisplay="Top" CommandItemSettings-AddNewRecordText="Add New Rotator"

CommandItemSettings-RefreshText="refresh" GridLines="None" DataKeyNames="rotatorGuid"

AllowFilteringByColumn="false" AllowAutomaticDeletes="true" AllowAutomaticInserts="true"

AllowAutomaticUpdates="true" EditMode="EditForms">

<DetailTables>

<telerik:GridTableView DataSourceID="SqlDataSource2" NoDetailRecordsText="No Rotator Items to Display"

CommandItemDisplay="Top" DataKeyNames="itemGuid, itemGuid" AutoGenerateColumns="false"

CommandItemSettings-AddNewRecordText="Add New Item" CommandItemSettings-RefreshText="refresh"

AllowAutomaticDeletes="true" AllowAutomaticInserts="true" AllowAutomaticUpdates="true"

Name="rotatorItem" runat="server" Width="100%" GridLines="None">

<ParentTableRelation>

<telerik:GridRelationFields DetailKeyField="rotatorGuid" MasterKeyField="rotatorGuid" />

</ParentTableRelation>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="Table2" cellspacing="2" cellpadding="1" border="0" rules="none" style="border-collapse: collapse">

<tr class="EditFormHeader">

<td>

<b>Rotator Item</b>

</td>

</tr>

<tr>

<td>

Name:<asp:RequiredFieldValidator ID="itemNameFieldValidator" runat="server" ControlToValidate="TextBoxItemName"

ErrorMessage="*" Display="dynamic" class="formRequired" />

</td>

<td>

<asp:TextBox ID="TextBoxItemName" runat="server" Columns="50" Text='<%# Bind( "ItemName") %>'>

</asp:TextBox>

</td>

</tr>

<tr>

<td>

Sort Order:

</td>

<td>

<br />

</td>

</tr>

<tr>

<td>

URL:

</td>

<td>

<asp:TextBox ID="TextBox2" runat="server" Columns="50" Text='<%# Bind( "url") %>'>

</asp:TextBox>

</td>

</tr>

<tr>

<td>

Attach Image:

</td>

<td>

<asp:TextBox ID="TextBox3" runat="server" Columns="50" Text='<%# Bind( "imageGuid") %>'>

</asp:TextBox>

<script type="text/javascript">

//This function is called from the Explorer.aspx page

function OnFileSelected(wnd, fileSelected) {

//NEW: Insert the returned value in the textbox with currentInputID

var textbox = $get(currentInputID);

textbox.value = fileSelected;

}

var currentInputID = null;

function OpenFileExplorerDialog(inputID) {

var wnd = $find("<%= ExplorerWindow.ClientID %>");

wnd.show();

//NEW: Set the ID of the textbox in a global variable

currentInputID = inputID;

}

</script>

<div>

Select a file:

<asp:TextBox ID="fileName" runat="server" Width="350px"></asp:TextBox>

<asp:Button ID="selectFile" Text="Open..." runat="server" OnClientClick='OpenFileExplorerDialog("<%#Container.FindControl("fileName").ClientID %>"); return false;'></asp:Button>

<telerik:RadWindow runat="server" Width="530px" Height="550px" VisibleStatusbar="false"

NavigateUrl="Explorer.aspx" ID="ExplorerWindow" Modal="true" Behaviors="Close,Move">

</telerik:RadWindow>

</td>

</tr>

<tr>

<td align="right">

<asp:ImageButton ID="btnUpdate" alt="Update" ImageUrl="/images/Update.gif" runat="server"

CommandName='<%# (Container as GridItem).OwnerTableView.IsItemInserted ? "PerformInsert" : "Update" %>'>

</asp:ImageButton>

<asp:ImageButton alt="Cancel" ID="btnCancel" ImageUrl="/images/Cancel.gif"

runat="server" CausesValidation="False" CommandName="Cancel"></asp:ImageButton>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="40px" FilterControlWidth="30px"

ButtonType="ImageButton" UniqueName="EditCommandColumn">

<ItemStyle CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn SortExpression="sortOrder" HeaderText="sortOrder" DataField="sortOrder"

UniqueName="childNav" Visible="true" ReadOnly="true">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn SortExpression="itemName" HeaderText="Item Name" DataField="itemName">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ConfirmText="Delete this record?" ConfirmDialogType="RadWindow"

ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"

UniqueName="DeleteColumn">

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />

</telerik:GridButtonColumn>

</Columns>

</telerik:GridTableView>

</DetailTables>

<Columns>

<telerik:GridEditCommandColumn HeaderStyle-Width="40px" FilterControlWidth="30px"

ButtonType="ImageButton" UniqueName="EditCommandColumn">

<ItemStyle CssClass="MyImageButton" />

</telerik:GridEditCommandColumn>

<telerik:GridBoundColumn UniqueName="rotator" HeaderText="Name" DataField="rotatorName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="width" HeaderText="Width" DataField="width">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn UniqueName="height" HeaderText="Height" DataField="height">

</telerik:GridBoundColumn>

<telerik:GridButtonColumn ConfirmText="Delete this record?" ConfirmDialogType="RadWindow"

ConfirmTitle="Delete" ButtonType="ImageButton" CommandName="Delete" Text="Delete"

UniqueName="DeleteColumn">

<ItemStyle HorizontalAlign="Center" CssClass="MyImageButton" />

</telerik:GridButtonColumn>

</Columns>

<EditFormSettings EditFormType="Template">

<FormTemplate>

<table id="Table2" cellspacing="2" cellpadding="1" border="0" rules="none" style="border-collapse: collapse">

<tr class="EditFormHeader">

<td>

<b>Rotator</b>

</td>

</tr>

<tr>

<td>

Name:<asp:RequiredFieldValidator ID="validate1" runat="server" ControlToValidate="TextBoxRotatorName"

ErrorMessage="Required" Display="dynamic" class="formRequired" />

</td>

<td>

<asp:TextBox ID="TextBoxRotatorName" runat="server" Columns="50" Text='<%# Bind( "rotatorName") %>'>

</asp:TextBox>

</td>

</tr>

<tr>

<td>

Height:

</td>

<td>

<asp:Label ID="TextBox1" runat="server" Columns="50" Text='<%# Bind( "height") %>'>

</asp:Label>

</td>

</tr>

<tr>

<td>

Width:

</td>

<td>

<asp:Label ID="Label3" runat="server" Columns="50" Text='<%# Bind( "width") %>'>

</asp:Label>

</td>

</tr>

<tr>

<td colspan="2">

Link: http://YOURDOMAIN/FAITHNETWORK_userfilestore/RSS/ministries/<;%# Eval("ministryGuid") %>/Rotators/<%# Eval("rotatorGuid") %>.xml

</td>

</tr>

<tr>

<td align="right">

<asp:ImageButton ID="btnUpdate" alt="Update" ImageUrl="/images/Update.gif" runat="server"

CommandName='<%# (Container as GridItem).OwnerTableView.IsItemInserted ? "PerformInsert" : "Update" %>'>

</asp:ImageButton>

<asp:ImageButton alt="Cancel" ID="btnCancel" ImageUrl="/images/Cancel.gif"

runat="server" CausesValidation="False" CommandName="Cancel"></asp:ImageButton>

</td>

</tr>

</table>

</FormTemplate>

</EditFormSettings>

</MasterTableView>

</telerik:RadGrid>

answered on 02 Sep 2010, 09:16 AM

Hi Mike,

The Edit FormTemplate is available when the grid is in Edit mode so the error that you experience is expected. In your case you need to use this approach in order to achieve the desired result:

<td>

<asp:TextBox ID="TextBox3" runat="server" Columns="50" Text='<%# Bind( "EmployeeID") %>'>

</asp:TextBox>

<script type="text/javascript">

//This function is called from the Explorer.aspx page

function OnFileSelected(wnd, fileSelected)

{

//NEW: Insert the returned value in the textbox with currentInputID

var textbox = $get(currentInputID);

textbox.value = fileSelected;

}

var currentInputID = null;

function OpenFileExplorerDialog()

{

var inputID = '<%# Container.FindControl("fileName").ClientID %>';

debugger;

var wnd = $find('<%# Container.FindControl("ExplorerWindow").ClientID %>');

wnd.show();

//NEW: Set the ID of the textbox in a global variable

currentInputID = inputID;

}

</script>

<div>

Select a file:

<asp:TextBox ID="fileName" runat="server" Width="350px"></asp:TextBox>

<asp:Button ID="selectFile" Text="Open..." runat="server" OnClientClick='OpenFileExplorerDialog(); return false;'>

</asp:Button>

<telerik:RadWindow runat="server" Width="530px" Height="550px" VisibleStatusbar="false"

NavigateUrl="Explorer.aspx" ID="ExplorerWindow" Modal="true" Behaviors="Close,Move">

</telerik:RadWindow>

</td>

I have highlighted the changed code. As you see you need to use the "<%# %>" expression on order to achieve the desired result.

I hope this helps.

Regards,
Fiko
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Using fileexplorer with a radGrid editItemTemplate

12 Answers, 1 is accepted