Is it possible to place form controls, eg Signature control, tick boxes,etc.. in RadImageEditor?

https://www.telerik.com/forums/create-signature-with-imageeditor

Alan

We suspect a bug of Telerik controls:

Bug of Telerik: PageView.set_contentUrl(MyUrl) method - call MyUrl twice if RadTabStrip and RadMultiPage is inside RadAjaxPanel control. Firefox only.

Code: http://bit.ly/2NVbm8Z

It enter here two times: http://bit.ly/2NZ0cQH

If try it in chrome - request goes only one time.

If remove RadAjaxPanel - also request goes only one time.

Is it bug of your Controls?

Hi

Here is what I am trying to achieve is to make the text fill the mask from the right rather than from the left.

If my mask is #(###)###-#### and my Prompt Char is _, Then this is what I expect to happen 

If I enter 11 digit number I expect to show (1)(222)-333-4444. If I enter 10 digit number I expect to show _(222)-333-4444.

The API for the Masked Text Box control has NumericRangeAlign property that should allow this to happen but setting this property value to RIGHT or LEFT has NO visible effect.

Currently, the RadScheduler does not have WAI-ARIA support: 

• https://docs.telerik.com/devtools/aspnet-ajax/controls/wai-aria-support-and-screen-readers;

Hover over the command arrows on the radScheduler when the view is set to month view.  The Tooltip will display "next day" and "previous day" instead of "next month" and "previous month".

The same happens for week view.

Temporary workaround: 

<telerik:RadCodeBlock runat="server">
    <script>
        function pageLoadHandler() {
            var scheduler = $find("<%= RadScheduler1.ClientID %>");
            var $scheduler = $telerik.$(scheduler.get_element());
            var viewType = "Day";
            if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.WeekView) {
                viewType = "Week";
            } else if (scheduler.get_selectedView() == Telerik.Web.UI.SchedulerViewType.MonthView) {
                viewType = "Month";
            }

            $scheduler.find(".rsPrevDay").attr("title", "Previous " + viewType)
            $scheduler.find(".rsNextDay").attr("title", "Next " + viewType)

            // Sys.Application.remove_load(pageLoadHandler);  
        }
        Sys.Application.add_load(pageLoadHandler);
    </script>
</telerik:RadCodeBlock>

The underlying Kendo Linear Kendo stopped rendering the track in 2014.3.1314 and, respectively, so does RadLinearGauge as of 2015.1.225

For example, the following snippet should render a wide, green, semi-transparent track, but it does not

			<telerik:RadLinearGauge ID="gauge" runat="server" Height="280">
				<Pointer Value="20">
					<Track Color="#5ca038" Opacity="0.5" Size="30" />
				</Pointer>
			</telerik:RadLinearGauge>

Ref. attached Image its show horizontal scrolling round with red color.

In business application more number of groups and menu item at that time horizontal scrolling very usefull as shown in the attached image

The problem appears to be related to the image and table resizing feature (introduced in Q3 2013), implemented for the Chrome browser. When the content has a large amount of nested tables with images, selecting an image is causing a slow operation and even an unexpected crash of the browser. 

With this example code you can disable the feature and resolve the performance issue:

<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>
<script type="text/javascript">
	Telerik.Web.UI.RadEditor.prototype._initializeResizableWidget =
		function myfunction() { };
</script>

Note that this line of code will disable the image/table resizing only for Chrome. Under Firefox and IE this feature is provided by the browser and will still be available.

When you resize the RadEditor beyond the boundaries of the browser's viewport, absolute positioning will be applied to the control, which could result in problems with the layout in certain cases.

You can use the following workaround to fix the positioning of the editor until the problem is resolved. Just add the script below at the end of your page:

<script type="text/javascript">
                var onResizeStart = Telerik.Web.UI.RadEditor.prototype.onResizeStart;
                Telerik.Web.UI.RadEditor.prototype.onResizeStart = function() {
                                var editorWrapper = this.get_element();
                                this.resizeStartPosition = {
                                                position: editorWrapper.style.position,
                                                top: editorWrapper.style.top,
                                                left: editorWrapper.style.left
                                };
                                onResizeStart.call(this);
                }

                var onResizeEnd = Telerik.Web.UI.RadEditor.prototype.onResizeEnd;
                Telerik.Web.UI.RadEditor.prototype.onResizeEnd = function() {
                                var editorWrapper = this.get_element();
                                if (this.resizeStartPosition && this.resizeStartPosition.position != editorWrapper.style.position) {                                             
                                                $telerik.$(editorWrapper).css({
                                                                position: this.resizeStartPosition.position,
                                                                top: this.resizeStartPosition.top,
                                                                left: this.resizeStartPosition.left
                                                });
                                }
                                onResizeEnd.call(this);
                }
</script>

When the content area mode is a Div element, every ajax post back is causing a flickering of the content.

When an Image or a Table elements are being inserted into the content of the editor, the undo command should revert the insertion.

When you copy a table from MS Excel and you paste it in the RadEditor under Chrome, an image that depicts the copied table will be inserted in the content area of the control along with the table.

You can use the following workaround to avoid inserting an image with the table:

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

        <script type="text/javascript">
            var getImages = Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.getImages;
            Telerik.Web.UI.Editor.ClipboardImagesProvider.prototype.getImages = function (event) {
                var images = getImages.call(this, event);
                debugger;
                if (event.clipboardData && images.length && event.clipboardData.getData("text/html")) {

                    return [];
                }

                return images;
            };
        </script>

Inserting a table is causing the user to switch to HTML mode and insert manually a br element, so that he could start typing in the next line.

Possible solution is attaching this Client-side method on the OnClientCommandExecuted event of the RadEditor control:

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


<script type="text/javascript">
    function OnClientCommandExecuted(editor, args) {
        var command = args.get_commandName();
        if (command = "InsertTable") {
            var selection = editor.getSelection();
            var range = selection.getRange();
            if (range.pasteHTML) {
                range.pasteHTML("<br />");
            }
            else {
                editor.pasteHtml("<br/>");
            }
        }
    }
</script>

The following workaround entirely changes the behavior by modifying the selection and selects the first TD

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

<script type="text/javascript">
    var identifierID = "RadEditor_AfterTable";

    function OnClientPasteHtml(editor, args) {
        var commandName = args.get_commandName();

        if (commandName === "InsertTable" || commandName === "TableWizard" ) {
            var currValue = args.get_value();
            currValue = currValue.replace(/<\/table>/gi, "</table><div id=" + identifierID + ">&#x200B;</div>");
            //currValue = currValue + "<div id=" + identifierID + ">&#x200B;</div>";
            
            args.set_value(currValue);
            setTimeout(function () {
                selectFirstTD(editor)
            }, 0);
        }
    }

    function selectFirstTD(editor) {
        var $ = $telerik.$;
        var contBody = editor.get_contentArea();
        var identifier = $(contBody).find("#" + identifierID);
        var table = identifier.prev();
        var elmToSelect = table.find("th")[0] || table.find("td")[0];

        if (elmToSelect.childNodes && !$telerik.isIE) {
            elmToSelect = elmToSelect.childNodes[0].nodeName === "#text" && elmToSelect.childNodes[0];
        }

        var hasNextElement = identifier.next()[0];
        
        while (hasNextElement && $(hasNextElement).is("style")) {
            hasNextElement = $(hasNextElement).next()[0];
        }
        
        editor.selectElement(elmToSelect);

        if (!hasNextElement) {
            table.after("<br/>");
        }

        identifier.remove();
    }
</script>

The main issue is the inconsistent behavior of the borders around the content area.