Question

如何根据数据绑定事件或列模板上的某些条件将边框应用于整行？

Answer 1

以下文章讨论了所描述的场景：

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

列模板几乎不会帮助设置整行的样式，因为它们不提供对行和单元格元素的访问。这就是考虑rowTemplate中altRowTemplate和dataBound或行/单元格式操作的原因。

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid

Answer 2

使用数据绑定事件

 dataBound: function (e) {
                    // get all rows
                    var rows = e.sender.tbody.children();
                    // this is current data item
                    var dataItem = e.sender.dataItem(row);
                    for (var j = 0; j < rows.length; j++) {
                        var row = $(rows[j]);
                        //your condition here
                        // if (dataItem.Field <= 5)
                        //get all columns
                        row.find('td').each(function (column, td) {

                            //border must be added for each td
                            $(td).css('border-bottom', '1px solid black');
                        });

Answer 3

因此，昨天在网上搜索了几个小时，试图找到一个简单的解决方案，我发现了自己的。这是为了使单个CELL的样式不是一排，但仍然非常相关。此方案涉及基于单元格内的值对单个kendo网格单元着色。我发现你不必在dataBound函数上进行更改，但是在kendo.template本身内。在列中，将kendo.template添加到要自定义的字段中。接下来将条件表达式添加到类中。

超级简单，就像一个热死的！在此处查找完整示例：http://dojo.telerik.com/UhUzi

const server = require('./scripts/server');

CSS样式：

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    height: 430,
    toolbar: ["create", "save", "cancel"],
    columns: [
      "ProductName",
      { field: "UnitPrice", title: "Unit Price", format: "{0:c}", width: 110 },
      { field: "UnitsInStock", title: "Units In Stock", width: 110 },
      { template: kendo.template('<div class=#= Discontinued ? "Discontinued_True" : "Discontinued_False" #>#= Discontinued ? "true" : "false" #</div>'), width: 110 },
      { command: "destroy", title: "&nbsp;", width: 100 }],
    editable: true
  });

Kendo网格 - 如何根据条件

3 个答案: