Enable multiple CSS Class selection

2 posts, 0 answers
  1. Raphael
    Raphael avatar
    4 posts
    Member since:
    Nov 2010

    Posted 25 Aug 2011 Link to this post


    RadControls version


    .NET version


    Visual Studio version


    programming language


    browser support

    all browsers supported by RadControls

    PROJECT DESCRIPTION                                    
    We added a custom tool to radeditor that allows multiple CSS class assignment. Find below the code and feel free to include it in your editor. Hopefully, the Telerik team will add this possibility in a future version of the RadEditor :)

    First, add an entry to the xml File with your toolbar configuration:
    <tool name="CSSExtender" />

    Add following JavaScript to your page:
    /*************** CSS Chooser ******************/
    Telerik.Web.UI.Editor.CommandList["CSSExtender"] = function(commandName, editor, args) {
            arguments = new Object();
            arguments.elem = editor.getSelectedElement();
            var CssArray = editor.getCssArray();
            var Classes = new Array();
            arguments.classes = Classes;
            var myCallbackFunction = function (sender, args) {
                var CssClasses = args;
            if($(arguments.elem).get(0).tagName != "BODY")
                'CSS Class Chooser',
                Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                alert("Please select an element first.");

    Note that you have to include jQuery to your page.

    Create a file "CSSExtender.aspx", adapt the path to this file in the previous JavaScript file and insert following code:
    <%@ Page Language="C#" AutoEventWireup="true" EnableViewState="false" %>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <style type="text/css">
            font-family: arial, helvetica, sans-serif;
            font-size: 11px;
            font-size: 14px;
            margin-bottom: 1em;
        #AvailableClasses, #CssClasses { width:200px; }
        #btnAddClass, #btnClearClasses { margin:0; padding:0; }
    <h1>CSS Extender - Tag: <<span id="CurrentTag"></span>></h1>
    <br />
    <select name="AvailableClasses" id="AvailableClasses" size="10" multiple="multiple"></select> <input type="image" src="/admin/ControlPanel/images/iconbar_addmodule.gif" id="btnAddClass" /><br />
    <input name="CssClasses" type="input" id="CssClasses" value=""> <input type="image" src="/images/delete.gif" id="btnClearClasses" /><br />
    <input type="button" onclick="javascript:insertLink();" value="Save" />
    <input type="button" onclick="javascript:cancel();" value="Cancel" />
    <script type="text/javascript">
        if (window.attachEvent) {
            window.attachEvent("onload", initDialog);
        else if (window.addEventListener) {
            window.addEventListener("load", initDialog, false);
        var btn = null;
        function getRadWindow() {
            if (window.radWindow) {
                return window.radWindow;
            if (window.frameElement && window.frameElement.radWindow) {
                return window.frameElement.radWindow;
            return null;
        function initDialog() {
            arguments = getRadWindow().ClientParameters; //return the arguments supplied from the parent page
                var Option = "<option>" + e + "</option>";
            $("#btnAddClass").click(function() { $("#AvailableClasses option:selected").each(function() { $("#CssClasses").val($("#CssClasses").val() + " " + $(this).val()); }) });
            $("#btnClearClasses").click(function() { $("#CssClasses").val(""); });
        function insertLink() //fires when the Insert Link button is clicked
            btn = $("#CssClasses").val();
            getRadWindow().close(btn); //use the close function of the getRadWindow to close the dialog and pass the arguments from the dialog to the callback function on the main page.
        function cancel() {

    Note again, this is a dirty solution. But if you require a multiple CSS class selector, you can use this. If you have suggestions to improve it, feel free to comment.
  2. Rumen
    Rumen avatar
    12788 posts

    Posted 30 Aug 2011 Link to this post

    Hello Raphael,

    Thank you for your contribution to Telerik community!

    Your example is useful and I awarded your with 4000 Telerik points.

    Best regards,
    the Telerik team

    Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

Back to Top