AutoResizeHeight implementation

[Chris]

Hello,

Is the AutoResizeHeight feature going to be implemented in the next release (as it is seen in the AJAX control set)?  Is there any code samples to enable that feature in the current MVC release?  Currently, I am looking into jQuery event binding to increase the editable iframe area based on the height of the inner body tag.

Thanks,

-Chris

[Alex Gyoshev]

Hello Chris,

This feature is not scheduled for the Q3 release, yet we can add it if enough customers request it -- I've logged it in our public issue tracking system. Until then, you can easily achieve the effect with the following code:
<%= Html.Telerik().Editor()
            .Name("Editor")
            .ClientEvents(events => events
                .OnSelectionChange("onSelectionChange")
            )
    %>

    <script type="text/javascript">
        var contentArea, contentWrap, initialHeight;

        function onSelectionChange(e) {
            if (!contentWrap) {
                var editor = $('#Editor');
                contentWrap = editor.find('.t-content')[0];
                contentArea = contentWrap.contentWindow.document.body;
                initialHeight = $(contentWrap).height();
            }

            var endHeight;

            if ($.browser.msie) {
                if ($.browser.version < 8)
                    endHeight = contentArea.scrollHeight + 45;
                else
                    endHeight = contentArea.scrollHeight - 1;
            } else
                endHeight = contentArea.offsetHeight + 45;

            $(contentWrap).height(Math.max(initialHeight, endHeight));
        }
    </script>

I am attaching the sample solution that I used to test it out. The magic value 45 is used in order to let the editor grow ahead of editing and never show a scrollbar.

All the best,
Alex Gyoshev
the Telerik team

[Chris]

Thanks for the great code sample Alex!

However, I noticed an issue with the copy-paste of the bulleted text you provided.  I copied the text, then moved the cursor to the end of the third bullet, then hit paste.  This action caused a JScript error to be thrown in telerik.editor.min.js.  The specific call was 'aW.nodeName.toLowerCase',  It seems the aW object is null when passed into the function.  I've also noticed this in other projects that I have implemented the Editor MVC control.  Should I start a new post about this issue?

Thanks,

-Chris

[Alex Gyoshev]

Hi Chris,

Thank you for reporting this problem. The JavaScript error is easy to fix, but we encountered some problems with pasting HTML in IE. We are working on a bugfix -- I'll post more details when it is ready.

Regards,
Alex Gyoshev
the Telerik team

[Alex Gyoshev]

Hello Chris,

I am sorry that this took so long. There was some serious issue when pasting in specific HTML scenarios (such as the one from the sample project) -- invalid markup was generated and the pasted bits were not inserted at the correct location. After two days of debugging, we managed to work around it. Please find attached the updated version of the editor JavaScript. Also, please let us know if you happen to stumble upon other problems.

Kind regards,
Alex Gyoshev
the Telerik team

[Chris]

Thanks for the fix Alex!  You guys have been an awesome help.  Unfortunately, I'm now getting an exception throw from the jquery-1.4.2.min.js file:

htmlfile: Unexpected call to method or property access.

What version of jQuery are you guys testing against, and do I need to download the latest MVC Extensions SP to fix this?

Thanks,
-Chris

[Chris]

Also, is your code snippet supposed to resize the editable area down/smaller?  I have implemented the code and have gotten the control to successfully grow, but not shrink.  I have looked at the JavaScript source for the RadEditor, since that one autosizes down, and it seems there isn't anything missing in the code you provided

I also ran the IE Developer Tools and Firebug and have found that the code seems fine, it is just that the body tag doesn't shrink when text is removed, in IE (works fine in Firefox).  Is there some CSS on the editor elements that is causing this issue?

Let me know what's possible.  Thanks again for all the great work you provide.

-Chris

[Alex Gyoshev]

Hello Chris,

I upgraded the project to the latest internal build and could not reproduce the JavaScript error. The extensions are compatible with jQuery 1.4.2 -- perhaps this is yet another content-related issue? Can you give the attached solution a try; I tweaked the script a bit so that it allows shrinking under IE8 (and the code got cleaner in the process)

<script type="text/javascript">
    var editor, contentArea, contentWrap, initialHeight;

    function onSelectionChange(e) {
        if (!editor) {
            editor = $('#Editor');
            contentWrap = editor.find('.t-content');
            contentArea = contentWrap[0].contentWindow.document.body;
            initialHeight = contentWrap.height();
        }

        var lastChild = $(contentArea.lastChild, editor.document);
        var endHeight = lastChild.offset().top + lastChild.height() + 45;

        contentWrap.height(Math.max(initialHeight, endHeight));
    }
</script>

All the best,
Alex Gyoshev
the Telerik team

[Chris]

Ah very clever.  Worked like a charm!

Thanks,

-Chris

[Chris]

Hi Atanas,

I am now testing my application in IE9 with the autoresize sample code you provided above.  It worked flawlessly in IE8 and I tweaked it a little bit to bind to paste and keyup events.   In IE9, the resize is not occuring.  I did some debugging and found that the JS errors out on the lastChild.height() call.  I also noticed that offset().top returns 0, which is odd.

Can you reproduce this behavior?

Thanks,

-Chris Sinco

[Alex Gyoshev]

Hello Chris,

Indeed, the last child of the body in IE9 is a text node and jQuery does not work with such nodes. Here is the updated code sample that addresses the problem:

var $editor, contentArea, contentWrap, initialHeight;

function onSelectionChange(e) {
    if (!$editor) {
        $editor = $(this);
        contentWrap = $editor.find('.t-content');
        contentArea = contentWrap[0].contentWindow.document.body;
        initialHeight = contentWrap.height();
    }

    var lastChild = contentArea.lastChild;

    if (lastChild.nodeValue)
        lastChild = lastChild.previousSibling;

    var endHeight = lastChild.offsetTop + lastChild.offsetHeight + 45;

    contentWrap.height(Math.max(initialHeight, endHeight));
}

That said, please note that we do not support browsers in beta, so there may be other problems until IE9 is officially released.

Greetings,
Alex Gyoshev
the Telerik team

[Shane Milton]

It appears to us that this works only if you have a toolbar but does not account for a varying-sized toolbar. In our case, we completely remove all toolbar buttons.

[Alex Gyoshev]

Hello Shane,

I could not reproduce the issue. Which browser are you using? Which version of the components? I am attaching the sample solution that was used for testing.

All the best,
Alex Gyoshev
the Telerik team