Editor custom button class name missing

[Jared]

Hi, I just updated from 2022.3.1109 to 2024.3.806 and noticed that the CustomButton method for editor tools no longer creates a class with the provided name. We previously used this as a way add custom images as button icons. It was also the only way to have a unique identifier for the button, which is it's own separate issue. I didn't see anything in the release notes about this functionality being removed so I'm wondering if this is a bug or if we are supposed to use some new method of adding custom button icons. I see there is an Icon method available but it seems to be for using existing telerik icons and I don't see any way to add our own.

This answer in this older question shows two methods, of which we were doing the latter:

https://www.telerik.com/forums/how-to-add-a-customized-button-or-image-button-to-editor-tools

I understand we could probably switch to using CustomTemplate instead, but that seems like added maintenance whenever the default kendo classes or styling changes since we want it to match the appearance of the built-in kendo buttons.

[Mihaela]

Hello Jared,

As of the R1 2023 release, there are breaking changes related to the Toolbar component- its tools are now actual components instances instead of ToolBar items. As a result, the specified button's name is no longer available as a class.

Currently, there is a logged feature request in our Public Feedback Portal to include the "name" of the custom tool in the button's class:

https://feedback.telerik.com/aspnet-mvc/1614461-add-the-name-of-the-custom-tool-in-the-button-s-class

Feel free to cast your vote as the more popularity the item gathers, the higher the chance of it being implemented.

While the requested functionality is available, I would suggest defining the custom tools by using any of the following approaches:

• Create a custom button by using the Template component and set the desired custom image with CSS:

        .CustomTemplate(x => x.Name("ViewAll").Template(
            Html.Kendo().Template()
                .AddComponent(c => c.Button()
                    .Name("myButton")
                    .Icon(" ")
                )
            ))

<style>
    .k-editor #myButton .k-icon {
        background: url('custom icon/image URL');
    }
</style>

• Use the "title" attribute to select the custom button and apply the desired icon:

.CustomButton(x => x.Name("ViewAll").ToolTip("View All Contents"))

<style>
    .k-editor .k-button[title='View All Contents'] .k-icon {
        background: url(icon/image URL);
    }
</style>

<script>
    $(".k-editor .k-button[title='View All Contents'] .k-icon").html(""); // Remove the default SVG icon
</script>

Hopefully any of these examples will work for you.

If any questions arise, you are more than welcome to let me know.

Regards,
Mihaela
Progress Telerik

[Jared]

Thank you for the response. I was not aware of the Template/Component/Button combination, it seems to be the replacement I was looking for, though it needs a little extra work to do the same things.

For anyone else coming to this question for the same reason. Here is what I ended up doing to achieve the same functionality as before with the new method without having to change javascript or css elsewhere in our solution:

tools.CustomTemplate(x => x.Name("ViewAll")
.Template(Html.Kendo().Template()
.AddComponent(c => c.Button().HtmlAttributes(new
                {
                    title = "View All Contents",
                    @class = "k-toolbar-tool",
                    onclick = $"ViewAllContents.call(document.getElementById('{Model.EditorID}'))"
                }).Name("ViewAll").SpriteCssClass("k-i-View-all"))));

Note the @class ="k-toolbar-tool" on the HtmlAttributes of the button itself. This was necessary to maintain keyboard navigation for the custom button.

I also needed to add an onclick event to mimic the previous Exec() method because the old method used the editor itself as the context for the javascript handler. We were using this context to access the editor in the handler. The .Click() method available from the Button() template does not use the editor as the context.

I used SpriteCssClass() to add the old class back to the span as a child to the button. This served two purposes. The first was to avoid having to change css or javascript that referenced the previous class name (we have javascript logic to hide or show certain buttons and that class name was previously the only unique identifier, outside of the title, which was more likely to change in the future and I didn't want other developers to have to know or remember that changing the tooltip text will break the button functionality). The second was to make sure the image was sized and positioned correctly, as putting this class on the button itself made the button too large, since the source image is larger than the button should be.

My css for the span child of the button. I did not check to see if all of this was still necessary, but the image displays correctly with this css as is. I will note that, previously, I had to add a ::before with "content: none" to avoid some spacing or alignment issue I think. That seems to be no longer necessary.

.k-editor .k-i-View-all {
    background-image: url("../../Images/popup.png");
    background-repeat: no-repeat;
    background-size: 100%;
}

/*
    .k-editor .k-i-View-all::before {
        content: none !important;
    }

*/

[Mihaela]

Hey Jared,

Thank you for sharing your solution from top to bottom. It is greatly appreciated!

Best,
Mihaela