Kendo Grid: Delete button without X icon

Question

I want to display Delete button without X Icon in kendo grid. Is there any way to do it ? Note: I am using Kendo MVC GRID.

@(Html.Kendo().Grid<RxConnectEntities.DeleteFileDTO>().Name("deleteList")
    .Columns(columns =>
    {
        columns.Bound(p => p.DeleteFaxID).Hidden(true);
        columns.Bound(p => p.FaxName).Width(100).Title("File Name");
        columns.Bound(p => p.PerformedDateTime).Width(75).Title("Archive Date").Format("{0:MM/dd/yyyy}");
        columns.Command(command => { command.Destroy().Text("Move"); }).Width(50);
        columns.Bound(p => p.FilePath).Hidden(true);
    })
    .Editable(editable => editable.Mode(GridEditMode.InLine).DisplayDeleteConfirmation("Are you sure want to Move this Finance File?"))
    .Pageable(p => p.PageSizes(true))
        .Scrollable()
        .Sortable()
        .Selectable(selectable => selectable.Mode(GridSelectionMode.Single).Type(GridSelectionType.Row))
        .Events(events => events.Change("onChange"))
        .Groupable()
    .Filterable(filterable => filterable.Extra(false).Operators(operators => operators.ForString(str => str.Clear().StartsWith("Starts with").Contains("contains").IsEqualTo("Is equal to"))))
    .HtmlAttributes(new { style = "height:738px;" })
        .DataSource(dataSource => dataSource
        .Ajax().ServerOperation(true)
        .PageSize(20)
        .Model(m => m.Id(p => p.DeleteFileID))
        .Read(read => read.Action("GetFileList", "Fax"))
    .Destroy(update => update.Action("MoveFileFromArchiveToQueue", "Operation"))
        ))

Here is my code. But I don't know from where I have option to remove Delete Icon(X)

Answer 1

I was searching for if any direct command for removing x symbol. But I didnt find anyway. So i tried to see grid html code in firebug and I found there is a span for the icon which has two class "k-icon" and "k-delete". k-icon class is used for other icon also like filter or edit. and k-delete is only for delete icon so I tried following and it works:

<script>
$(document).ready(function () {
  var grid = $('#deleteList').data("kendoGrid");
  grid.bind('dataBound', function (e) {
    this.element.find('.k-delete').remove();
  });
});
</script>

Answer 2

This approach seems like a bit of a hack. Ideally, the answer for the OP would be around how to template the markup generated by the Grid's command type columns. I'm not sure how to do that myself, but can answer this with a CSS only solution.

You could use the display property to control visibility of the element containing the icon and essentially hide it. Using the table from the OP as example...

@(Html.Kendo().Grid<RxConnectEntities.DeleteFileDTO>().Name("deleteList")...

You could use CSS to write a rule like...

#deleteList .k-delete { display: none; }

Answer 3

I solved with the following (in 2018):

columns.Command(command => { command.Destroy().Text("Move").IconClass("k-no-icon"); }).Width(50);

IconClass does not matter, you can choose anything that is different from "k-icon"