Question

我有一个Kendo UI Grid，其中一列有一个按钮，但我musgt隐藏按钮取决于按钮所在的行（在这种情况下是第一行和最后一行）。

我该怎么做？

我的代码如下。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>Kendo UI Snippet</title>

    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.common.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.rtl.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.silver.min.css"/>
    <link rel="stylesheet" href="http://kendo.cdn.telerik.com/2016.2.714/styles/kendo.mobile.all.min.css"/>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="http://kendo.cdn.telerik.com/2016.2.714/js/kendo.all.min.js"></script>

</head>
<body>

<div id="grid">  
</div>

<script>
$("#grid").kendoGrid({
  columns: [
    { field: "name" },
    { field: "age" },
        { width: 150, 
            command:            
                    [
                {
                    name:"Up",
                    imageClass: "k-icon k-i-arrow-s",
                    click: function(e) {
                        var tr = $(e.target).closest("tr"); 
                        var item = this.dataItem(tr);
                        var dir = "U";
                        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
                        moveItem.moveUp(dir,dataItem.order).addCallback(function(response){
                        alert(response);
                        })
                    }
                },
          ]
            }
  ],
  dataSource: [
      { name: "Jane Doe", age: 30 },
      { name: "John Doe", age: 33 }
  ]
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn(grid.columns[0].columns[0]);
</script>
</body>
</html>

==================

我添加了包含moveItem.moveItemUp方法的代码。

在这个方法中，我使用远程过程调用来执行一些服务器端javascript。它实际上与隐藏按钮无关。

<xe:jsonRpcService
        id="jsonRpcService1"
        serviceName="moveItem">
        <xe:this.methods>
            <xe:remoteMethod
                name="moveUp"
                script="return direction + order">
                <xe:this.arguments>
                    <xe:remoteMethodArg
                        name="direction"
                        type="string">
                    </xe:remoteMethodArg>
                    <xe:remoteMethodArg
                        name="order"
                        type="number">
                    </xe:remoteMethodArg>
                </xe:this.arguments>
            </xe:remoteMethod>
        </xe:this.methods>
    </xe:jsonRpcService>

Answer 1

有三种方法可以自定义Kendo UI Grid行和单元格外观：

http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/style-rows-cells-based-on-data-item-values

行和列模板不提供有关数据项索引的信息，因此剩下的选项是使用dataBound事件，获取网格tbody，找到第一个和最后一个子表行和最后，隐藏它们内部的按钮。按钮将具有k-grid-Up CSS类，即取决于命令name（区分大小写）。

Answer 2

在网格中隐藏控件的一种方法是通过CSS。您可以创建以下样式来隐藏行中的第一个和最后一个按钮：

#grid> tbody > tr:first-child > td > input {
  display:none;
}

#grid> tbody > tr:last-child > td > input {
  display:none;
}

（您需要更改这些样式以使其适用于您的特定网格和按钮）。

有条理地隐藏KendoUIGrid

2 个答案: