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

[Solved] pastehtml

9 Answers 230 Views

Editor

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

Ayesha asked on 04 Sep 2009, 07:12 PM

Hi,

I've a radeditor and a radcombobox in my usercontrol (.ascx).
My scenario is I need to select some value from radcombobox and insert that value in the RADeditor. I got this working by the below approach.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

function getSelected()
 {
 var obTagCombo = $find('<%=m_radTagCombo.ClientID %>');
 var value = obTagCombo.get_value();
 var text = obTagCombo.get_text();
 var editor = $find("<%=m_radEmailEditor.ClientID%>"); //get a reference to RadEditor client object
 editor.pasteHtml(text);

}

</script>
</telerik:RadCodeBlock>

and i have a button <input type="button" value="Insert Tag" onclick="getSelected();" />
when this button is clicked it inserts the text from combobox and puts it in radeditor.

Note: m_radTagCombo is my name of radcombobox and m_radEmailEditor is my radeditor name.

But my problem is : I've my curor at the radeditor a a particular position. When I select a value from radcombobox, the cursor
position defaults to the begining of the line(first place).
Pls tell me how do I preserve the cursor position without going back to first position when i select value from a combobox.
pls do help me with code.

9 Answers, 1 is accepted

answered on 08 Sep 2009, 11:29 AM

pastefromcombobox.zip

Hi Zaheka,

When you click on the combobox and expand it then the focus in the editor is lost and for that reason the pasteHtml function pastes the content at the beginning of the content area.

To fix the problem you should set unselectable="on" attribute to all combobox elements. Here is an example how to achieve this:

    
            <script type="text/javascript"> 
        
            function OnClientLoad(combobox, args) 
        
            { 
        
                makeUnselectable(combobox.get_element()); 
        
            } 
        
            //Make all combobox items unselectable to prevent selection in editor being lost 
        
            function makeUnselectable(element) 
        
            { 
        
                var nodes = element.getElementsByTagName('*'); 
        
                for (var index = 0; index < nodes.length; index++) 
        
                { 
        
                    var elem = nodes[index]; 
        
                    elem.setAttribute('unselectable','on'); 
        
                } 
        
            } 
        
            </script> 
        
            <telerik:radeditor runat="server" ID="m_radEmailEditor"> 
        
               <ImageManager ViewPaths="~/" UploadPaths="~/" DeletePaths="~/" /> 
        
            </telerik:radeditor> 
        
            <telerik:RadComboBox OnClientLoad="OnClientLoad" ID="m_radTagCombo" runat="server"> 
        
                <Items> 
        
                    <telerik:RadComboBoxItem Text="Item1" Value="Item 1" /> 
        
                    <telerik:RadComboBoxItem Text="Item2" Value="Item 2" /> 
        
                    <telerik:RadComboBoxItem Text="Item3" Value="Item 3" /> 
        
                </Items> 
        
            </telerik:RadComboBox> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">     
        
            <script type="text/javascript"> 
        
               function getSelected() 
        
               { 
        
                  var obTagCombo = $find('<%=m_radTagCombo.ClientID %>'); 
        
                  var value = obTagCombo.get_value(); 
        
                  var text = obTagCombo.get_text(); 
        
                  var editor = $find("<%=m_radEmailEditor.ClientID%>"); //get a reference to RadEditor client object   
        
                  editor.pasteHtml(text); 
        
               }   
        
            </script> 
        
            </telerik:RadCodeBlock> 
        
            <input type="button" value="Insert Tag" onclick="getSelected();" />

I have also attached my test aspx page.

Kind regards,
Rumen
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 26 Feb 2010, 10:36 AM

