Enable multiple CSS Class selection

Thread is closed for posting
6 posts, 0 answers
  1. Raphael
    Raphael avatar
    4 posts
    Member since:
    Nov 2010

    Posted 25 Aug 2011 Link to this post

    Requirements

    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();
            $(CssArray).each(function(i,e)
            {
                Classes.push(e[0]);
            });
             
            arguments.classes = Classes;
             
            var myCallbackFunction = function (sender, args) {
                var CssClasses = args;
                $(editor.getSelectedElement()).removeClass();
                $(editor.getSelectedElement()).addClass(CssClasses);
            }
             
            if($(arguments.elem).get(0).tagName != "BODY")
            {
            editor.showExternalDialog(
                '/Providers/HtmlEditorProviders/ToFlexWYSIWYGProvider09/Toolbars/CssExtender.aspx',
                arguments,
                280,
                310,
                myCallbackFunction,
                null,
                'CSS Class Chooser',
                true,
                Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                false,
                false);
            }
            else
            {
                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">
        body
        {
            font-family: arial, helvetica, sans-serif;
            font-size: 11px;
        }
        h1
        {
            font-size: 14px;
            margin-bottom: 1em;
        }
         
        #AvailableClasses, #CssClasses { width:200px; }
        #btnAddClass, #btnClearClasses { margin:0; padding:0; }
    </style>
    <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
            $("#CurrentTag").text($(arguments.elem).get(0).tagName);
            $("#CssClasses").val($(arguments.elem).attr("class"));
             
            $(arguments.classes).each(function(i,e)
            {
                var Option = "<option>" + e + "</option>";
                $("#AvailableClasses").append(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() {
            getRadWindow().close();
        }
    </script>

    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
    Admin
    Rumen avatar
    14477 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,
    Rumen
    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 >>

  3. Fit2Page
    Fit2Page avatar
    468 posts
    Member since:
    Feb 2007

    Posted 09 Mar in reply to Rumen Link to this post

    Hi Rumen,

     

    This is kind of old but I guess you tested this multiple class application. Do you have any clue why this is not longer working?

    I try to implement but to no avail. It seems that the classes are no longer passed this way from the parent page.

    Can you help?

     

    Regards,

    Marc

  4. Rumen
    Admin
    Rumen avatar
    14477 posts

    Posted 09 Mar Link to this post

    Hi Marc,

    The solution is based on the following demo - https://demos.telerik.com/aspnet-ajax/editor/examples/customdialogs/defaultcs.aspx and my test shows that it works properly with the latest version - http://youtu.be/n85QOPE4BBg?hd=1. You just need to import jQuery or use the built-in one in Telerik with $telerik.$.

    For your convenience, I have attached my test files.

     

    Regards,
    Rumen
    Progress Telerik

    Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

  5. Fit2Page
    Fit2Page avatar
    468 posts
    Member since:
    Feb 2007

    Posted 10 Mar in reply to Rumen Link to this post

    Hi Rumen, Thanks works now...the problem was the missing JQuery.

     

    Regards,

    Marc

  6. Rumen
    Admin
    Rumen avatar
    14477 posts

    Posted 10 Mar Link to this post

    You are welcome, Marc! Glad to hear that everything is fine now!

     

    Regards,
    Rumen
    Progress Telerik

    Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.