Add update panel label to RadEditor status bar in UI for ASP.NET AJAX

This is a migrated thread and some comments may be shown as answers.

Add update panel label to RadEditor status bar

6 Answers 44 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Chuck asked on 16 Jan 2013, 08:27 AM

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?

6 Answers, 1 is accepted

answered on 16 Jan 2013, 02:32 PM

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.

answered on 16 Jan 2013, 04:51 PM

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?

Accepted

answered on 17 Jan 2013, 09:28 AM

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