Telerik Forums / UI for ASP.NET AJAX Forum / Editor /

Add update panel label to RadEditor status bar

Telerik UI for ASP.NET AJAX
Resources Buy Try

7 posts, 1 answers

Chuck

9 posts

Member since:
Jan 2013
Posted 16 Jan 2013 Link to this post

I have code that shows a Modified label when there have been changes to the editor and it works great, except when the editor is in full-screen mode and then the label cannot be seen.

I'd like to add the update panel (with the modified label) to the status bar - the area (div class="reModule" span) that contains the text "Words: 0 Characters: 0".

I've tried moving the update panel with the following code, but it doesn't work even though it finds the controls. In IE, the update panel no longer is visible and in Chrome, it apparently has no effect.

var reModuleDivs = document.getElementsByClassName("reModule");
var reModuleDiv = reModuleDivs[0];
var notesEditorUpdatePanel = document.getElementById("<%= notesEditorUpdatePanel.ClientID %>");
reModuleDiv.appendChild(notesEditorUpdatePanel);

Is there any simpler method to go about adding an update panel / label to the bar that contains the status text?
Rumen
Admin

14320 posts

Posted 16 Jan 2013 Link to this post

Hello,

Here is an example how to prepend a div element to the Statistics module:

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

</telerik:RadEditor>

<script>

    function OnClientLoad(editor) {

        var $ = $telerik.$;

        var label = document.createElement("span");

        $(label).html("test label");

        $(label).css({"border":"2px solid blue", "backgroundColor": "yellow", "height": "10px"});



        var module = $telerik.$(".reModule")[0];

        $(module).css("border", "1px solid red");

        $(module).prepend(label);

    }

</script>

All the best,
Rumen
the Telerik team

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 their blog feed now.
Chuck

9 posts

Member since:
Jan 2013

Posted 16 Jan 2013 Link to this post

Thank you - that works for IE, but not for Google Chrome, Firefox or Safari. To make it cross-browser supported I used the following.

To get it to work with Google Chrome, Firefox & Safari I used a callback to load the Jquery after Jquery has loaded with this snippet I found:

// ==UserScript==

// @name         jQuery For Chrome (A Cross Browser Example)

// @namespace    jQueryForChromeExample

// @include      *

// @author       Erik Vergobbi Vold & Tyler G. Hicks-Wright

// @description This userscript is meant to be an example on how to use jQuery in a userscript on Google Chrome.

// ==/UserScript==

// a function that loads jQuery and calls a callback function when jQuery has finished loading

function addJQuery(callback)

{

    var script = document.createElement("script");

    script.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js");

    script.addEventListener('load', function ()

    {

        var script = document.createElement("script");

        script.textContent = "window.jQ=jQuery.noConflict(true);(" + callback.toString() + ")();";

        document.body.appendChild(script);

    }, false);

    document.body.appendChild(script);

}

// the guts of this userscript

function main()

{

    // Note, jQ replaces $ to avoid conflicts.

    var $ = $telerik.$;

    var label = document.createElement("span");

    $(label).html("test label");

    $(label).css({ "border": "2px solid blue", "backgroundColor": "yellow", "height": "10px" });

    var module = $telerik.$(".reModule")[0];

    $(module).css("border", "1px solid red");

    $(module).prepend(label);

}

// load jQuery and execute the main function

addJQuery(main);

Anyone test this with Opera or other browsers?
Chuck

9 posts

Member since:
Jan 2013

Posted 16 Jan 2013 Link to this post

There is still a problem with this approach, for the reModule appears to be redrawn with each "render" of the editor, though the red border stays in place, the label disappears.

As soon as I click in the editor, the label disappears. This is true even with just the original post made by Rumen (I'd created a new web-site to test with, and I went back to test on it).
Chuck

9 posts

Member since:
Jan 2013

Posted 16 Jan 2013 Link to this post

This also breaks the RadDock grip ability for Google Chrome (and possibly others)
Answer
Rumen
Admin

14320 posts

Posted 17 Jan 2013 Link to this post

Hi,

Here is a cross browser implementation without using jquery. It overrides the doCount function of the Statistics module and adds another span element in it for your custom purposes:

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

</telerik:RadEditor>

<script>

    Telerik.Web.UI.Editor.Modules.RadEditorStatistics.prototype.doCount = function () {

        if (!this.get_visible()) return;

        var content = this.get_editor().get_text();

        var words = 0;

        var chars = 0;

        if (content) {

            var punctRegX = /[!\.?;,:&_\-\–\{\}\[\]~#'"]/g;

            content = content.replace(punctRegX, "");

            var trimRegX = /(^\s+)|(\s+$)/g;

            content = content.replace(trimRegX, "");

            if (content) {

                var splitRegX = /\s+/;

                var array = content.split(splitRegX);

                words = array.length;

                var newLines = /(\r\n)+/g;

                content = content.replace(newLines, "");

                chars = content.length;

            }

        }

        var elem = this.get_element();

        elem.innerHTML = "<span style='border: 1px solid green;'>custom label</span>"; // adds a custom label

        elem.innerHTML += "<span style='line-height:22px'>" + this._wordsString + " " + words + " " + this._charactersString + " " + chars + " </span>";

    }

</script>

Greetings,
Rumen
the Telerik team

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 their blog feed now.
Chuck

9 posts

Member since:
Jan 2013

Posted 20 Jan 2013 Link to this post

Thank you, that was basically the answer I needed. There were a couple caveats that needed adjusting. Each time there was an update to the status it would reprint 'custom label', so I added a javascript variable that I would write to so that it would have the correct label. Here's my span with an id and class added.

elem.innerHTML = "<span id='editorSavedLabel' class='edSavedStatus'>" + savedStatus + "</span>";

I tested it on IE, Chrome, Firefox and Safari - It works on each. Thanks again.

Add update panel label to RadEditor status bar

Chuck

Rumen

Chuck

Chuck

Chuck

Rumen

Chuck