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

OnCLientLoad event -disabling RAD Editor

20 Answers 322 Views

Editor

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

20 Answers, 1 is accepted

answered on 14 Jul 2009, 10:07 AM

Hello Anandi,

You should attach to the OnClientModeChange event property of RadEditor which is fired when the editor's mode is changed, e.g.

    
            <telerik:RadEditor ID="RadEditor" runat="server" OnClientModeChange="OnClientModeChange"></telerik:RadEditor>  
        
            <script type="text/javascript"> 
        
            function OnClientModeChange(editor)  
        
            {  
        
                   var mode = editor.get_mode();                      
        
                   switch (mode) 
        
                   { 
        
                      case 1: 
        
                       alert( "We are in Design mode"); 
        
                       //do something 
        
                       break; 
        
                      case 2: 
        
                       alert( "We are in Html mode"); 
        
                       //do something 
        
                       break; 
        
                      case 4: 
        
                       alert( "We are in Preview mode"); 
        
                       //do something 
        
                       break; 
        
                  } 
        
            }   
        
            </script>

All the best,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 17 Jul 2009, 11:58 AM

Hi Anandi,

Let me clarify something: RadEditor has Design, Html and Preview view modes. What do you mean by View and Edit modes?

Please, also note that the OnClientLoad method is executed only once after the editor load and not when switching between the different view modes.

If you want to execute some code when the user changes some mode then you should attach your javascritp code to the OnClientModeChange event property of RadEditor.

You can implement a symbol counter in Design mode using the code provided in this forum thread: Character Counter on HTML Source side of Editor.

You can disable the typing in Html mode using the solution in this KB article: Disabling HTML editing in Html mode of RadEditor.

Best regards,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Check out the tips for optimizing your support resource searches.

answered on 20 Jul 2009, 04:45 PM

Hi Rumen,
Thanks for the reply. Let me clarify. In our application, we load our pages in 2 modes. -View and Edit modes. In the View mode, the user cannot change anything in the page -he can only View the page. In the edit mode, he can type something. Now, in my page, I have 5 RAD editors. 2 of them may be in the disable mode and others may be editable. If I create a property setMode for the Rad editor in the user control, like this:

Public WriteOnly Property SetMode() As String
        Set(ByVal Value As String)
            strMode = Value
         End Set
    End Property

and set the mode in my page - a few to View and a few to Edit, I want them to be editable if the value is edit and not editable if the value is View. I check the condition in the OnClientLoad function in the user control. But the problem right now is, all the RAD editors in the page, take the last assigned value. For eg, if the first 2 have setMode="View" , and the next 3 have setMode=Edit, then they all take "Edit" as the setMode property value and vice versa.

Can you please help me with this problem -every instance of the RAD should have its own value for the property that I create. How can I achieve it??
I hope I have explained it clearly enough for you to understand. If not, please come up with questions.

Thanks a lot.

Anandi

answered on 20 Jul 2009, 05:57 PM

Hi Manfred,
Thanks for responding. I will try to answer all your questions:

Yes. That is a code behind property which I am creating for the the RAD Editor in the user control. Then, when I use this user control in my page, I want to set different value for each instance of the RAD user control in my page. I get the value of the mode in the user control by this method:

Protected Sub Page_PreRender(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.PreRender

If (Not Page.ClientScript.IsClientScriptBlockRegistered("csbJS")) Then

Page.ClientScript.RegisterClientScriptBlock(Page.GetType(),

"csbJS", "<script language=Javascript>var MaxLength=" & intMaxLength & "; var strMode='" & strMode & "';</script>")

End If

End Sub
Then, in the OnClientLoad function of the user control, I do the check to restrict user typing in the RAD Editor.
If strMode="View", then, do not let him type or paste anything in the RAD.
If strMode="Edit", let him modify.

Thanks.

answered on 20 Jul 2009, 06:18 PM

Hi,

this explains a lot :)
When you examine the emitted code you will find a lot of "var MaxLenght=....; varStr...=...;" codeblocks.

