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.
Unfortunately, activation email could not send to your email. Please try again.

How to place icons in command column buttons instead of text

In command column buttons by default, the text such as Edit/Delete/Save/Cancel will be displayed. We can also place the icons in those buttons.

Let us see how to place icons in command column buttons.

Grid Initialization

JS

 

MVC

 

ASPX

 

The result will be as follows.

Figure 1: Command column with icon before editing

 

Figure 2: Command column with icon after editing

Using custom icons

The icons showed in the above examples are available in the Syncfusion`s default theme packages. We can also use our own custom icons in the command buttons.

For example, to use the Font-Awesome icons in the command button, include the reference to the Font-Awesome icons CSS file in your page.

 

And then specify the corresponding icon class in the prefixIcons property of the buttonOptions.

 

In such a way, you can assign the CSS class of the corresponding icon in the PrefixIcons property of the ASP.Net MVC Grid and ASP.Net Grid to show the icons in the custom button.

The output result is as follows.

Figure 3: Grid with custom icon in command button before edit

Figure 4: Grid with custom icon in command button after edit

 

Article ID: Published Date: Last Revised Date: Platform: Control:
4104 02/20/2015 02/21/2017 ASP.NET MVC Grid
Did you find this information helpful?
Add Comment
You must log in to leave a comment

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.