Multiple Control Methodology + RadEditor not working

[Doug Odegaard]

OK....I'm sure you'll think I'm going overboard but I am trying to add three different controls to a View and am finding strange behaviour.  But I think the fatal flaw is probably my understanding of when to use <form runat="server"> tags, ScriptManagers, etc.  So here is where I need help.....

1.  Can anyone throw me a bone on why this view works without the RadEditor on it but once I copy it back in the RadFileExplorer ceases working?  Run the view without the RadEditor and then with to see the difference.
2. Would Telerik be willing to write some blog posts helping with the methodology for adding these more complex control that are not part of the MVC demo.  Of greatest interest is an app that persists data rather than just rendering.  I can only think these posts will be worth hundreds of support hours you might need to provide users like me.  Thanks in advance and I will post things in the forum to help.

Here is my view.....

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ThemeInfo>" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
    <title>Details</title>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Theme Details</h2>

    <p>
        <label for="LeadId">Theme Name:</label>
        <%= Html.TextBox("Name") %>
        <%= Html.ValidationMessage("Name", "*") %>

        <%=Html.ActionLink("Download Theme", "Download") %>
    </p>

        <fieldset>
            <legend>Replace Theme</legend>

            <p>
                <label for="Email">Theme Zip Upload:</label>
                        Allowed files: .zip archives (limitation set in .aspx):
                <p>
                <% using (Html.BeginForm("Upload", "Themes", FormMethod.Post, new { enctype="multipart/form-data"})){%>

                <telerik:RadUpload runat="server" ID="RadUpload1" initialfileinputscount="1"
                            maxfileinputscount="1"
                            allowedfileextensions=".zip"
                            maxfilesize="1000000"></telerik:RadUpload>
                <telerik:RadProgressManager runat="server" ID="RadProgressManager1" AjaxUrl="~/Telerik.RadUploadProgressHandler.axd"/>
                <p>
                    <telerik:RadProgressArea runat="server" ID="RadProgressArea1"/>
                <p>
                <input type="submit" value="Upload" />

                <%} %>
        </fieldset>

               <p>
            <%
                editorCode.Content = "TODO Put in js to set to file contents";
            %>
                <label for="ContactForm">Code View:</label>
                <telerik:RadEditor ID="editorCode" Runat="server" DialogHandlerUrl="~/Telerik.Web.UI.DialogHandler.axd"  >
                </telerik:RadEditor>
            </p>

        <form id="Form1" runat="server">
        <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        </telerik:RadScriptManager>
    <table>
        <tr>
            <td>
                <telerik:RadFileExplorer runat="server" ID="FileExplorer1" Skin="Vista" Width="450" VisibleControls="Grid,TreeView,Toolbar"
                    OnClientCreateNewFolder="OnClientCreateNewFolder" OnClientDelete="OnClientDelete"
                    OnClientFileOpen="OnClientFileOpen" OnClientFolderChange="OnClientFolderChange"
                    OnClientFolderLoaded="OnClientFolderLoaded" OnClientItemSelected="OnClientItemSelected"
                    OnClientLoad="OnClientLoad" OnClientMove="OnClientMove" EnableOpenFile="true" >
                    <Configuration ViewPaths="~/Content" UploadPaths="~/Content"
                        DeletePaths="~/Content" />
                </telerik:RadFileExplorer>
            </td>
            <td>
                <div id="eventConsole" class="module" style="height: 470px; width: 300px; overflow: auto;">
                </div>
            </td>
        </tr>
    </table>

        <script type="text/javascript">

            function OnClientFolderLoaded(sender, args) {
                LogEvent("Grid folder loaded: " + args.get_item().get_name());
            }
            function OnClientFileOpen(sender, args) {
                LogEvent("Item open: " + args.get_item().get_name());
            }
            function OnClientItemSelected(sender, args) {
                LogEvent("Item click: " + args.get_item().get_name());
            }
            function OnClientFolderChange(sender, args) {
                LogEvent("Tree folder change: " + args.get_item().get_name());
            }
            function OnClientDelete(sender, args) {
                LogEvent("Delete: " + args.get_item().get_name());
            }
            function OnClientCreateNewFolder(sender, args) {
                LogEvent("Create new folder: " + args.get_newPath());
            }
            function OnClientMove(sender, args) {
                LogEvent("Item moved to: " + args.get_newPath());
            }
            function OnClientLoad(sender, args) {
                LogEvent("File Explorer loaded!");
            }
            function LogEvent(text) {
                var d = new Date();
                var ddateStr = d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds() + "." + d.getMilliseconds();
                var eventConsole = $get("eventConsole");
                eventConsole.innerHTML += "[" + dateStr + "] " + text + "<br/>";
            }

    </script>

    </form>



    <p>
        <%=Html.ActionLink("Edit", "Edit", new { /* id=Model.PrimaryKey */ }) %> |
        <%=Html.ActionLink("Back to List", "Index") %>
    </p>

</asp:Content>

[Doug Odegaard]

Let me add an extra detail....I have found that anytime anything is added after the RFE it will cease functioning.  So it might not have anything to do with the RadEditor but instead placement after the RFE.

[Lini]

Hello Doug,

I am not sure what the problem is in this case. We will do some tests and see if we can track down the JavaScript exception. I ran your code and got an "Invalid Argument" exception when the file explorer tried to make its callback requests to populate the tree and grid controls.

For best results in MVC, try using only one form and put all controls that will be making AJAX requests to the server in it (in this case the upload + progress area, file explorer and editor).

All the best,
Lini
the Telerik team

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