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.

  Razor

    ```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

    ```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 DataGrid 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