Adding Command Buttons as Icons with No Text

Environment

Product Version	2019.2.619
Product	Telerik UI for ASP.NET Core Grid

Description

How can I set a command button in the Telerik UI Grid that contains only an icon and no text?

Solution

Use either of the following approaches:

• Use CSS to style the Edit button by setting the .k-grid-edit-command CSS of the button as desired. Include the following configuration in the k-button-icon class.

  ```css
        .k-grid tbody .k-grid-edit-command {
            min-width: 0;
            width: calc(2px + .75rem + 1.5em);
            height: calc(2px + .75rem + 1.5em);
            padding: .375rem;
        }
  
        .k-grid tbody .k-grid-edit-command .k-icon{
             margin: 0;
        }
  ```
  ```razor
  .Columns(columns =>
  {
      columns.Bound(c => c.ProductName).Width(150);
      columns.Bound(c => c.Discontinued).Width(75);
      columns.Command(command => { command.Edit().Text(" "); command.Destroy(); }).Width(300);
  })
  ```
  

• Create a custom template for the Edit button with an additional class. By using the onclick event handler, set the editRow method for the specific Grid row.

  ```razor
  .Columns(columns =>
  {
      columns.Bound(c => c.ProductName).Width(150);
      columns.Bound(c => c.Discontinued).Width(75);
      columns.Command(command => { command.Edit().Template("<button type=\"button\" class=\"k-button k-button-icon edit\"><span class=\"k-icon k-i-edit\"></span></button>"); command.Destroy(); }).Width(300);
  })
  ```
  ```javascript
  $(document).ready(function () {
      $("#grid").on("click", ".edit", function () {
           var row = $(this).closest("tr");
           $("#grid").data("kendoGrid").editRow(row);
      });
  });
  ```
  

More ASP.NET Core Grid Resources

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core Grid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core
• Server-Side API Reference of the Grid for ASP.NET Core
• Telerik UI for ASP.NET Core Breaking Changes
• Telerik UI for ASP.NET Core Knowledge Base