Dhwani Dhwani - 5 months ago 47
jQuery Question

Kendo Grid: Delete button without X icon

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

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