Skip to content

Latest commit

 

History

History
81 lines (67 loc) · 2.56 KB

grid-icon-command-button-no-text.md

File metadata and controls

81 lines (67 loc) · 2.56 KB
title description type page_title slug tags ticketid res_type
Add Command Buttons as Icons with No Text
An example on configuring a command button to contain only icons with no text in the Telerik UI Grid HtmlHelper for ASP.NET Core.
how-to
Implement Command Buttons with Icons Only | Telerik UI for ASP.NET Core Grid
grid-icon-command-button-no-text
grid, icon, command, button, no, text, edit, column
1422170
kb

Environment

Product Version 2019.2.619
Product Grid for Progress® Telerik UI® for ASP.NET MVC, Grid for Progress® Telerik UI® for ASP.NET Core

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 CSS of the button as desired. Include the following configuration in the k-button-icon class.

      ```css
        .k-grid tbody .k-grid-edit {
            min-width: 0;
            width: calc(2px + .75rem + 1.5em);
            height: calc(2px + .75rem + 1.5em);
            padding: .375rem;
        }

        .k-grid tbody .k-grid-edit .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);
      });
  });
  ```

See Also