Save Button on Editor Toolbar

14 posts, 0 answers
  1. rdochert
    rdochert avatar
    82 posts
    Member since:
    Oct 2012

    Posted 22 Oct 2007 Link to this post

    Hi,
    in the previous edition of RadEditor, i had a Save button in the toolbar as the first icon. I added this in the toolsfile. Is there any "tidier" way of implementing a Save function in the new RadEditor. Ideally, i just want a button which will do a postback and maybe raise the RadEditor1.TextChanged event?
    In short, what is the reccommended method in prometheus to implement a Save button on the toolbar.
    thanks
    rob
  2. Petya
    Admin
    Petya avatar
    869 posts

    Posted 23 Oct 2007 Link to this post

    Hi rdochert,

    With RadEditor Prometheus you can add your own button in the ways presented in this help article. In the handler of the button click you can add code to submit the form, i.e. cause a postback. One more thing - there is no TextChanged event in RadEditor Prometheus.

    Greetings,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Dave Miller
    Dave Miller avatar
    64 posts
    Member since:
    Oct 2004

    Posted 26 Oct 2007 Link to this post

    Petya,

    I was wondering if when creating/adding a toolbar in code if it was possible to set its order. I want to add a custom save and cancel button to the default tools file. I would prefer to actually add them to the front of the first toolbar before "Print" and "Spellcheck" but if that is not possible would like to add the new toolbar created in the codebehind before the first toolbar in the default tools file.

    Thanks,
    Dave
  5. Valeri Hristov
    Admin
    Valeri Hristov avatar
    2252 posts

    Posted 29 Oct 2007 Link to this post

    Hello Dave,

    It is easy to insert the new tool at the beginning of the toolbar:

    //in Page_Load
    if (!IsPostBack)
    {
        RadEditor1.Tools[0].Tools.Insert(0, new EditorTool("MyCustomTool"));
    }
     
    RadEditor.Tools collection contains EditorToolGroup objects, representing each toolbar, each group contains EditorTool objects, representing each button or dropdown in the toolbar.

    Best wishes,

    Valeri Hristov (Senior Developer, MCSD)
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
  6. Pierre
    Pierre avatar
    212 posts
    Member since:
    Apr 2007

    Posted 03 Dec 2007 Link to this post

    OK I follow this post, now I got the alert popup when I click on the save Event, that is good. Now how I can jump into code behind with a postback or ajax call to save to database? Its a content page, and I have a AjaxProxyManager avalaible.

    Any Suggestion?
  7. Rumen
    Admin
    Rumen avatar
    12850 posts

    Posted 04 Dec 2007 Link to this post

    Hi Pierre,

    After adding your custom Save button to the editor's toolbar, you should define its JavaScript command.
    The command will be executed when the user clicks on the Save button. The idea is to have a hidden Asp:Button with style="display:none;" on the page that will submit the content and save it in database. In the JavaScript command function you should get a reference to the Asp:Button and programmatically click it. Thus when the Save toolbar button is pressed, this will click the hidden Asp:Button and will save the content in the Database.

    In your page with the editor (after the <telerik:radeditor ... declaration),  add the following:

    <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;"/>
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["CustomSaveButton"] = function(commandName, editor, args)
    {
       
    alert("Save In Database");
       var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
        btnSubmit.click(); //click it programmatically

    }
    ;
    </script>

    In the event handler of the
    btnSubmit you should write your code for saving the content in database.

    You can use the following demo example as a base to proceed: Save In Database.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. brian26
    brian26 avatar
    17 posts
    Member since:
    Jan 2007

    Posted 14 Jan 2008 Link to this post

    The example below works good until I try to ajax the editor. Both the button and the editor are located in a asp panel that is has ajax settings assigned to it. Any thoughts? 


    <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;"/>
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["CustomSaveButton"] = function(commandName, editor, args)
    {
       
    alert("Save In Database");
       var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
        btnSubmit.click(); //click it programmatically

    }
    ;
    </script>
  9. Rumen
    Admin
    Rumen avatar
    12850 posts

    Posted 15 Jan 2008 Link to this post

    Hi,

    I made a test by placing the editor and the asp:button in a MS AJAX UpdatePanel and I was not able to reproduce the problem. You can see my test in the attached video and that the Asp:Label is updated with Ajax request on each Save button click.

    Here is the used code:

        <form id="form1" runat="server">
           <asp:ScriptManager ID="ScriptManager" runat="server" />
           <asp:UpdatePanel id="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <telerik:RadEditor ID="RadEditor1" runat="server">
                        <Tools>
                            <telerik:EditorToolGroup>
                                <telerik:EditorTool Name="Save" Text="Save"  />
                                <telerik:EditorTool Name="Bold"  />
                                <telerik:EditorTool Name="Italic"  />
                            </telerik:EditorToolGroup>
                        </Tools>
                    </telerik:RadEditor>
                    <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
                    <asp:Label ID="Label1" runat="server"></asp:Label>
                    <script type="text/javascript">
                    Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
                    {
                       alert("Save In Database");
                       var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
                       btnSubmit.click(); //click it programmatically
                    };
                    </script> 
                   
                    <script runat="server" type="text/C#">
                    protected void btnSubmit_Click(object sender, EventArgs e)
                    {
                        Label1.Text = System.DateTime.Now.ToString();
                    }
                    </script>  
                </ContentTemplate>
            </asp:UpdatePanel>
        </form>

    If you scenario is other could you please open a support ticket and send a sample working example that demonstrates the observed behavior on your side?

    Best regars,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  10. Darren Hall
    Darren Hall avatar
    8 posts
    Member since:
    Apr 2007

    Posted 01 Mar 2008 Link to this post

    Could you please tell me how I might do this if i have multiple editors on the page.  Note that they are in user controls and loaded programatically so that means the javascript gets reproduced every time.  Because of that the function gets overwritten and the save button only works for the last editor loaded.

    Thanks.
  11. Rumen
    Admin
    Rumen avatar
    12850 posts

    Posted 03 Mar 2008 Link to this post

    Hi Darren,

    Here is an example demonstrating how to set a save button to multiple editors and having only one Telerik.Web.UI.Editor.CommandList["Save"] function - the idea behind the solution is to set the javascript code below the UserControls declarations on the page and after that to use the editor argument to get a reference to the editors and obtain their content with editor.get_html() method, e.g.

    Default.aspx:

    <asp:ScriptManager ID="ScriptManager1" runat="server" />
    <asp:UpdatePanel id="UpdatePanel1" runat="server">
        <ContentTemplate>
            <uc1:WebUserControl ID="WebUserControl1" runat="server" />
            <uc2:WebUserControl2 ID="WebUserControl2_1" runat="server" />
            <uc3:WebUserControl3 ID="WebUserControl3_1" runat="server" />
      
            <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
            <asp:Label ID="Label1" runat="server"></asp:Label>
            <script type="text/javascript">
            Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
            {
               alert("The Editor ID is: " + editor.get_id() + "\n and has the following content: " + editor.get_html(true));
               var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
               btnSubmit.click(); //click it programmatically
            };
            </script>
         </ContentTemplate>
    </asp:UpdatePanel>

    WebUserControl.ascx:

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="WebUserControl" %>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>

    WebUserControl.ascx.cs:

    using Telerik.Web.UI;

    public partial class WebUserControl : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            RadEditor editor1 = new RadEditor();
            editor1.ID = "RadEditor1";
            editor1.Height = Unit.Pixel(250);
            EditorToolGroup main = new EditorToolGroup();
            editor1.Tools.Add(main);

            EditorTool save = new EditorTool();
            save.Name = "Save";
            save.ShortCut = "CTRL+S";
            main.Tools.Add(save);

            PlaceHolder1.Controls.Add(editor1);
        }
    }

    You can download a sample runnable project from here.


    Greetings,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  12. Darren Hall
    Darren Hall avatar
    8 posts
    Member since:
    Apr 2007

    Posted 03 Mar 2008 Link to this post

    Thank you for that, unfortunately I have to keep the javascript and submit buttons within the user controls and so cannot use the method you describe, do you have another option?

    Also, where can I see the list of editor methods, I can't seem to find it in the documentation.

    Thanks again.

    Darren.
  13. Rumen
    Admin
    Rumen avatar
    12850 posts

    Posted 03 Mar 2008 Link to this post

    Hello Darren,

    What you can do is to put JavaScript function and the ASP:Button in only one of the UserControls for example WebUserControl3.ascx, e.g.

    <%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl3.ascx.cs" Inherits="WebUserControl3" %>
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" />
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
    {
       alert("The Editor ID is: " + editor.get_id() + "\n and has the following content: " + editor.get_html(true));
       var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
       btnSubmit.click(); //click it programmatically
    };
    </script>

    thus the code will be included only once in Default.aspx page.

    Another way is to create different commands and custom save buttons for the different editors placed in different user controls:

    Telerik.Web.UI.Editor.CommandList["Save1"] = function(commandName, editor, args) ...

    Telerik.Web.UI.Editor.CommandList["Save2"] = function(commandName, editor, args) ...

    Telerik.Web.UI.Editor.CommandList["Save3"] = function(commandName, editor, args) ...

    You can find the RadEditor "Prometheus" client-side methods in the RadControls "Prometheus" help -> Controls ->  RadEditor -> Client-side API Reference -> Methods.

    Best regards,
    Rumen
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  14. Frank
    Frank avatar
    1 posts
    Member since:
    Jul 2008

    Posted 08 Jan 2009 Link to this post

    How do you get the content from the RadEditor in this example with multple editors on the same page?
  15. Rumen
    Admin
    Rumen avatar
    12850 posts

    Posted 12 Jan 2009 Link to this post

    Hi Frank,

    I am not quite sure whether you want to save the multiple editors' content from an external button or from a button placed on the RadEditor's toolbar. For that reason I wrote two different solutions. Here they are:

    Solution 1: The Save button placed on all editors' will get the content of all editors on the page

    <telerik:RadEditor ID="RadEditor1" runat="server" >
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Save" />
            </telerik:EditorToolGroup>
        </Tools>
        <Content>AAAAA</Content>
    </telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor2" runat="server" >
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Save" />
            </telerik:EditorToolGroup>
        </Tools>
        <Content>BBBBB</Content>
    </telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor3" runat="server" >
        <Tools>
            <telerik:EditorToolGroup>
                <telerik:EditorTool Name="Save" />
            </telerik:EditorToolGroup>
        </Tools>
        <Content>CCCCC</Content>
    </telerik:RadEditor>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
    <script type="text/javascript">
    Telerik.Web.UI.Editor.CommandList["Save"] = function(commandName, editor, args)
    {
         if (typeof ($telerik) != "undefined") {
                if ($telerik.radControls && Telerik.Web.UI.RadEditor) {
                    for (var i = 0; i < $telerik.radControls.length; i++) {
                        var control = $telerik.radControls[i];
                        if (Telerik.Web.UI.RadEditor.isInstanceOfType(control)) {
                            //control is a radeditor object
                            alert("The Editor ID is: " + control.get_id() + "\n and has the following content: " + control.get_html(true));
                        }
                    }
                }

            }
       var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
       btnSubmit.click(); //click it programmatically
    };
    </script>

    Solution 2: The content of the multiple editors on the page will be obtained by pressing an external Save button:

    <input type="button" value="Save Content" onclick="SaveContent();return false" />
    <telerik:RadEditor ID="RadEditor1" runat="server" >
        <Content>AAAAA</Content>
    </telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor2" runat="server" >
        <Content>BBBBB</Content>
    </telerik:RadEditor>
    <telerik:RadEditor ID="RadEditor3" runat="server" >
        <Content>CCCCC</Content>
    </telerik:RadEditor>
    <asp:Button ID="btnSubmit" runat="server" Text="Submit" style="display:none;" OnClick="btnSubmit_Click"/>
    <script type="text/javascript">
    function SaveContent(){
         if (typeof ($telerik) != "undefined") {
                if ($telerik.radControls && Telerik.Web.UI.RadEditor) {
                    for (var i = 0; i < $telerik.radControls.length; i++) {
                        var control = $telerik.radControls[i];
                        if (Telerik.Web.UI.RadEditor.isInstanceOfType(control)) {
                            //control is a radeditor object
                            alert("The Editor ID is: " + control.get_id() + "\n and has the following content: " + control.get_html(true));
                        }
                    }
                }
            }
       var btnSubmit = $get("<%=btnSubmit.ClientID%>"); //get a reference to the Asp:Button
       btnSubmit.click(); //click it programmatically
    }
    </script>

    Greetings,
    Rumen
    the Telerik team

    Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017