AjaxSpellCheck ContextMenu

3 posts, 0 answers
  1. haklberi
    haklberi avatar
    10 posts
    Member since:
    Mar 2011

    Posted 13 Nov 2013 Link to this post

    How to set ‘AjaxSpellCheck ContextMenu’ in RadEditor control to open bottom-top instead the default behavior (top-bottom )?


    Thanks,
    Dusan.
  2. haklberi
    haklberi avatar
    10 posts
    Member since:
    Mar 2011

    Posted 15 Nov 2013 Link to this post

    Have any suggestions? Telerik team?
  3. Ianko
    Admin
    Ianko avatar
    1938 posts

    Posted 18 Nov 2013 Link to this post

    Hi Dusan,

    The desired achievement is not available with the built in properties or object's APIs. This could be further customized via JavaScript implementation.

    Please follow this example setup:
    <div style="height:150px;">
        <%-- This element is intended to move the editor 150px down
            This is done because the logic of the customization detects
            if the dropdown UI is pushed into the hidden top area  --%>>
    </div>
     
    <telerik:RadEditor runat="server" ID="RadEditor1"
        OnClientLoad="OnClientLoad">
        <Content>
            RadSpell enablez developerz to add multilngual
            spellchecking capabilties to their ASP.NET applications.
        </Content>
    </telerik:RadEditor>
     
    <script type="text/javascript">
        // Set a public interval function for the AJAX calls
        var SUGGESTION_DROPDOWN_INTERVAL = function () { };
     
        function OnClientLoad(editor, args) {
            editor.add_spellCheckLoaded(
                function () {
                    var spell = editor.get_ajaxSpellCheck();
     
                    spell.add_spellCheckStart(
                        function (editor, args) {
                            // The dialog for the dropdown is available in the spellEngine API
                            var spellEngine = spell._spellEngine;
                            // Setting an interval to detect the exact moment when the dialog is rendered
                            SUGGESTION_DROPDOWN_INTERVAL = setInterval(function () {
     
                                if (spellEngine._suggestionDropdown &&
                                    spellEngine._suggestionDropdown.add_show) {
                                    // Clearing the interval function
                                    clearInterval(SUGGESTION_DROPDOWN_INTERVAL);
                                    var spellDropdown = spellEngine._suggestionDropdown;
                                    // Add a handler to the show event of the popup element
                                    spellDropdown.add_show(function () {
                                        // This handler will be invoked for all dialogs except the first one
                                        modifyDropdown(spellDropdown);
                                    });
                                    // Modify the first dialog
                                    modifyDropdown(spellDropdown);
                                }
                            }, 0);
                        });
                });
        }
     
        function modifyDropdown(dialog) {
            setTimeout(function () {
                var dropdownElement = dialog.get_popupElement();
                var height = dropdownElement.offsetHeight;
                var top = parseInt(dropdownElement.style.top) - height - 20;
                // Detect of the dropdown is going to be higher than the page's top bound
                if (top >= 0) {
                    dropdownElement.style.top = top + "px";
                }
            },0);
                     
        }
    </script>



    Regards,
    Ianko
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top