Add update panel label to RadEditor status bar

7 posts, 1 answers
  1. Chuck
    Chuck avatar
    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?
  2. Rumen
    Admin
    Rumen avatar
    14100 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.
  3. Chuck
    Chuck avatar
    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?
  4. Chuck
    Chuck avatar
    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).
  5. Chuck
    Chuck avatar
    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)
  6. Answer
    Rumen
    Admin
    Rumen avatar
    14100 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.
  7. Chuck
    Chuck avatar
    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.
Back to Top