CODEWITHSUNDEEP
kendo-uikendo-asp.net-mvc
Tom
Tom

Reputation: 8681

Replace edit and delete buttons on kendo grid with icons

I have implemented edit and command button for my kendo grid and now need to replace the buttons with icons that I have. Could anybody show my how it is done Following is my view

 @(Html.Kendo().Grid<CC.GRP.MCRequest.ViewModels.TeamViewModel>()
    .Name("GridTeam")
    .Columns(columns =>
    {

        columns.Command(command => { command.Edit(); command.Destroy(); }).Width(250);
        columns.Bound(o => o.TeamID).Hidden();
        columns.Bound(o => o.CountryCode);
        columns.Bound(o => o.TeamName);
        columns.Bound(o => o.TeamDescription);

    })
    .ToolBar(toolbar => toolbar.Create())
     .Editable(editable => editable.Mode(GridEditMode.PopUp)
     .TemplateName("TeamEdit")
        .Window(w => w.Width(500))
     )
    .Pageable()
    .Sortable()
    .Filterable()
    .Scrollable()
    .Groupable()
    .DataSource(dataSource => dataSource
        .Ajax()
        .Model(model => model.Id(t => t.TeamID))
        .Create(create => create.Action("Team_Create", "Admin"))
        .Read(read => read.Action("Team_Read", "Admin"))
        .Update(update => update.Action("Team_Update", "Admin"))
        .Destroy(update => update.Action("Team_Delete", "Admin"))
    )
    )

enter image description here

After applying the solution

enter image description here

Upvotes: 1

Views: 7559

Answers (3)

Michael G
Michael G

Reputation: 582

If you don't want to use font awesome or another library, you can use the kendo web font icons that are already included if you're using kendo. For a trash can the icon class is "k-icon k-i-trash".

.Columns(col => {
   col.Command(c => {
       c.Destroy().Text(" ").IconClass("k-icon k-i-trash");
   }
 })

Documentation: https://docs.telerik.com/aspnet-core/styles-and-layout/sass-themes/font-icons

Upvotes: 0

Eric Burdo
Eric Burdo

Reputation: 814

I recently had the same question, and figured it out using the IconClass property of the Command.

          columns.Command(command => {
            command.Edit().Text(" ").IconClass("fa fa-edit");
            command.Destroy().Text(" ").IconClass("fa fa-trash");
          });

Make sure to set Text to a space. This hides any text. Then apply whatever classes you want in IconClass.

In my example, I used the Edit and Trash icons from Font Awesome. You can apply whatever custom classes you want there.

Upvotes: 2

Mantas Čekanauskas
Mantas Čekanauskas

Reputation: 2228

You can follow this thread. Quickly to sum up everything, you'll need to add new event 

.Events(e => e.DataBound("onRowBound"))

And then implement JS function

function onRowBound(e) {
    $(".k-grid-edit").find("span").hide()
    $(".k-grid-edit").addClass("custom-icon-class");
}

Upvotes: 1

Related Questions