[Solved] Is it possible to include an image into a custom button (not in a toolbar)?

[Max]

Hi all,

Is it possible to include an image into a custom button (not in a toolbar)?
Here is my code which is not working:

.my-audit-command .t-icon {
     background: transparent url('~/Content/Common/Icons/Mvc/TabStrip.png') no-repeat 0 0;
 }
 
columns.Command(commands =>
            {
                commands.Edit().ButtonType(buttonType);
                commands.Delete().ButtonType(buttonType);
                commands.Custom("viewDetails").Text("A").Action("_BlaBlaBla", "Controller")
                       .ButtonType(GridButtonType.Image)
                       .ImageHtmlAttributes(new { @class = "my-audit-command" });
            }).Width(150).Title("Commands");
        })

I was trying to follow Telerik suggestions from these posts:

http://www.telerik.com/community/forums/aspnet-mvc/grid/custom-image-on-header-action-button.aspx
http://www.telerik.com/community/forums/aspnet-mvc/grid/specifying-button-image.aspx

I guess I am missing some CSS knowledge. I read about sprites and it looks like you need to specify the width,height to pull that image?

Thank you
Max

[Max]

Anybody? :(

[Chris McNear]

I can't get it to work either.  I have set as follows 

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

and the grid...

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

[Dmitry]

Need the solution too :(

[Chris McNear]

I was able to get it to work. I have included the code below....

Note: I was successful when I moved the style that applies the image to the main sites stylesheet, it didn't seem to work using the style tags within the view.
Note I added the id attribute to these buttons and used the stylesheet to find and skin those id's instead of trying to go off class.

here is the view or at least the custom commands section

 commands.Custom("PrintStory").ButtonType(GridButtonType.Image)
         .DataRouteValues(routes => routes.Add(story => story.StoryId).RouteKey("StoryId"))
         .Action("ShowPrinterFriendlyStory", "Admin")
         .HtmlAttributes(new { @target = "_blank", id = "printStoryDetails" })
         .Text("Print Story");
commands.Custom("ViewStory")
	.Text(" View Story")
        .DataRouteValues(route => route.Add(story => story.StoryId).RouteKey("StoryId"))
        .Ajax(true)
        .HtmlAttributes(new { id = "viewStoryDetails" })
        .Action("DisplayStory", "Admin")
	.ButtonType(GridButtonType.Image);

The style tag is exactly as found elsewhere on the forums.


but here is mine from the css file.

#viewStoryDetails .t-icon
{
    background: transparent url('mglass2.jpg') no-repeat 0 0;
}

#printStoryDetails .t-icon {
    background: transparent url('printer.jpg') no-repeat 0 0;
}

Note my images are both in my Content folder which is colocated with my Site.css

[Georgi Tunev]

Hi,

Once you set the type of the button as an image button, you could use the following rule to control the button's image:

.t-icon.t-edit
{
    background-image: url("/Content/Vista/sprite.png");
    background-position: 0 -336px;
}

Regards,
Georgi Tunev
the Telerik team

[Walter]

If you want to use the edit button from your selected theme, try adding this to your custom button parameters:
                       

.ImageHtmlAttributes(new { @class = "t-edit" })

For denied icon:
                      

.ImageHtmlAttributes(new { @class = "t-denied" })

and so on.


Regards,
Walter