New to Kendo UI for jQuery? Download free 30-day trial

Display Editor Custom Tools as a Button Group


Product Progress® Kendo UI® Editor for jQuery
Operating System All
Browser All
Preferred Language JavaScript


How can I display several custom tools as a button group in the Editor?


  1. Set a template to the custom tool.
  2. Apply the following HTML structure and classes to the content of the template.
    <textarea id="editor" rows="10" cols="30" style="width:100%;height:400px">

    <script type="text/x-kendo-template" id="template1">
        <a tabindex="0" onclick="button1Click()" role="button" class="k-tool k-group-start" unselectable="on" title="Button1" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-icon k-i-cog"></span><span class="k-tool-text">Button1</span></a><a tabindex="0" onclick="button2Click()" role="button" class="k-tool" unselectable="on" title="Button2" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-icon k-i-wrench"></span><span class="k-tool-text">Button2</span></a><a tabindex="0" onclick="button3Click()" role="button" class="k-tool k-group-end" unselectable="on" title="Button3" aria-pressed="false"><span unselectable="on" class="k-tool-icon k-icon k-i-lock"></span><span class="k-tool-text">Button3</span></a>

            tools: [
                name: "customTemplate",
                template: $("#template1").html()

        function button1Click() {
            console.log("button1 clicked");

        function button2Click() {
            console.log("button2 clicked");

        function button3Click() {
            console.log("button3 clicked");
In this article