Kendo Grid custom action button icon

Question

OK, this is driving me nuts.

I have a Kendo UI grid control with a couple of custom toolbar items. The same toolbar also has some "built-in" commands (Export to Excel, Export to PDF)

All works as designed, but... the built-in commands render as buttons with icons on the left. For the life of me I cannot figure out what I need to do to get my custom toolbar items to have the same look and feel as the built-in commands, i.e., having a specified icon on the left of the text for the buttons.

Additionally, the custom buttons are rendering as anchor links, whereas the built-in commands render as buttons.

I don't want to replace the entire toolbar with a template (it's basically re-inventing the wheel for the built-in functions) but I want my custom commands to look and render like the built-in commands.

Is there a way of doing this? I've already spent way too much time on this thing that seems like it should be very simple.

What I have tried:

I have tried making the HtmlAttributes of the custom commands to have classes of various permutations of k-icon, k-plus, and k-refresh... unfortunately, as these render as anchors instead of buttons, the library does not render the icon in the contained span element.

It also seems that we cannot apply templates to individual commands, which is quite frustrating, so I cannot manually structure these commands to look similar to the built-in commands.

        .ToolBar(tb =>
            {
                tb.Custom().Action("Create", "Cycle").Text("Create New Cycle").HtmlAttributes(new {@class = "k-plus"});
                tb.Custom().Name("update-inventory").Text("Update Inventory").HtmlAttributes(
                    new {onclick = "onUpdateInventory()", title = "Update the system inventory from the OMS", @class="k-refresh"});
                tb.Excel();
                tb.Pdf();
            })

There has to be a simple solution to this... doesn't there?

Answer 1

I ran into the same problem a while back, from what I've gathered on the forums it seems template is the way to go. But you could use either the kendo menu or the kendo button widgets to make it look slick:

.ToolBar(toolbar =>
    {
        toolbar.Template(
            @<text>
            @*Menu*@
            <div>
                @(Html.Kendo().Menu().Name("Toolbar").Items(items =>
                {
                    items.Add().Text("Add").ImageUrl(Url.Content("image.png"));
                }))
            </div>

            @*or Button*@
            <div>
                @(Html.Kendo().Button()
                    .Name("iconButton")
                    .HtmlAttributes( new {type = "button"} )
                    .SpriteCssClass("k-icon k-i-ungroup")
                    .Content("Sprite icon"))
            </div>
            </text>);
    })