[Solved] custom image on header action button

[Eva]

I would like to use a custom image in the insert command button.  I have tried the following but it has no effect:

.ToolBar(cmd =>

{

cmd.Insert().ButtonType(

GridButtonType.Image).ImageHtmlAttributes(new { src="~/Content/Common/Images/Icons/add.png", width="24", height="24" });

})

Is there a way to do this?

Thanks!

[Dimo]

Hi Eva,

The "image" inside the button is actually not an image, but a <span> element.

<span class="t-icon "></span>

The idea is that you should apply a background image style to it, possibly from a sprite ( http://www.w3schools.com/css/css_image_sprites.asp ).

For example, if you take the following demo as a starting point:

http://demos.telerik.com/aspnet-mvc/grid/customcommand

and use:

Html.Telerik().Grid(Model)
     .Name("Grid")
     .ToolBar(commands => commands
         .Custom()
             .ButtonType(GridButtonType.Image)
             .ImageHtmlAttributes(new { @class = "t-icon t-refresh"})
             .Text("Text"))

You will see the result. We recommend using CSS classes and defining all required styles (size and background) externally.

All the best,
Dimo
the Telerik team