You have one "instance" of your javascript on a page.
JS allows (without an error message) to define the same (named) var as often as you want.
And what you do to one var - you do (virtually) to all of them.
Simple - jscript "chooses" one these vars as the one which is "in scope".

So your code looks (reduced to strModes) like this
....
var strMode="ReadOnly";
var strMode="ReadOnly";
var strMode="Edit";
var strMode="Edit";
var strMode="Edit";

Now the functions (OnLoad) in your first control fires and does
..radEditor.set_mode(strMode);
the second does
..radEditor.set_mode(strMode);

and so on.
The value of "strMode" is???? It is the last assigned value.
In this case "Edit".

Now (because I don't understand it totally).
You have a page - this page contains 5 usercontrols. Each of these has a SetMode property.

Where do you set this?
1.) In the control (code behind) - after loading data?
2.) In the page (code behind) (after loading data) assigning the values to the controls?
3.) Somehow via DataBinding?

I don't think your control exposes this SetMode as a client "variable".

So one of the first 2 is the fact I guess?
Or am I wrong?
Please (just to be sure) let me know if the Page_PreRender is from the page (containing the controls) or in the controls?

We're on the way to a solution - I hope :)

Regards

Manfred

answered on 20 Jul 2009, 08:36 PM

Ok,

than in the usercontrol (PreRender would be a good place) simply assign the Property value of SetMode to the EditModes of the RadEditor.
Forget about your scripts - you don't need it - the job can be done on the server.
To make it work don't forget to remove the Loaded event (at least the mode setting code there) from the Client Scripts.
The only "trick" is to change the string to an EditModes enum.
Or define the property as EditModes.
First the new definition:

    
            Private strMode As EditModes  
        
            Public WriteOnly Property SetMode() As EditModes  
        
                 Set(ByVal Value As String)  
        
                   strMode = Value 
        
                   End Set  
        
            End Property

The code looks like this:

    
            protected override void OnPreRender(EventArgs e) {  
        
                RadEditorInControl.EditModes = strMode;  
        
            }

This should do what you expect to do.
In the page code would look something like this:

    
            Protected Sub Page_Load(sender As Object, e As EventArgs)  
        
                If OnlyReadForTheFirst2CEditors Then  
        
                    myUserCtrlONE.SetMode = EditModes.Preview  
        
                    myUserCtrlTWO.SetMode = EditModes.Preview  
        
                Else  
        
                    myUserCtrlONE.SetMode = EditModes.Html OrElse EditModes.Design  
        
                    myUserCtrlTWO.SetMode = EditModes.Html OrElse EditModes.Design  
        
                End If  
        
                myUserCtrlTHREE.SetMode = EditModes.Html OrElse EditModes.Design  
        
                myUserCtrlFOUR.SetMode = EditModes.Html OrElse EditModes.Design  
        
                myUserCtrlFIVE.SetMode = EditModes.Html OrElse EditModes.Design  
        
            End Sub

The "pseudo bool" OnlyReadForTheFirst2Editors is just the thing you get from your database.
Give this a try - and don't forget to change the client scripts!

Regards

Manfred

answered on 21 Jul 2009, 11:25 PM

HI Manfred,
Thanks a lot for the detailed reply. The prerender code should go in the user control, right? That is what I did. I gave the first one as preview mode and then the next RAD as design mode, If does load the first rad in the preview mode as the top bar is greyed out, but it doesn;t load all the rest with data ad wouldn't let me type anything too in there,...BUt the top bar is not greyed out for the next one,,So, there is some improvement , but I am not sure why it wouldn't let me type anything in the second one. I have a bunch of javascript for chracter counting, word counting etc. They are also not getting displayed. Any idea why this can be?
Than you again for taking the time to look into my issue.

Anandi

answered on 22 Jul 2009, 08:57 AM

Hi,

