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?

Solution 1

OK, I figured out how to make it look right, but there has to be a better way to do this.

First, some observations.

1) The "Name" method for a custom action seems to not do anything. At all. It does not create an ID property for the element, like it does for just about every other Kendo widget, so I had to add the id into the HtmlAttributes method.

2) The k-plus and k-refresh point to the wrong positions on the sprite sheet. Well, the k-plus points to the wrong position; k-refresh, while documented, does not seem to exist in Kendo styling. I was able to fix this by adding my own positioning for the icons:

.k-icon-plus {
    background-position: -48px -64px;
}

.k-icon-refresh{
    background-position:-48px -112px;
}

Now, interestingly, the custom command buttons, while rendering as anchor elements instead of button elements like the built-ins, still render an empty span element inside of them like the built-ins, as (presumably) a placeholder for an icon. Of course, it's not accessible in the configuration wrapper for MVC, so some jQuery magic needs to be employed.

First, I created an event to fire when the grid bound to data in my MVC wrapper like so:

.Events(e => e.DataBound("onDataBound"))

Next, I modified the HtmlAttributes for my custom commands like so:

tb.Custom().Action("Create", "Cycle")
    .Text("Create New Cycle").HtmlAttributes(new{id="create-cycle"});
tb.Custom().Text("Update Inventory").HtmlAttributes(
    new { onclick = "onUpdateInventory()", title = "Update the system inventory from the OMS", id="update-inventory" });

Then, I wired this up in the JavaScript function I referenced:

function onDataBound() {
    $('#create-cycle span').addClass('k-icon k-icon-plus');
    $('#update-inventory span').addClass('k-icon k-icon-refresh');
}

Now... this works. But it sucks. It's still an anchor element and not a button element, and the next release of kendo could completely break this. I would dearly love for someone to show me how I just had to do something really simple instead of this ridiculous workaround.

Please please PLEASE somebody tell me this is not the right way to do this.

Solution 2

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>);
    })

Comments

[Chris Haines]

Do you have any forum references? What about mixing built-in commands (e.g. Pdf, Excel) with custom ones?