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

[Aun Fever]

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]

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]

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]

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. 

https://help.syncfusion.com/js/release-notes/v14.3.0.49?type=breaking-changes#ejbutton 

Regards, 

Ragavee U S.