Editor CustomDropDown - can I assign a css class to a specific custom drop down

[Angie]

I have a custom drop down in the Telerik Editor.  The ItemsPerRow is not working as all list items <li> are defaulting to full width.  I cannot change the css on my dynamic dropdown without changing also the font dropdown, format dropdown, etc.  How can I add a css class to the drop down in order to apply the CSS just to the custom dropdown?  Any style assigned to the button itself does not apply, as the dropdown code is separate:

I am adding the button dynamically.

I just need to add a display:inline to the list items on my custom drop down to get them to show multiple items per row.

Thanks!

[Vasko]

Hi Angie,

You can assign the custom CSS class to the specific button by attaching the "click" event handler to it and finding the specific div element that contains all the emoji. Here's a basic example of how to achieve this: 

// Creating the button server--side
EditorToolGroup main = new EditorToolGroup();
editor1.Tools.Add(main);

EditorSplitButton split = new EditorSplitButton("Emojis")
{
    Text = "Emojis",
};

split.Items.Add("Item1", "Value1");
split.Items.Add("Item2", "Value2");
split.Items.Add("Item3", "Value3");

main.Tools.Add(split);

<script>
    function pageLoadHandler() {
        var editor = $find("<%= editor1.ClientID %>"); // Get the Editor control
        var customButton = editor.getToolByName("Emojis"); // Find the button by its name
        var customButtonElement = customButton.get_element(); // Get the HTML element of the control

        customButtonElement.addEventListener("click", () => { // Add the click event handler 
            setTimeout(() => {
                $('.reDropDownBody ul li').each(function () { // Loop through every custom dropdown and if the check for specific text 
                    if ($(this).text() == 'Item1') {
                        var customDropDown = $(this).closest(".reDropDownBody") // Get the div parent element based on the if statement
                        customDropDown.addClass("myClass"); // Add the custom CSS class
                    }
                });
            }, 10)
        })
    }
    Sys.Application.add_load(pageLoadHandler);
</script>

<style>
    html body .reDropDownBody.myClass {
        background-color: red;  /* This is just for visualizastion, add the specific CSS rules you need  */
    }
</style>

Result:

Additionally, I suggest taking a look at the EditorButton Object article, relevant to the topic. 

I hope this helps you out.

Kind regards,
Vasko
Progress Telerik

[Angie]

Thank you Vasko!  I was able to get it to work with this answer!