CODEWITHSUNDEEP
font-awesomekendo-asp.net-mvc
Mohsan
Mohsan

Reputation: 2509

Kendo MVC Grid Custom Command Font Awesome Icon using Helper

I'm stuck on a problem. I am using Kendo MVC and want to display font awesome icon in Grid Custom commands. I have defined Grid Custom Commands for Edit, Delete, and Detail.

columns.Command(command =>
{
    command.Custom("Edit").Action("Edit", "User");
    command.Custom("Details").Action("Details", "User");
    command.Custom("Delete").Action("Delete", "User");
}

Please review the following screenshot. I want to auto-add the fa fa-edit and other icons using MVC Helper extension method.

enter image description here

Upvotes: 1

Views: 1804

Answers (1)

Sandman
Sandman

Reputation: 2307

It is possible to override the CSS for the edit/details/delete command buttons which gives you the option to apply the same style for all pages or just one, for example:

.k-grid-content .k-button.k-grid-edit::before {
    content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-delete::before {
    content: "\f1f8" !important;
}

And when grid transitions (after placed into edit mode):

.k-grid-content .k-button.k-grid-update::before {
    content: "\f044" !important;
}
.k-grid-content .k-button.k-grid-cancel::before {
    content: "\f1f8" !important;
}

Here is the a complete Dojo example and all Font Awesome icons along with their CSS values.

Upvotes: 1

Related Questions