Apply CSS class to a list with a single element

4 posts, 0 answers
  1. Ivan
    Ivan avatar
    16 posts
    Member since:
    Oct 2011

    Posted 16 Oct 2012 Link to this post

    Hello,

    I have the following scenario:

    1. insert the following html into the editor:
    <ul>
     <li>test</li>
    </ul>
    2. switch to design view and try to apply any CSS class to the UL element

    Result:
    CSS is applied to li element

    It works fine if list contains several elements and you apply CSS to all of them.

    How this can be fixed?
  2. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 16 Oct 2012 Link to this post

    Hello,

    You can try the following solution:
    <script type="text/javascript">
        function OnClientCommandExecuting(editor, args) {
            var commandName = args.get_commandName();
            if (commandName == "ApplyClass" && $telerik.isIE) {
                var selElem = editor.getSelectedElement(); //get the selected element
                if (!selElem.previousSibling) return;
                if (selElem.previousSibling.tagName == "OL" || selElem.previousSibling.tagName == "UL") {
                    editor.selectElement(selElem);
                    selElem.className = args.get_value();
                    args.set_cancel(true);
                }
            }
        
    </script>
     
    <telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
         <Content> 
             <ul>
                 <li>List 1</li>
             </ul>
        </Content>
    </telerik:RadEditor>


    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. Ivan
    Ivan avatar
    16 posts
    Member since:
    Oct 2011

    Posted 16 Oct 2012 Link to this post

    Hello,

    The solution does not work (no changes), however if I modify the code like follows it seems to be working:
    function OnClientCommandExecuting(editor, args) {
            var commandName = args.get_commandName();
            if (commandName == "ApplyClass" && $telerik.isIE) {
                var selElem = editor.getSelectedElement(); //get the selected element
                if (!selElem.parentElement) return;
                if (selElem.parentElement.tagName == "OL" || selElem.parentElement.tagName == "UL") {
                    selElem =selElem.parentElement;
                    editor.selectElement(selElem);
                    selElem.className = args.get_value();
                    args.set_cancel(true);
                }
            }
        }
    Is this right way to do it?
  4. Rumen
    Admin
    Rumen avatar
    14459 posts

    Posted 16 Oct 2012 Link to this post

    Hi,

    Yes, your code update is fine and you can use it.

    Best regards,
    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.
Back to Top