Using fileexplorer with a radGrid editItemTemplate

13 posts, 0 answers
  1. SonicImaging
    SonicImaging avatar
    88 posts
    Member since:
    Jan 2007

    Posted 19 Mar 2009 Link to this post

    Is there a example available integrating the new FileExplorer with radGrid and a editItem template.

    I'm using the demo example File Selector Dialog which im creating the textbox and select file button in my edititemtemplate.  im adding The JS for the button in the edititemtemplate that is calling the OpenFileExplorerDialog function which shows the file explorer then double clicking on the file is calling OnFileSelected with the file name back on my page with the radgrid

    How can I take this file name and populate the text box in the edit item template?  I can populate a text box outside the grid but cant figure out how to find the textbox in the edititemtemplate and populate that from the OnFileSelected js function
  2. SonicImaging
    SonicImaging avatar
    88 posts
    Member since:
    Jan 2007

    Posted 20 Mar 2009 Link to this post

    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?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SonicImaging
    SonicImaging avatar
    88 posts
    Member since:
    Jan 2007

    Posted 20 Mar 2009 Link to this post

    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?



  5. Tervel
    Admin
    Tervel avatar
    1337 posts

    Posted 24 Mar 2009 Link to this post

    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.
  6. Jaimie
    Jaimie avatar
    33 posts
    Member since:
    Mar 2008

    Posted 30 Sep 2009 Link to this post

    hey.

    i couldn't get the attached project working.

    I have a explorer.aspx created and when i double-click the file, it doesn't return the name to the textbox. Indstead, a window will pop to display the file / let me choose to open/download.

    Can someone help?
  7. SonicImaging
    SonicImaging avatar
    88 posts
    Member since:
    Jan 2007

    Posted 01 Oct 2009 Link to this post

    Hi,   Id make sure whats in the Explorer.aspx is correct.  The file isn't in any of the demos and my problem was I didn't have the correct JavaScript to return the value back.   Also set some break points in the java if your using Visual Studio 2008 so you can check that the correct JS is being called and the values are what you expect them to be.

    Check out this link for some more info.
    Explorer.aspx

    -Keith
  8. Jaimie
    Jaimie avatar
    33 posts
    Member since:
    Mar 2008

    Posted 01 Oct 2009 Link to this post

    in Telerik 2009 Q2, the OnClientGridDbClick does not exist at all. The JS didn't get called at all for my project.
  9. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 06 Oct 2009 Link to this post

    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.
  10. Jaimie
    Jaimie avatar
    33 posts
    Member since:
    Mar 2008

    Posted 02 Nov 2009 Link to this post

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


    I got a "server tag is not well formed" error using the example. Its in the edir form of a RadGrid.

    Thanks
  11. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 04 Nov 2009 Link to this post

    Hello Jaimie,

    I am not quite sure what is causing the problem on your side. Could you please open a new support ticket and send me a project where the problem can be reproduced. I will check it and do my best to help.

    All the best,
    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.
  12. Mike
    Mike avatar
    31 posts
    Member since:
    Oct 2007

    Posted 30 Aug 2010 Link to this post

    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>
                                            <!--F4C43999-2AAC-48F4-B302-6751A4D86A7A-->
                                            <asp:TextBox ID="TextBox3" runat="server" Columns="50" Text='<%# Bind( "imageGuid") %>'>
                                            </asp:TextBox>
                                            <!-- BEGIN FILE EXPLORER-->
                                            <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>
  13. Fiko
    Admin
    Fiko avatar
    1406 posts

    Posted 02 Sep 2010 Link to this post

    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>
        <!--F4C43999-2AAC-48F4-B302-6751A4D86A7A-->
        <asp:TextBox ID="TextBox3" runat="server" Columns="50" Text='<%# Bind( "EmployeeID") %>'>
        </asp:TextBox>
        <!-- BEGIN FILE EXPLORER-->
        <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
  14. Mike
    Mike avatar
    31 posts
    Member since:
    Oct 2007

    Posted 15 Sep 2010 Link to this post

    Thanks so much Fiko!! This did the trick. Thanks for the quick and great responses in these forums!!!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017