RadEditor EmptyMessage not working

7 posts, 0 answers
  1. John
    John avatar
    8 posts
    Member since:
    Sep 2014

    Posted 09 Apr 2015 Link to this post

    I'm having troubles with the RadEditor which I am using on my ASP.NET site. I'm trying to use the EmptyMessage feature to tell the user that this field is optional by displaying a "Optional" watermark. Here is what I have:

    <telerik:RadEditor EditModes="Design" SpellCheckSettings-DictionaryPath="./RadSpell" ID="optionalEditorField"  runat="server" Height="150px" ToolbarMode="ShowOnFocus" EmptyMessage="Optional" >
    <Tools>
    <telerik:EditorToolGroup>
    ...
     

     The above code is not displaying the "Optional" watermark. I use similar settings for Telerik text editors and those watermarks work fine. Would anyone know what I might be doing wrong? 

    I have a slightly older telerik version, I think 2012 or so. 

  2. Misho
    Admin
    Misho avatar
    129 posts

    Posted 10 Apr 2015 Link to this post

    Hi,

    The EmptyMessage feature has been introduced in Q2 2012. That's why I recommend you to upgrade to the latest version of UI for ASP.NET AJAX if your version is older than it.
    Here is a video that is showing the result on my end with latest version of Telerik and a markup similar to what you have provided:

    <telerik:RadEditor EditModes="Design" ID="RadEditor1"
                runat="server" Height="150px" ToolbarMode="ShowOnFocus" EmptyMessage="Optional">
            </telerik:RadEditor>
            <telerik:RadEditor EditModes="Design" ID="RadEditor2"
                runat="server" Height="150px" ToolbarMode="ShowOnFocus" EmptyMessage="Optional">
            </telerik:RadEditor>
            <telerik:RadEditor EditModes="Design" ID="RadEditor3"
                runat="server" Height="150px" ToolbarMode="ShowOnFocus" EmptyMessage="Optional">
            </telerik:RadEditor>
            <telerik:RadTextBox runat="server" EmptyMessage="Optiomnal"></telerik:RadTextBox>

    I hope that helps.

    Regards,
    Misho
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. John
    John avatar
    8 posts
    Member since:
    Sep 2014

    Posted 10 Apr 2015 in reply to Misho Link to this post

    Thank you for the response and example video. Unfortunately this is still not working for me. My application is also using bootstrap and runs on SharePoint. Could that possibly be a problem?

    I've modified the code slightly which now looks like this:

     

    <div class="row">
     <div class="col-10 col-xs-10 col-sm-10 col-md-10 col-lg-10 form-group">
      <label class="control-label">Some Label Here</label>
      <telerik:RadEditor EditModes="Design" ID="edtCustFam" runat="server" Height="150px" ToolbarMode="ShowOnFocus" EmptyMessage="Optional">
      </telerik:RadEditor>
     </div>
     </div>

     

    The watermark/empty message is still not appearing. Actually, I don't even see it in the resulting HTML. Here is was the page source looks like for that field:

     

    <div class="row">
    <div class="col-10 col-xs-10 col-sm-10 col-md-10 col-lg-10 form-group">
    <label class="control-label">
    Some Label Here</label>
     
    <div id="ctl00_PlaceHolderMain_edtCustFam" class="RadEditor Default reWrapper" style="width:680px;height:150px;">
    <div id="ctl00_PlaceHolderMain_edtCustFam_dialogOpener" style="display:none;">
    <div id="ctl00_PlaceHolderMain_edtCustFam_dialogOpener_Window" style="display:none;">
    <div id="ctl00_PlaceHolderMain_edtCustFam_dialogOpener_Window_C" style="display:none;">
     
    </div><input id="ctl00_PlaceHolderMain_edtCustFam_dialogOpener_Window_ClientState" name="ctl00_PlaceHolderMain_edtCustFam_dialogOpener_Window_ClientState" type="hidden" />
    </div><input id="ctl00_PlaceHolderMain_edtCustFam_dialogOpener_ClientState" name="ctl00_PlaceHolderMain_edtCustFam_dialogOpener_ClientState" type="hidden" />
    </div><div class="reRibbonBarWrapper"></div><table id="ctl00_PlaceHolderMain_edtCustFamWrapper" class="reLayoutWrapper" style="width:100%;height:150px;">
    <caption style="display:none;">
    RadEditor - HTML WYSIWYG Editor. MS Word-like content editing experience thanks to a rich set of formatting tools, dropdowns, dialogs, system modules and built-in spell-check.
    </caption><thead style="display:none;">
    <tr>
    <th scope="col"><span>RadEditor's components - toolbar, content area, modes and modules</span></th>
    </tr>
    </thead><tbody>
    <tr>
    <th scope="row" style="display:none;"><span></span></th><td class="reWrapper_corner reCorner_top_left"> </td><td class="reWrapper_center reCenter_top" colspan="3"> </td><td class="reWrapper_corner reCorner_top_right"> </td>
    </tr><tr>
    <th scope="row" style="display:none;"><span>Toolbar's wrapper</span></th><td class="reLeftVerticalSide" rowspan="4"> </td><td rowspan="4" id="ctl00_PlaceHolderMain_edtCustFamLeft" class="reTlbVertical"></td><td id="ctl00_PlaceHolderMain_edtCustFamTop" class="reToolCell" style="width:100%;"><div class="Default reToolbarWrapper" style="visibility:hidden;overflow:hidden;height:0px;">
    <ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="Print (CTRL+P / CMD+P)" class="reTool" href="#"><span class="Print"> </span></a></li><li><a title="AJAX Spellchecker" class="reTool" href="#"><span class="AjaxSpellCheck"> </span></a></li><li><a title="Find And Replace (CTRL+F / CMD+F)" class="reTool" href="#"><span class="FindAndReplace"> </span></a></li><li><a title="Select All (CTRL+A / CMD+A)" class="reTool" href="#"><span class="SelectAll"> </span></a></li><li><a title="Cut (CTRL+X / CMD+X)" class="reTool" href="#"><span class="Cut"> </span></a></li><li><a title="Copy (CTRL+C / CMD+C)" class="reTool" href="#"><span class="Copy"> </span></a></li><li><a title="Paste (CTRL+V / CMD+V)" class="reTool" href="#"><span class="Paste"> </span></a></li><li><a title="Paste Options" class="reTool reSplitButton" href="#"><span class="PasteStrip"> </span><span class="split_arrow"> </span></a></li><li class="reSeparator"> </li><li><a title="Undo (CTRL+Z / CMD+Z)" class="reTool reSplitButton" href="#"><span class="Undo"> </span><span class="split_arrow"> </span></a></li><li><a title="Redo (CTRL+Y / CMD+Y)" class="reTool reSplitButton" href="#"><span class="Redo"> </span><span class="split_arrow"> </span></a></li><li class="reGrip grip_last"> </li>
    </ul><ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="Image Manager (CTRL+G / CMD+G)" class="reTool" href="#"><span class="ImageManager"> </span></a></li><li><a title="Document Manager" class="reTool" href="#"><span class="DocumentManager"> </span></a></li><li><a title="Flash Manager" class="reTool" href="#"><span class="FlashManager"> </span></a></li><li><a title="Media Manager" class="reTool" href="#"><span class="MediaManager"> </span></a></li><li><a title="Template Manager" class="reTool" href="#"><span class="TemplateManager"> </span></a></li><li class="reSeparator"> </li><li><a title="Hyperlink Manager (CTRL+K / CMD+K)" class="reTool" href="#"><span class="LinkManager"> </span></a></li><li><a title="Remove Link (CTRL+SHIFT+K / CMD+SHIFT+K)" class="reTool" href="#"><span class="Unlink"> </span></a></li><li class="reGrip grip_last"> </li>
    </ul><ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="SuperScript" class="reTool" href="#"><span class="Superscript"> </span></a></li><li><a title="Subscript" class="reTool" href="#"><span class="Subscript"> </span></a></li><li><a title="New Paragraph" class="reTool" href="#"><span class="InsertParagraph"> </span></a></li><li><a title="Insert Groupbox" class="reTool" href="#"><span class="InsertGroupbox"> </span></a></li><li><a title="Horizontal Rule" class="reTool" href="#"><span class="InsertHorizontalRule"> </span></a></li><li><a title="Insert Date" class="reTool" href="#"><span class="InsertDate"> </span></a></li><li><a title="Insert Time" class="reTool" href="#"><span class="InsertTime"> </span></a></li><li class="reSeparator"> </li><li><a title="Format Code Block" class="reTool" href="#"><span class="FormatCodeBlock"> </span></a></li><li class="reGrip grip_last"> </li>
    </ul><ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="Paragraph Style" class="reDropdown" href="#"><span class="FormatBlock" style="width:80px;">Paragraph Style</span></a></li><li><a title="Font Name (CTRL+SHIFT+F / CMD+SHIFT+F)" class="reDropdown" href="#"><span class="FontName" style="width:80px;">Font Name</span></a></li><li><a title="Real font size (CTRL+SHIFT+P / CMD+SHIFT+P)" class="reDropdown" href="#"><span class="RealFontSize" style="width:34px;">Real font size</span></a></li><li class="reGrip grip_last"> </li>
    </ul><ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="Set Absolute Position" class="reTool" href="#"><span class="AbsolutePosition"> </span></a></li><li class="reSeparator"> </li><li><a title="Bold (CTRL+B / CMD+B)" class="reTool" href="#"><span class="Bold"> </span></a></li><li><a title="Italic (CTRL+I / CMD+I)" class="reTool" href="#"><span class="Italic"> </span></a></li><li><a title="Underline (CTRL+U / CMD+U)" class="reTool" href="#"><span class="Underline"> </span></a></li><li><a title="Strikethrough" class="reTool" href="#"><span class="StrikeThrough"> </span></a></li><li class="reSeparator"> </li><li><a title="Align Left" class="reTool" href="#"><span class="JustifyLeft"> </span></a></li><li><a title="Align Center" class="reTool" href="#"><span class="JustifyCenter"> </span></a></li><li><a title="Align Right" class="reTool" href="#"><span class="JustifyRight"> </span></a></li><li><a title="Justify" class="reTool" href="#"><span class="JustifyFull"> </span></a></li><li><a title="Remove alignment" class="reTool" href="#"><span class="JustifyNone"> </span></a></li><li class="reSeparator"> </li><li><a title="Indent" class="reTool" href="#"><span class="Indent"> </span></a></li><li><a title="Outdent" class="reTool" href="#"><span class="Outdent"> </span></a></li><li class="reSeparator"> </li><li><a title="Numbered List" class="reTool" href="#"><span class="InsertOrderedList"> </span></a></li><li><a title="Bullet List" class="reTool" href="#"><span class="InsertUnorderedList"> </span></a></li><li class="reSeparator"> </li><li><a title="Show/Hide Border" class="reTool" href="#"><span class="ToggleTableBorder"> </span></a></li><li><a title="XHTML Validator" class="reTool" href="#"><span class="XhtmlValidator"> </span></a></li><li class="reGrip grip_last"> </li>
    </ul><ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="Foreground Color" class="reTool reSplitButton" href="#"><span class="ForeColor"> </span><span class="split_arrow"> </span></a></li><li><a title="Background Color" class="reTool reSplitButton" href="#"><span class="BackColor"> </span><span class="split_arrow"> </span></a></li><li><a title="Apply CSS Class" class="reDropdown" href="#"><span class="ApplyClass" style="width:80px;">Apply CSS Class</span></a></li><li><a title="Format Stripper" class="reTool reSplitButton" href="#"><span class="FormatStripper"> </span><span class="split_arrow"> </span></a></li><li class="reGrip grip_last"> </li>
    </ul><ul class="reToolbar Default">
    <li class="reGrip grip_first"> </li><li><a title="Insert Symbol" class="reTool reSplitButton" href="#"><span class="InsertSymbol"> </span><span class="split_arrow"> </span></a></li><li><a title="Insert Table" class="reTool reSplitButton" href="#"><span class="InsertTable"> </span><span class="split_arrow"> </span></a></li><li><a title="Insert Form Element" class="reTool reSplitButton" href="#"><span class="InsertFormElement"> </span><span class="split_arrow"> </span></a></li><li><a title="Insert Code Snippet" class="reTool reSplitButton" href="#"><span class="InsertSnippet"> </span><span class="split_arrow"> </span></a></li><li><a title="Image Map Editor" class="reTool" href="#"><span class="ImageMapDialog"> </span></a></li><li><a title="Custom Links (CTRL+ALT+K / CMD+ALT+K)" class="reDropdown" href="#"><span class="InsertCustomLink" style="width:80px;">Custom Links</span></a></li><li class="reSeparator"> </li><li><a title="Convert to lower case" class="reTool" href="#"><span class="ConvertToLower"> </span></a></li><li><a title="Convert to upper case" class="reTool" href="#"><span class="ConvertToUpper"> </span></a></li><li class="reSeparator"> </li><li><a title="Zoom" class="reDropdown" href="#"><span class="Zoom" style="width:44px;">Zoom</span></a></li><li><a title="Module Manager" class="reTool reSplitButton" href="#"><span class="ModuleManager"> </span><span class="split_arrow"> </span></a></li><li><a title="Toggle Full Screen Mode (F11)" class="reTool" href="#"><span class="ToggleScreenMode"> </span></a></li><li><a title="About RadEditor" class="reTool" href="#"><span class="AboutDialog"> </span></a></li><li class="reGrip grip_last"> </li>
    </ul>
    </div></td><td rowspan="4" id="ctl00_PlaceHolderMain_edtCustFamRight" class="reTlbVertical"></td><td rowspan="4" class="reRightVerticalSide"> </td>
    </tr><tr>
    <th scope="row" style="display:none;"><span>Content area wrapper</span></th><td id="ctl00_PlaceHolderMain_edtCustFamCenter" class="reContentCell" style="height:100%;"><label for="ctl00_PlaceHolderMain_edtCustFamContentHiddenTextarea" style="display:none;">RadEditor hidden textarea</label><textarea id="ctl00_PlaceHolderMain_edtCustFamContentHiddenTextarea" name="ctl00$PlaceHolderMain$edtCustFam" rows="4" cols="20" style="display:none;">%3cbr /%3e
    %3cbr /%3e
    %3cbr /%3e
    %3cbr /%3e
    %3cbr /%3e</textarea></td>
    </tr><tr>
    <th scope="row" style="display:none;"><span>RadEditor's bottom area: Design, Html and Preview modes, Statistics module and resize handle.</span></th><td class="reToolZone"><table class="reBottomTable" id="ctl00_PlaceHolderMain_edtCustFam_BottomTable" style="width:100%;">
    <caption style="display:none;">
    It contains RadEditor's Modes/views (HTML, Design and Preview), Statistics and Resizer
    </caption><thead style="display:none;">
    <tr>
    <th scope="col"><span>Editor Mode buttons</span></th><th scope="col"><span>Statistics module</span></th><th scope="col"><span>Editor resizer</span></th>
    </tr>
    </thead><tbody>
    <tr style="display:none;">
    <td class="reEditorModesCell"><div class="reEditorModes" id="ctl00_PlaceHolderMain_edtCustFam_ModesWrapper">
     
    </div></td><td class="reBottomZone" id="ctl00_PlaceHolderMain_edtCustFamBottom"> </td><td class="reResizeCell" style="width:15px;"><div id="ctl00_PlaceHolderMain_edtCustFamBottomResizer">
          
    </div></td>
    </tr>
    </tbody>
    </table><noscript>
    <p>RadEditor - please enable JavaScript to use the rich text editor.</p>
    </noscript></td>
    </tr><tr>
    <th scope="row" style="display:none;"><span>RadEditor's Modules - special tools used to provide extra information such as Tag Inspector, Real Time HTML Viewer, Tag Properties and other.</span></th><td id="ctl00_PlaceHolderMain_edtCustFamModule" class="reToolZone"></td>
    </tr><tr>
    <th scope="row" style="display:none;"><span></span></th><td class="reWrapper_corner reCorner_bottom_left"> </td><td class="reWrapper_center reCenter_bottom" colspan="3"> </td><td class="reWrapper_corner reCorner_bottom_right"> </td>
    </tr>
    </tbody>
    </table><input id="ctl00_PlaceHolderMain_edtCustFam_ClientState" name="ctl00_PlaceHolderMain_edtCustFam_ClientState" type="hidden" />
    </div>
    </div>
    </div>

     

    Interestingly, I don't have any of the RadEditor tools defined but looks like it puts them in there anyways. I'm guessing this is normal. (?). But the "Optional" is still not displaying.

    Also - this application is running on SharePoint. Could that be a problem with it? But I would at least expect to see something in the source code...

    Many thanks again

  5. Slav
    Admin
    Slav avatar
    1355 posts

    Posted 15 Apr 2015 Link to this post

    Hello John,

    If you are using the RadEditor control in SharePoint, I would recommend replacing it with SPRadEditor, which comes with the installation of the Telerik Web Part for SharePoint. This way the HttpHandlers that are used by the editor control will be automatically configured and implementing your own content provider for accessing SharePoint libraries will not be required.

    To use the SPRadEditor you need to:
    1. Install the Telerik Web Parts for SharePoint.
    2. Add the following Register directive in the page/web part, in which the editor resides:
      <%@ Register TagPrefix="telerik" Namespace="Telerik.SharePoint" Assembly="RadEditorSharePoint, Version=x.x.x.x, Culture=neutral, PublicKeyToken=1f131a624888eeed" %>
      x.x.x.x marks the current version of the Web Parts.
    3. Change the name of the control accordingly:
      <telerik:SPRadEditor EditModes="Design" ID="edtCustFam" runat="server" Height="150px" ToolbarMode="ShowOnFocus" EmptyMessage="Optional">
        </telerik:SPRadEditor >
    Now you can set the EmptyMessage property either directly in the control declaration or in the ConfigFile.xml file (http://www.telerik.com/help/aspnet-ajax/moss-sp2010-set-properties-via-config-file.html)

    The EmptyMessage property should work with a standard RadEditor as well, however you will need to configure the HttpHandlers and content providers so that all features of the control are available.

    In case the EmptyMessage property does not work in both scenarios, most probably you are using a version of the Telerik controls older than Q2 2012 (2012.2.607) and the property is not yet implemented. Since I did not notice any information about the exact version you are using, please check it and in case it is older than the one I posted above, you will need to upgrade in order to use the property.

    If you are not sure how to check the currently used version of the Telerik controls, the following blog post explains how to do this: http://blogs.telerik.com/aspnet-ajax/posts/12-03-28/getting-tired-of-seeing-trial-messages-in-your-asp-net-ajax-application.aspx

    Regards,
    Slav
    Telerik
     

    See What's Next in App Development. Register for TelerikNEXT.

     
  6. John
    John avatar
    8 posts
    Member since:
    Sep 2014

    Posted 16 Apr 2015 in reply to Slav Link to this post

    Thanks for all that info. We are looking to see if getting the latest version of the telerik dll might help as well. I will be looking into these options. Thanks again.
  7. John
    John avatar
    8 posts
    Member since:
    Sep 2014

    Posted 12 May 2015 Link to this post

    Hi. Since my last post we have updated to the latest Telerik version but we are still have problems with the RADEDITOR. The hover text is not showing correctly. The text only gets displayed when putting the mouse at the end of the textbox. The tooltip will not display when mouseover the main text field area.

     My code looks as:

     

    <telerik:RadEditor EditModes="Design" SpellCheckSettings-DictionaryPath="./RadSpell" ID="edtCompetencies"

    runat="server" Height="150px" ToolbarMode="ShowOnFocus" ToolTip="Minimum skills (i.e. Full Spectrum Leadership, writing, communication) required to be successful in the position.">

    <Tools>

    <telerik:EditorToolGroup>

     

     

     

  8. Vessy
    Admin
    Vessy avatar
    1382 posts

    Posted 13 May 2015 Link to this post

    Hi John,

    I have just answered you support ticket on the subject, for convenience I am pasting my answer here as well:

    I managed to reproduce the described behavior and will pass it to our developers to consider it for a future improvement. For the time being I can suggest you to try using the RadTooltip control and show a tooltip over the whole Editor in a similar way:
    <telerik:RadEditor EditModes="Design" SpellCheckSettings-DictionaryPath="./RadSpell" ID="edtCompetencies"
        runat="server" Height="150px" ToolbarMode="ShowOnFocus" ToolTip="This tool tip hover text is not showing up unless mouse touches the edge of the text area.">
    </telerik:RadEditor>
    <telerik:RadToolTip ID="tooltip1" runat="server" Text="Custom tooltip shown over the whole RadEditor" RelativeTo="Mouse" TargetControlID="edtCompetencies"></telerik:RadToolTip>

    I hope this approach will be applicable for your scenario.

    Regards,
    Vessy
    Telerik
    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 Feedback Portal and vote to affect the priority of the items
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017