Cannot select UL when there is only one LI with IE7 and IE8

[Xavier]

Hello,

We're using Telerik rich text control for Sharepoint, version 5.7.3.0.

We've created a custom CSS class to style the bullets of a unordered list. This class is to be applied on the UL tag.
To use this class, the customer uses the following steps:

1. Type or copy/paste the list of items
2. Select all and click on the unordered list button
3. Select the UL tag in the hierarchy (below the editor)
4. Apply the custom class

We've noticed that the 3rd step doesn't work in IE7 or IE8 when there is only one item in the list. Clicking on the UL link doesn't change the selection, which stays on the LI element. And since the UL tag cannot be selected, the custom class cannot be applied to it.
I've attached a picture showing the editor after I've clicked on the UL link. As you can see in the hierarchy, the LI tag is still selected.

The workaround we've found is to created second list item to be able to apply the class on the UL, and to remove it afterward. Although it's working fine, it is quite annoying, and the customer wants a content creation procedure as dummy-proof as possible.

An easy fix would be appreciated. Also, let me know if the problem has been fixed in a newer version.

Kind regards,
Xavier Stévenne

[Rumen]

Hello Xavier,

You can very easily select the UL element using the DOM Inspector module as shown in the following video: http://screencast.com/t/EudRTh5j. After that you will be able to apply the class to the UL through the Apply Class dropdown.

Best regards,
Rumen
the Telerik team

[Xavier]

What I call "the hierarchy" in my post is actually the DOM inspector.

The error is that when there is only one line in the list, clicking on UL doesn't select the UL, but keeps the LI selected. The CSS class is thus applied to the LI tag. This behavior can even be seen in your video.

As stated in my first post, we want the CSS class to be applied to the UL tag.

[Rumen]

Hi Xavier,

Please, excuse me for the omission. The provided solution works only in Firefox.

Nevertheless, you can apply the class to the parent UL element using the following code:

<script type="text/javascript">
    function OnClientCommandExecuting(editor, args) {
        //The command name
        var commandName = args.get_commandName();

        if (commandName == "ApplyClass" && $telerik.isIE) {
            var selElem = editor.getSelectedElement(); //get the selected element
            var parentElem = selElem.parentNode;
            if (selElem.tagName == "LI") //if the select elem is LI tag
            {
                editor.selectElement(parentElem); //select its parent before applying a class
            }
        }
    }
</script>
<telerik:RadEditor runat="server" ID="RadEditor1" OnClientCommandExecuting="OnClientCommandExecuting">
    <Content>
        <ul>
            <li>Item 1</li>
        </ul>

    </Content>
</telerik:RadEditor>

You can see how to attach to the OnClientCommandExecuting event of RadEditor for MOSS in the following KB article: How to execute custom code called on RadEditor's events.

Best regards,
Rumen
the Telerik team