Question

我正在使用Kendo UI网格编辑和删除命令来管理数据。

我遇到的问题是我有一个需要应用于删除按钮的自定义样式。我可以在DataBound事件上添加类，但是当用户尝试编辑数据时，样式会在按钮上消失，并返回到默认的Kendo UI样式。

Jquery用于添加样式

function onRowBound(e) {
    $(".k-grid-delete").removeClass("k-button k-button-icontext").addClass("btn btn-danger");
}

Kendo MVC Events

columns.Command(command => command.Edit()).Title("Edit");
columns.Command(command => command.Destroy()).Title("Remove")
.........    
.Events(e =>
       {
          e.DataBound("onRowBound");
          e.Cancel("onRowBound");
          e.Edit("onRowBound");
       }))

我尝试在Cancel事件上触发相同的方法，但样式仍然恢复为默认值。有没有办法设置样式，最好不使用“ClientTemplate”功能？

Answer 1

由于kendoUI没有提供任何防止改变其风格的机制，因此我想到的唯一方法是使用SetTimeout函数在kendo之后更改按钮样式。像这样改变你的onRowBoundFunction：

function onRowBound(){
    setTimeout(function(){
            $(".k-grid-delete").removeClass("k-button k-button-icontext").addClass("btn btn-danger");
    },1);
}

使用JSFiddle：http://jsfiddle.net/a6Ek2/10/

Answer 2

在我看来，正确的做法是不要删除kendo类，而是改变你想要的样式。然后，如果你想要另一个网格，你不需要再次手动更改类。所以，在你的CSS中你可以使用逗号并写下类似的东西：

.btn, .k-grid .k-button {
    your properties
}

.btn-danger, .k-grid .k-button {
    your properties
}

我知道你必须改变kendo按钮的几个.k按钮属性，看起来很棒，但你想要但我不知道更好的方法。

Answer 3

我不知道MVC，但我可以像这样设置按钮的样式。下面的代码来自网格的列定义。您可以使用className和/或attributes属性。

{
    command: [{ text: "Edit", click: showDetails, className: "rebtn" },
    { text: "Request New Engagement", click: showEngagement }],
      attributes: {style:"padding:10px"},
      title: " ",
      width: "200px"

 }

取消事件上的Kendo UI Grid

3 个答案: