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

EJ CommandGrid - add edit icon instead of the text "Edit"

Thread ID:

Created:

Updated:

Platform:

Replies:

118220 Feb 12,2015 10:17 AM UTC Nov 1,2016 05:11 AM UTC ASP.NET MVC 3
loading
Tags: Grid
Aun Fever
Asked On February 12, 2015 10:17 AM UTC

We are using Syncfusion MVC EJ CommandGrid, we want to add edit/delete icons instead of the "Edit"  text shown in below code

Eg:
 col.HeaderText("Action").Commands(command =>
            {
                command.Type(UnboundType.Edit)
                       .ButtonOptions(new Syncfusion.JavaScript.Models.ButtonProperties()
                       {
                           Text = "Edit"
                       }).Add();
}

Madhu Sudhanan P [Syncfusion]
Replied On February 13, 2015 05:34 AM UTC

Hi Aun,

Thanks for using Syncfusion products.

Query: “we want to add edit/delete icons instead of the "Edit"  text

We can place icons in command buttons instead of text as follows. Please refer the below code snippet.

@(Html.EJ().Grid<object>("ExportGrid")

. . . .

  

    .Columns(col =>

        {

            . . .  .

           col.HeaderText("Actions").IsUnbound(true).Commands(commands => {

                commands.Type(UnboundType.Edit).ButtonOptions(new ButtonProperties()

                {

                  ContentType = ContentType.ImageOnly,

                  PrefixIcon = "e-edit"

                }).Add();

                commands.Type(UnboundType.Delete).ButtonOptions(new ButtonProperties()

                {

                    ContentType = ContentType.ImageOnly,

                    PrefixIcon = "e-delete"

                }).Add();

                commands.Type(UnboundType.Save).ButtonOptions(new ButtonProperties()

                {

                    ContentType = ContentType.ImageOnly,

                    PrefixIcon = "e-save"

                }).Add();

                commands.Type(UnboundType.Cancel).ButtonOptions(new ButtonProperties()

                {

                    ContentType = ContentType.ImageOnly,

                    PrefixIcon = "e-cancel"

                }).Add();

            }).Width(75).Add();

        })

. . .  .

)

To place the icons in buttons, set the ContentType property of ButtonProperties as ContentType.ImageOnly and provide the icon class in the PrefixIcon as shown above.

For your kind information, this option is included in our latest Volume 4, 2014 Service pack 1 (v12.4.0.30). If we didn’t used v12.4.0.30 then we suggest you to upgrade to our latest version which is available in the below link.

http://www.syncfusion.com/forums/118097/essential-studio-2014-volume-4-service-pack-release-v12-4-0-30-available-for-download

Please let us know if you have any queries.

Regards,

Madhu Sudhanan. P



Jesse Temple
Replied On October 31, 2016 05:00 PM UTC

I know this is an old question, but I just updated my grids to 14.3.0.52 and this no longer works. The button icons do not display.

Ragavee U S [Syncfusion]
Replied On November 1, 2016 05:11 AM UTC

Hi Jesse, 

We have made changes in our ejButton control from our Volume 3, 2016 v14.3.0.49 such that to display the EJ icons as prefix/suffix icons, we need to include the “e-icon” class with the corresponding class names. Please refer to the below release notes documentation in which we have explained about this changes. 


Regards, 
Ragavee U S. 


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

;