Can I add a combobox to radeditor's tools collection?

4 posts, 0 answers
  1. Vithiya
    Vithiya avatar
    41 posts
    Member since:
    May 2008

    Posted 28 Apr 2009 Link to this post

    I am using the radeditor in one of my screens and currently I have the tools as dropdowns. One dropdown has the possibility of having too many values. It will be difficult for the user to go through the entire list to find his item. So, I was thinking about using a type ahead combo box in the tools instead of the dropdown. I looked around and couldn't find anything similar. Please let me know if it is possible to replace the dropdowns with typeahead combos and if it is, please give me some sample code to accomplish that.

    Thank you,
    Vithiya
  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 29 Apr 2009 Link to this post

    Hi Vithiya,

    You can use the code below to put RadComboBox before a custom dropdown of RadEditor on the toolbar and after that hide the custom dropdown:

     <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="240px" Width="150px"></telerik:RadComboBox> 
     <telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad"
        <Tools> 
            <telerik:EditorToolGroup> 
                <telerik:EditorTool Name="Bold" /> 
                <telerik:EditorTool Name="Italic" /> 
                <telerik:EditorTool Name="Underline" /> 
                <telerik:EditorDropDown Name="CustomDropdown" width="160px" /> 
                <telerik:EditorTool Name="LinkManager" /> 
            </telerik:EditorToolGroup> 
        </Tools> 
     </telerik:radeditor>                                  
    <script type="text/javascript"
    function OnClientLoad(editor) 
        //get a reference to the combo wrapper 
        var combo = $find("<%=RadComboBox1.ClientID%>"); 
        var comboWrapper = combo.get_element();  
         
        //get a reference to the custom dropdown tool and its parent element 
        var customDropdown = editor.getToolByName("CustomDropdown").get_element();  
        var parentCustomTool = customDropdown.parentNode; 
         
        //insert the combobox before the custom dropdown 
        parentCustomTool.insertBefore(comboWrapper, customDropdown); 
        //hide the custom dropdown 
        customDropdown.style.display = "none"
    </script> 


    After that you can use the RadEditor's client-side pasteHtml method to paste the content supplied by the selected combobox item.

    BTW if you successfully implement your scenario then you can share it in the forums or in a code library with our community. We will gladly award you for your work.

    Kind 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.
  3. Raka
    Raka avatar
    71 posts
    Member since:
    Sep 2011

    Posted 21 Feb 2012 Link to this post

    Hi -- I am trying to use your suggestion to add a combobox to the RadEditor tool. 
    I have created a editorDropDown and added it to the RadEditor in code behind.  This editorDropDown has 2 items in it.  In OnClientLoad event, I try to replace it with the ComboBox using your code.  It does replace it.  However the ComboBox does not have any items in it.  I can't see how to get at these elements to even copy them manually.

    Any help will be appreciated.

    Thanks, S
  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 22 Feb 2012 Link to this post

    Hello,

    The purpose of the editorDropDown is to occupy the space where RadComboBox will be added. The code just inserts RadComboBox before the RadEditor's dropdown and hides it. The code does not move any items from the custom dropdown to RadComboBox and it is up to the developer to populate RadComboBox with items.

    Greetings,
    Rumen
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top