Add image to grid command button

[Eric Outley]

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]

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.