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