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. Image for the cookie policy date

Add image to grid command button

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

1 Reply

GV Gowthami V Syncfusion Team 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.

Loader.
Up arrow icon