I have a similar problem that doesn't seem to be solved using the suggestion you suggest.
I've been busy with it a while and have made the following abstract.
My actual problem is on a form with 3 comboboxes that get filled using ajax, hence the inclusion of ajax in this example.
The following is a page that allows you to reproduce the behaviour.
The steps to take to reproduce are part of the radeditor in the example below.

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="telerik_problem.aspx.cs" Inherits="DBS_Web.telerik_problem" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server"> 
        
                <title>Abstract</title> 
        
            </head> 
        
            <body> 
        
              <form runat="server" id="mainForm" method="post">   
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager> 
        
            <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server"> 
        
                <script type="text/javascript"> 
        
                //<![CDATA 
        
                    function OnClientLoadCombo(combobox, args)  
        
                     { 
        
                         makeUnselectable(combobox.get_element()); 
        
                     } 
        
                //Make all combobox items unselectable to prevent selection in editor being lost 
        
                function makeUnselectable(element) 
        
                { 
        
                    var nodes = element.getElementsByTagName('*'); 
        
                    for (var index = 0; index < nodes.length; index++) 
        
                    { 
        
                        var elem = nodes[index]; 
        
                        elem.setAttribute('unselectable','on'); 
        
                    } 
        
                } 
        
                </script> 
        
            </telerik:RadCodeBlock> 
        
                  <asp:Panel ID="pnlMain" runat="server" > 
        
                                <telerik:RadEditor ID="RadEditor1" Runat="server" Height="432px" Width="718px"> 
        
                                    <Content> 
        
                                    <br> 
        
                                    Reproduce: <br> 
        
                                       - select some text in this rad editor<br> 
        
                                       - Open combobox 1 and select item B. Selection remains intact.<br> 
        
                                       - Open combobox 2, do <b>not</b> select a value in this listbox!!  
        
                                       - Move mouse up to combobox 1 and select item A. Selection remains intact.<br> 
        
                                       - As soon as you now move the mouse as much as 1 pixel the selection is lost! 
        
                                       <br> 
        
                                    </Content> 
        
                                </telerik:RadEditor> 
        
                                <br /> 
        
                                1st<br /> 
        
                                <telerik:RadComboBox ID="RadComboBox1" Runat="server"  
        
                                OnClientLoad="OnClientLoadCombo" 
        
                                autopostback="true"> 
        
                                    <Items> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="A" Value="A" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="B" Value="B" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="C" Value="C" /> 
        
                                    </Items> 
        
                                </telerik:RadComboBox> 
        
                            <br /> 
        
                            2nd<br /><telerik:RadComboBox ID="RadComboBox2" Runat="server"  
        
                                OnClientLoad="OnClientLoadCombo" 
        
                                autopostback="true"> 
        
                                <Items> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="1" Value="1" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="2" Value="2" /> 
        
                                        <telerik:RadComboBoxItem runat="server" Text="3" Value="3" />                     
        
                                        </Items> 
        
                            </telerik:RadComboBox> 
        
                </asp:Panel>     
        
                <telerik:RadAjaxManager runat="server"> 
        
                    <AjaxSettings> 
        
                        <telerik:AjaxSetting AjaxControlID="RadComboBox1"> 
        
                            <UpdatedControls> 
        
                                <telerik:AjaxUpdatedControl ControlID="RadComboBox2" /> 
        
                            </UpdatedControls> 
        
                            </telerik:AjaxSetting> 
        
                            <telerik:AjaxSetting AjaxControlID="RadComboBox1"> 
        
                            <UpdatedControls> 
        
                            </UpdatedControls>                 
        
                        </telerik:AjaxSetting> 
        
                    </AjaxSettings> 
        
                </telerik:RadAjaxManager> 
        
                </form> 
        
            </body> 
        
            </html>

There's no codebehind needed .

answered on 01 Mar 2010, 09:31 AM

I added it, still same behaviour.
The OnClientItemsRequested is not even triggerd.

Did you try the example i added in my previous post?
It works fine except for the specfic scenario i specified inside the example.

- Select some text in the rad editor
- Open combobox 1 and select item B. Selection remains intact.
- Open combobox 2, do not select a value in this listbox!!
- Move mouse up to combobox 1 and select item A. Selection remains intact.
- As soon as you now move the mouse as much as 1 pixel the selection is lost!

answered on 04 Mar 2010, 12:00 PM

