We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on : Nov 16th 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Add image to grid command button

Thread ID:

Created:

Updated:

Platform:

Replies:

123727 Apr 14,2016 02:48 PM UTC Apr 15,2016 10:02 AM UTC ASP.NET MVC 1
loading
Tags: Grid
Eric Outley
Asked On April 14, 2016 02:48 PM UTC

I'm working with the MVC Grid and adding command buttons to my grid.  However, I can't seem to find a way to add my own image to the button.  I tried to use the CssClass property on the ButtonOpions, but it is not work.  See code snippet below.


CSS
.users_Icon{
    background-image: url("../Content/icons/icon_user_16px.gif")
}

Command Button
cmd.Type("Users").ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() { ContentType = ContentType.ImageOnly, Width = "25px", ShowRoundedCorner = true, CssClass = "users_Icon", HtmlAttributes = new Dictionary<string, object>() { { "title", "Manage Users" } } }).Add();

Is there a way to add my own image to the button?

Thanks
Eric Outley

Gowthami V [Syncfusion]
Replied On April 15, 2016 10:02 AM UTC

Hi Eric,

Thanks for using Syncfusion products.

We have analyzed your code example and we found that you have assigned class name using CssClass property. Instead of we can set the class for the button using HtmlAttributes itself as in the below code example,

<style>

    .users_Icon {

        background-image: url('../Content/images/Employees/1.png') !important;

    }

</style>


@(Html.EJ().Grid<object>("CommandGrid")
        .Datasource((IEnumerable<object>)ViewBag.datasource)
. . . .
. . . .

col.HeaderText("Employee Details").Commands(command =>

            {

                command.Type("Users").ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties() { ContentType = ContentType.ImageOnly, Width = "200px",Height="200px", ShowRoundedCorner = true, HtmlAttributes = new Dictionary<string, object>() { { "title", "Manage Users" }, { "class", "users_Icon" } } }).Add();

            })

          

            .IsUnbound(true)


            .Width(100)

            .Add();

        })


)


We have created a sample and the same can be downloaded from the following link,

http://www.syncfusion.com/downloads/support/forum/123727/ze/Sample-1304890239

Refer to the below KB for more clarification,

https://www.syncfusion.com/kb/5173/how-to-add-custom-html-attributes-to-buttons-in-the-command-column

Regards,

Gowthami V.

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;