yes - the first two codeblocks are for the control - the third is for the page.
And if it doe's "strange things" it would first remove (disable) all scripts just to see if it works than.

I prepared a little sample:
http://www.pp-p.net/EditorTester.aspx

The (of course simple) usercontrol looks like this:

    
            <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EditorHolder.ascx.cs" Inherits="PPPNet.EditorHolder" %> 
        
            <telerik:RadEditor ID="reMine" runat="server" Height="200px">  
        
            <Content> 
        
            Just a test  
        
            </Content> 
        
            </telerik:RadEditor>

And the code behind:

    
            public partial class EditorHolder : System.Web.UI.UserControl {  
        
                #region EditMode  
        
                private EditModes m_emEditMode;  
        
                public EditModes EditMode {  
        
                    set { m_emEditMode = value; }  
        
                }  
        
                #endregion  
        
                protected void Page_Load(object sender, EventArgs e) {  
        
                }  
        
                protected override void OnPreRender(EventArgs e) {  
        
                    reMine.EditModes = m_emEditMode;  
        
                    base.OnPreRender(e);  
        
                }  
        
            }  
        
            }

The Page markup:

    
            <body> 
        
                <form id="form1" runat="server">  
        
                <telerik:RadScriptManager runat="server">  
        
                </telerik:RadScriptManager> 
        
                <div> 
        
                    <uc1:EditorHolder ID="EditorHolder1" runat="server" /> 
        
                    <br /> 
        
                    <uc1:EditorHolder ID="EditorHolder2" runat="server" /> 
        
                    <br /> 
        
                    <uc1:EditorHolder ID="EditorHolder3" runat="server" /> 
        
                    <br /> 
        
                    <uc1:EditorHolder ID="EditorHolder4" runat="server" /> 
        
                    <br /> 
        
                    <uc1:EditorHolder ID="EditorHolder5" runat="server" /> 
        
                    <br /> 
        
                </div> 
        
                </form> 
        
            </body>

And the code behind

    
            protected void Page_Load(object sender, EventArgs e) {  
        
                EditorHolder1.EditMode = Telerik.Web.UI.EditModes.Preview;  
        
                EditorHolder2.EditMode = Telerik.Web.UI.EditModes.All;  
        
                EditorHolder3.EditMode = Telerik.Web.UI.EditModes.Preview;  
        
                EditorHolder4.EditMode = Telerik.Web.UI.EditModes.All;  
        
                EditorHolder5.EditMode = Telerik.Web.UI.EditModes.All;  
        
            }

So the first and the thrid editor are "read only".

Regards

Manfred

answered on 06 May 2010, 04:39 AM

img001.jpg

Hi Rumen,

With regards to my post here http://www.telerik.com/community/forums/reply-thread.aspx?messageId=0&threadId=85741

i just want to ask why am i receiving an Error: Object doesn't support this property or method exception? all i do is call the javascript in code behind let say

                    SampleRadEditor.OnClienModeChange = "OnClienModeChange";         

then in my page i put this code

                        function OnClientModeChange(editor) {         
                    var mode = editor.get_mode();         
                    switch (mode) {         
                        case 1:         
                            alert("We are in Design mode");         
                            //do something         
                            break;         
                        case 2:         
                            alert("We are in Html mode");         
                            //do something         
                            break;         
                        case 4:         
                            alert("We are in Preview mode");         
                            //do something         
                            break;         
                    }         
                }         

then i received an exception, please see attached file

Thanks,

Rhodmie

answered on 10 May 2010, 02:50 PM

onclientmodechangeevent.zip

Hi Rhodmie,

I saw that you have missed the t letter in the OnClientModeChange property and its value. You should correct it to:

SampleRadEditor.OnClientModeChange = "OnClientModeChange";

For your convenience I have attached a sample working project.

Sincerely yours,
Rumen
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

OnCLientLoad event -disabling RAD Editor

20 Answers, 1 is accepted