I need auto postback for my codebehind code to fire.
The example is just an abstract that triggers the problem i have.
Here is a new more detailed description of what i think is going wrong.
Followed by an example that lets you reproduce exactly what i mean.

I think it's a bug that only happens when a combobox that is set to do postbacks is opened without it triggering the onselectedindexchanged (And associated clientside events) and another combobox that also is set to do postback has it's selected index changed by choosing a different item in that list.

When using the below example the selection is retained always -despite postbacks- and the only cases it fails to retain the selection is when a combobox that causes postbacks is opened and closed without triggering the onselectedindexchanged(And associated clientside events) and after that the other listbox with autopostbacks enabled is used to select a value.

I realy urge you to load the attached files in a project and test it.

As long as you keep selecting new values in the 1st and 2nd combobox -triggering onselectedindexchanged(And associated clientside events)- the editor keeps the selection.

It happens in the follwing 4 scenarios:
- The user selects the value from the list that was already selected. The user then selects a value in another combobox.
- comboboxe only has one value and the user is forced to select the current value. The user then selects a value in another combobox
- The user opens the combox and while it is open clicks on another combobox and selects a value in that combobox.
- The user opens the combox and while it is open presses escape key, then opens another combobox and selects a value in that combobox.

Code:

using System;

using Telerik.Web.UI;

namespace DBS_Web

{

 public partial class telerik : System.Web.UI.Page

 {

 protected void Page_Load(object sender, EventArgs e)

 {

 }

 protected void RadComboBox1_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

 {

 RadComboBox2.Items.Clear();

 RadComboBox2.Items.Add(new RadComboBoxItem(DateTime.Now.ToString("2 - HH:mm:ss.ff"), "1"));

 RadComboBox2.Items.Add(new RadComboBoxItem(DateTime.Now.ToString("2 - HH:mm:ss.ff"), "2"));

 RadComboBox2.Items.Add(new RadComboBoxItem(DateTime.Now.ToString("2 - HH:mm:ss.ff"), "3"));

 }

 protected void RadComboBox2_SelectedIndexChanged(object o, RadComboBoxSelectedIndexChangedEventArgs e)

 {

 RadComboBox3.Items.Clear();

 RadComboBox3.Items.Add(new RadComboBoxItem(DateTime.Now.ToString("3 - HH:mm:ss.ff"), "1"));

 RadComboBox3.Items.Add(new RadComboBoxItem(DateTime.Now.ToString("3 - HH:mm:ss.ff"), "2"));

 RadComboBox3.Items.Add(new RadComboBoxItem(DateTime.Now.ToString("3 - HH:mm:ss.ff"), "3"));

 }

 }

}

Asp:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="telerik.aspx.cs" Inherits="DBS_Web.telerik" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head id="Head1" runat="server">

 <title>Abstract</title>

</head>

<body>

 <form runat="server" id="mainForm" method="post">

 <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

 <script type="text/javascript">

 //<![CDATA

 function OnClientLoadCombo(combobox, args)

 {

 makeUnselectable(combobox.get_element());

 }

 //Make all combobox items unselectable to prevent selection in editor being lost

 function makeUnselectable(element)

 {

 var nodes = element.getElementsByTagName('*');

 for (var index = 0; index < nodes.length; index++)

 {

 var elem = nodes[index];

 elem.setAttribute('unselectable','on');

 }

 }

 </script>

</telerik:RadCodeBlock>

 <asp:Panel ID="pnlMain" runat="server" >

 <telerik:RadEditor ID="RadEditor1" Runat="server" Height="600" Width="990px">

 <Content>

 

 How to make it fail: 

 - Select some text in this editor. 

 - Open combobox 2, do not select a value in this listbox!! 

 - Move mouse up to combobox 1 and select an item. Selection remains intact. 

 - As soon as you now move the mouse as much as 1 pixel the selection is lost! 

 

 <DIV>I think it's a bug that only happens when a combobox that is set to do postbacks is opened without it triggering the

onselectedindexchanged When using the below example the selection is

