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

Apply CSS class to a list with a single element

3 Answers 58 Views
Editor
This is a migrated thread and some comments may be shown as answers.
Ivan
Top achievements
Rank 1
Ivan asked on 16 Oct 2012, 11:55 AM
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?

3 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
answered on 16 Oct 2012, 12:08 PM
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.
0
Ivan
Top achievements
Rank 1
answered on 16 Oct 2012, 12:54 PM
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?
0
Rumen
Telerik team
answered on 16 Oct 2012, 01:01 PM
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.
Tags
Editor
Asked by
Ivan
Top achievements
Rank 1
Answers by
Rumen
Telerik team
Ivan
Top achievements
Rank 1
Share this question
or