[Solved] Specifying button image

[Brian Roth]

I noticed that in the latest build we can set the grid buttons to show images instead of text.  Thanks!  For custom buttons, what would be the easiest way to define an image?  Can this be done in the View definition where the button is set up or would I need to use some jQuery logic to set the image?

As always, thanks for the help.

Regards,
Brian

[Alex Gyoshev]

Hello Brian,

You should add the icons through CSS, like this:

 View

.ToolBar(toolbar => {

    toolbar.Custom()

        .Text("Custom command")

        .HtmlAttributes(new { @class = "my-custom-command" })

        .ButtonType(GridButtonType.ImageAndText);

})

CSS

.my-custom-command .t-icon {
    background: transparent url('my-custom-icon.png') no-repeat 0 0;
}

All the best,
Alex Gyoshev
the Telerik team

[Brian Roth]

Perfect.  Thanks!

[Chris McNear]

I can't get this to work any help would be appreciated...

View :

columns.Command(commands => commands.Custom("ViewStory")
                                .Text("View Story")
                                .DataRouteValues(route => route.Add(story => story.StoryId).RouteKey("StoryId"))
                                .Ajax(true)
                                 .HtmlAttributes(new { @class = "viewDetailsCommand" })
                                .Action("DisplayStory", "Admin").ButtonType(GridButtonType.Image));

Style tag in same page....

<style type="text/css">
    .viewDetailsCommand.t-icon
    {
        background: transparent url('~/Content/mglass.jpg') no-repeat 0 0;
    }
</style>

but all I get is a blank box.  don't suppose there is a default "view" icon we can use instead?