retained always -despite postbacks- and

the only cases it fails to retain the selection is when a combobox that

causes postbacks is opened and closed without triggering the

onselectedindexchanged. I realy urge you to load the attached

files in a project and test it. As long as you keep selecting new values

in the 1st and 2nd combobox -triggering

onselectedindexchanged- the editor

keeps the selection. It

happens in the follwing 4 scenarios: - The user

selects the value from the list that was already selected. The user then selects

a value in another combobox. - comboboxe only has one value and the user is

forced to select the current value. The user then selects a value in another

combobox - The user opens the combox and while it is open clicks on another

combobox and selects a value in that combobox. - The user opens the combox

and while it is open presses esc, then opens another combobox and selects a

value in that combobox. </DIV>



 </Content>

 </telerik:RadEditor>

 

 1st 

 <telerik:RadComboBox ID="RadComboBox1" Runat="server"

 OnClientLoad="OnClientLoadCombo"

 onselectedindexchanged="RadComboBox1_SelectedIndexChanged"

 autopostback="true">

 <Items>

 <telerik:RadComboBoxItem runat="server" Text="A" Value="A" />

 <telerik:RadComboBoxItem runat="server" Text="B" Value="B" />

 <telerik:RadComboBoxItem runat="server" Text="C" Value="C" />

 </Items>

 </telerik:RadComboBox>

 





 2nd <telerik:RadComboBox ID="RadComboBox2" Runat="server"

 OnClientLoad="OnClientLoadCombo"

 onselectedindexchanged="RadComboBox2_SelectedIndexChanged"

 autopostback="true">

 <Items>

 <telerik:RadComboBoxItem runat="server" Text="1" Value="1" />

 </Items>

 </telerik:RadComboBox>

 



 3rd 

 <telerik:RadComboBox ID="RadComboBox3" Runat="server"

 OnClientLoad="OnClientLoadCombo" >

 <Items>

 <telerik:RadComboBoxItem runat="server" Text="" Value="1" />

 </Items>

 </telerik:RadComboBox>

 </asp:Panel>





 <telerik:RadAjaxManager runat="server">

 <AjaxSettings>

 <telerik:AjaxSetting AjaxControlID="RadComboBox1">

 <UpdatedControls>

 <telerik:AjaxUpdatedControl ControlID="RadComboBox2" />

 </UpdatedControls>

 </telerik:AjaxSetting>



 <telerik:AjaxSetting AjaxControlID="RadComboBox2">

 <UpdatedControls>

 <telerik:AjaxUpdatedControl ControlID="RadComboBox3" />

 </UpdatedControls>



 </telerik:AjaxSetting>

 </AjaxSettings>

 </telerik:RadAjaxManager>





 </form>

</body>

</html>

answered on 09 Mar 2010, 05:25 PM

Hi,

Yes, I was able to reproduce the reported behavior but I was unable to find a solution for it. The problem is that the postbacks clear the selection in the editor's content area and there is no way to restore it. I tried to store the selection in the OnRequestStart event of RadAjaxManager and restore it in the OnResponseEnd using the getRange method of RadEditor but without success, e.g.

<script type="text/javascript">

var editorObject = null;

var range = null;

Sys.Application.add_load(function() {

var editor = $find("<%=RadEditor1.ClientID%>"); //get a reference to RadEditor's client object

editorObject = editor;

}

);

function StoreSelection() {

range = editorObject.getSelection().getRange(); //returns an object that represents a restore point.

debugger;

}

function RestoreSelection() {

editorObject.getSelection().selectRange(range); //Selects the restore point in case you need to restore the cursor to its original location.

}

</script>

<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >

<ClientEvents OnRequestStart="StoreSelection" OnResponseEnd="RestoreSelection" />

<AjaxSettings> ...

You will experience the same problem if you replace the editor with a standard editable IFRAME element. You will notice that the selection is lost automatically after every page postback.

If you find a solution for this behavior and post it here I will gladly award your with 10000 Telerik points.

Kind regards,
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.