Question

我想在剑道网格中显示没有X图标的删除按钮。有什么办法吗？注意：我使用的是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"))
        ))

这是我的代码。但我不知道从哪里可以删除删除图标（X）

Answer 1

我正在搜索是否有任何删除x符号的直接命令。但我还是找不到。所以我试图在firebug中看到网格html代码，我发现图标的跨度有两个类＆＃34; k-icon＆＃34;和＆＃34; k-delete＆＃34; 。 k-icon类用于其他图标，如过滤或编辑。和k-delete仅用于删除图标，因此我尝试了以下操作：

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

Answer 2

这种方法看起来有点像黑客。理想情况下，OP的答案将围绕如何模拟Grid的命令类型列生成的标记。我不确定如何自己做，但可以用CSS解决方案来解决这个问题。

您可以使用display属性来控制包含图标的元素的可见性，并基本上隐藏它。使用OP中的表作为示例......

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

您可以使用CSS编写类似......

的规则

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

Answer 3

我解决了以下问题（在2018年）：

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

IconClass没关系，您可以选择与“ k-icon”不同的任何内容

Kendo Grid：删除没有X图标的按钮

3 个答案: