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

AjaxSpellCheck ContextMenu

2 Answers 65 Views
Editor
This is a migrated thread and some comments may be shown as answers.
haklberi
Top achievements
Rank 1
haklberi asked on 13 Nov 2013, 10:58 AM

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


Thanks,
Dusan.

2 Answers, 1 is accepted

Sort by
0
haklberi
Top achievements
Rank 1
answered on 15 Nov 2013, 09:27 AM
Have any suggestions? Telerik team?
0
Ianko
Telerik team
answered on 18 Nov 2013, 08:25 AM
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.
Tags
Editor
Asked by
haklberi
Top achievements
Rank 1
Answers by
haklberi
Top achievements
Rank 1
Ianko
Telerik team
Share this question
or