Vynhoû Tawa
Vynhoû Tawa

Reputation: 68

Telerik Kendo Grid custom command icon

I use a kendo grid in my application with custom command for each line like this:

.Columns(
        columns =>
        {
           //fields 1
           //fields 2
            columns.Command(command =>
            {
                command.Custom("View").Click("view");
                command.Custom("Edit").Click("edit");
                command.Custom("Delete").Click("delete");
            }).Width(300);
        }
)

It work but now I need to put icon (awesome font ?) instead of string. Thank you for help

Upvotes: 0

Views: 3281

Answers (1)

Seuthes
Seuthes

Reputation: 91

You can customize the look and like of the buttons with CSS. In the following example the button is customized with a background-image.

.k-grid-content .k-button {
  width: 20px;
  height: 20px;
  border: none;
  min-width: 0 !important;
  border-radius: 0;
  color: transparent;
  text-indent: -10000%;
  box-shadow: none !important;
}

.k-grid-content .k-button span {
   display: none;
 }

.k-grid-content .k-button.k-grid-Edit {
  background: url(/img/icons/icon-edit.png) no-repeat;
}

I created a dojo for you. Hope it helps.

http://dojo.telerik.com/ETIYa/2

Upvotes: 2

Related Questions