Make checkbox un-movable in Design mode

[Sameer]

Hello,

We use RadEditors to support drag and drop of pre-configured HTML that contains combination of text and few HTML controls like checkboxes and Dropdown lists. The Radeditor has to be in design mode as the user should be able to change/add any text even after the pre-configured text is dragged in. However, this creates an issue when checking/unchecking of checkboxes or even selecting values from drop down list. Users have to click multiple times to be able to select a value.

Is it possible to make the HTML controls not moveable/selectable in design mode so it would be easy to check/uncheck or select a value?

[Nikolay]

Hello,

You can use the RadEditor's OnClientLoad event to get the HTML controls within the content area and add them attributes e.g. unselectable="on" and/or attach events handlers. Here is a sample code:

<telerik:RadEditor ID="RadEditor1" runat="server" OnClientLoad="OnClientLoad"></telerik:RadEditor>

<script type="text/javascript">
    function OnClientLoad(editor, args)
    {
        var checkboxes = $telerik.$('input[type=checkbox]', editor.get_contentArea());
        checkboxes.attr('unselectable', 'on');

        checkboxes.off('mousedown.RadEditorCustomMousedown');
        checkboxes.on('mousedown.RadEditorCustomMousedown', function(event)
        {
            if (editor.get_mode() == Telerik.Web.UI.EditModes.Design)
            {
                var checkbox = event.target;
                // check or unckeck the checkbox here
            }
        });
    }
</script>

I hope this will help you to achieve the required functionality.

Best regards,
Nikolay
the Telerik team