New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Pasting content from RadComboBox item in RadEditor at cursor position

Description

Learn how to paste content from RadCombobox into RadEditor at carret position

Solution

When the user clicks on the combobox control the selection in the editor's content area is lost. The code below demonstrates how to make all comboboxes' items unselectable to prevent selection lost in RadEditor's content area.

In addition the getSelectedItemValue function is attached to the OnClientSelectedIndexChanged event of RadCombobox and pastes the selected item value at cursor position in the editor when the user selects a combobox item:

<script type="text/javascript">
function OnClientLoad(combobox, args)
{
    makeUnselectable(combobox.get_element());
}

function OnClientItemsRequested(combobox, args)
{
    $telerik.$("*", combobox.get_dropDownElement()).attr("unselectable", "on");
}

//Make all combobox items unselectable to prevent selection in editor being lost
function makeUnselectable(element)
{
    $telerik.$("*", element).attr("unselectable", "on");
}

function getSelectedItemValue(combobox, args)
{
  var value = combobox.get_value();
  //alert("The selected combobox value is: " + value);
  //get a reference to RadEditor client object 
  //and paste the selected combobox item content in it
  var editor = $find("<%=RadEditor1.ClientID%>"); 
  editor.pasteHtml(value);
}  
</script>
<telerik:radeditor runat="server" ID="RadEditor1" Content="test mest"></telerik:radeditor>
<div style="padding: 15px 0 0 0;font-family:Arial;font-size:14px;">
    RadComboBox with static items:
    <telerik:RadComboBox OnClientSelectedIndexChanged="getSelectedItemValue" OnClientLoad="OnClientLoad" ID="RadCombobox1" runat="server">
        <Items>
            <telerik:RadComboBoxItem Text="Item1" Value="<strong>Item 1</strong>" />
            <telerik:RadComboBoxItem Text="Item2" Value="<strong>Item 2</strong>" />
            <telerik:RadComboBoxItem Text="Item3" Value="<strong>Item 3</strong>" />
        </Items>
    </telerik:RadComboBox>
</div>
<div style="padding: 15px 0 0 0;font-family:Arial;font-size:14px;">
    RadComboBox with Load-On-Demand:
    <telerik:RadComboBox OnClientSelectedIndexChanged="getSelectedItemValue" OnClientItemsRequested="OnClientItemsRequested" OnClientLoad="OnClientLoad" ID="RadCombobox2" runat="server" 
        OnItemsRequested="RadCombobox2_ItemsRequested" EnableLoadOnDemand="true"></telerik:RadComboBox>
</div>
using Telerik.Web.UI;

protected void RadCombobox2_ItemsRequested(object o, Telerik.Web.UI.RadComboBoxItemsRequestedEventArgs e)
{
        for (int i = 0; i < 10; i++)
        {
            RadCombobox2.Items.Add(new RadComboBoxItem("Item" + i.ToString(), "<strong>Item " + i.ToString() + "</strong>"));
        }
}
In this article
Not finding the help you need? Improve this article