How can I enable a standard html Select as a custom tool in the Editor in Kendo for Asp.Net Core?

2 Answers 18 Views

Editor Toolbar

Paul asked on 31 Mar 2025, 07:48 PM

I'm trying to add a standard html Select element as a custom toolbar item in the Editor. I was able to make this work up through Kendo for Asp.Net Core version 2024.Q4. Now in version 2025.Q1 the Select does not respond to clicking. A click doesn't drop down the Select so the user can choose an Option item. I added an onclick event handler, and the click event is registering, but it does not open the Select. The documentation doesn't give any reason why this should not work. The Select element and its Options look fine in the page. Any suggestions?

        //Add a dropdown tool for inserting symbols.
        string selectTitle = "Select a symbol to insert";
        //Standard html select.
        //Cannot find a way to use an html Select in Kendo 2025Q1. This worked in Kendo 2024.Q4,
        // after removing the 'ref-toolbar-tool' attribute from the div preceding the Select.
        string toolNameSelect = $"insertSymbol-{EditorIdClean}";
        string dropdownNameSelect = $"symbolSelect_{EditorIdClean}";
        string symbolSelect = $"<label for='{dropdownNameSelect}' class='visually-hidden'>Symbol:</label>" +
            $"<select id='{dropdownNameSelect}' " +
            $"title='{selectTitle}' " +
            $"aria-label='{selectTitle}' " +
            "style='width:150px' " +
            "onclick='testSymbolSelect(this)' " + //The click event is registered * the alert appears.
            "onchange='InsertSymbolSelect(this)' " +
            ">" +
            $"{symbolHtmlSelectOptions()}" +
            $"</select>";
        toolFactories.Add(tools => tools
            .CustomTemplate(x => x
                .Name(toolNameSelect)
                .Tooltip(selectTitle)
                .Template(symbolSelect)
            ));

2 Answers, 1 is accepted

answered on 01 Apr 2025, 07:24 PM

I was able to get the sample from the documentation working: https://www.telerik.com/aspnet-core-ui/documentation/html-helpers/editors/editor/tools#using-kendo-template

It's hard to pinpoint what's wrong with your code snippet. The issue might be related to the JavaScript functions associated with the <select> element. Are there any errors in your browser’s console?

Also, try integrating the code sample from the documentation directly into your page to see if it works as expected:

    @(Html.Kendo().Editor()
        .Name("editor")
        .Tools(t => t
            .CustomTemplate(x => x
                .Name("customDropDownList")
                .Template("<label for='templateTool' style='vertical-align:middle;'>Background:</label>" +
                    "<select id='templateTool'>" +
                        "<option value=''>none</option>" +
                        "<option value='\\#ff9'>yellow</option>" +
                        "<option value='\\#dfd'>green</option>"+
                    "</select>")
            )
        )
    )

    <script>
        $(document).ready(function () {
            $("#templateTool").kendoDropDownList({
                change: function (e) {
                    var editor = $("#editor").data("kendoEditor")
                    editor.body.style.backgroundColor = e.sender.value();
                }
            });
        });
    </script>

Regards,
Anislav Atanasov

Paul

commented on 01 Apr 2025, 07:51 PM

Thanks Anislav. I think your code works because it builds a kendo DropDownList from the html Select. The Kendo DropDownList worked for me too.

I had added a followup note but it didn't seem to make it onto the same support request. It looks like it's there on my support page. Here is what I found: I got this to work by adding a click event handler for the html Select tool. The event handler stops the event propagation and displays the dropdown. It would be helpful if the documentation indicated this necessity. I don't know for sure, but I'm guessing the click event bubbled up to a kendo event handler, which suppressed the event. I tried reading through the kendo source code, but I couldn't get a clear picture of the event flow. If it helps identify the issue, in the 2024.Q4 library I was able to make the html Select work correctly by removing the 'ref-toolbar-tool' attribute from the kendo-generated <div> containing the Select. That no longer worked in 2025.Q1.

$(function () {
    //Avoid 'feature' in Kendo 2025.Q1 that prevents the symbol tool from opening.
    const selectElements = $('select.insert-symbol');
    $(selectElements).each(function (index) {
        this.addEventListener("click", clickHandlerSymbolSelect);
        this.addEventListener("change", InsertSymbolSelect);
    });
})

function clickHandlerSymbolSelect(e) {
    e.stopPropagation(); //Prevent event bubbling, so Kendo cannot swallow or cancel the event.
    const sendingElement = e.target;
    sendingElement.showPicker();
    return true;
}

Anislav

commented on 01 Apr 2025, 08:18 PM

You are right that when a DropDownList is NOT built in the script section, the select element doesn't work as expected. The workaround you're trying to apply is quite complex. Is there a particular reason you're not using the DropDownList directly? From my perspective, the DropDownList feels more integrated and native within the tools area of the editor.

Regards,
Anislav Atanasov

Paul

commented on 01 Apr 2025, 08:26 PM

I group the <option> items in the html Select. The only samples of grouping for the DropDownList use a data source with a transport that fetches data from a url. I couldn't find a way to group existing static data as the source. Other documentation and samples show binding the DropDownList to a List<SelectListItem>, which works except it ignores the grouping. The standard Select is simpler, in my view, I like the grouped appearance better than the default group appearance in the DropDownList, and I don't need any of the enhanced features in the DropDownList.