【问题标题】:Can you disable selection for specific cells or columns in KendoUI Grid?您可以禁用 Kendo UI Grid 中特定单元格或列的选择吗?
【发布时间】:2013-06-28 13:26:18
【问题描述】:

多选在 KendoUI Grid 中看起来不错,但它似乎不支持行标题或排除范围。

例如我希望能够选择下面显示的突出显示的单元格(例如,我想将它们变成行标题):

最好使用 JQuery/Javascript 或服务器端 C# Razor 语法回答。

根据以下答案更新:

根据下面 lgorrious 的建议,我将其添加到 KendoGrid 选项中:

dataBound: function() {
    $('#grid tr td:first-child').addClass('k-group-cell');
},

通过欺骗网格忽略第一列(认为它是分层网格中的分组级别单元格)来达到目的。

我无法按原样使用答案,因为我正在为列使用数据源,因为它们动态变化,但它直接引导我找到一个简单的解决方案

【问题讨论】:

  • 问题,当您说我不想选择突出显示的单元格时,您是指cells还是rows?
  • @OnaBai:我正在使用多个单元格选择(不是行)

标签: kendo-ui kendo-grid


【解决方案1】:

这是一个有点古怪的解决方法,但我在网格的源代码中找到了这一行:

SELECTION_CELL_SELECTOR = "tbody>tr:not(.k-grouping-row):not(.k-detail-row):not(.k-group-footer) > td:not(.k-group-cell):not(.k-hierarchy-cell)"

不会选择具有 k-group-cell 类的 td。

这样,只需将属性 class= "k-group-cell" 添加到您不想被选中的列中。

@(Html.Kendo().Grid<Employee>()    
.Name("Grid")
.Columns(columns =>
{
    columns.Bound(p => p.Department).HtmlAttributes(new { @class = "k-group-cell" }); //Add class to HtmlAttributes, on the column you don't want to be selected.
    columns.Bound(p => p.EmployeeId);
        columns.Bound(p => p.Name);
    })
    .Pageable()
    .Sortable()
    .Filterable()
    .Selectable(x => x.Mode(GridSelectionMode.Multiple).Type(GridSelectionType.Cell))
    .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(5)
            .Read(read => read.Action("GetEmployees", "Home"))
    )
)

还有一个java脚本示例:

<div id="grid" style="width: 400px;"></div>
<script type="text/javascript">
    $(document).ready(function () {
        var grid = $("#grid").kendoGrid({
            columns: [
                  {
                      field: "Department",
                      title: "Department",
                      attributes: {
                          "class": "k-group-cell" //Same idea with the class attribute
                      }
                  }, {
                      field: "Name",
                      title: "Full Name"
                  }, {
                      field: "EmployeeId",
                      title: "Employee ID"
                  }
              ],
            dataSource: {
                data: [
                      {
                          EmployeeId: 0,
                          Name: "Joe Mintot",
                          Department: "Finance"
                      }, {
                          EmployeeId: 1,
                          Name: "Jane Smith",
                          Department: "IT"
                      }
                  ],
                schema: {
                    model: {
                        id: "EmployeeId",
                        fields: {
                            EmployeeId: { type: "number" },
                            Name: { type: "string" },
                            Department: { type: "string" }
                        }
                    }
                },
                pageSize: 10
            },
            selectable: "multiple cell",
            scrollable: {
                virtual: true
            },
            pageable: true
        }).data("kendoGrid");
    });
</script>

【讨论】:

  • +1 +25 +50... 课堂上的这个技巧让我直接找到答案(问题已更新)。非常感谢!
猜你喜欢
  • 1970-01-01
  • 2014-08-08
  • 2013-02-13
  • 1970-01-01
  • 2012-09-26
  • 1970-01-01
  • 2013-03-10
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多