如何 Lock/Freeze Kendo 具有层次结构的网格的第一列？

Question

我在 ASP.NET MVC 中使用 Telerik Kendo UI 网格。我尝试将 Kendo 的新功能 .Locked() and .Lockable() 属性应用到 lock/freeze 我的网格的第一列（with hierarchy). 但是，当我尝试运行我的程序时，出现错误。

我也试过 this example 但它只适用于基本 Kendo 网格。在示例中，两个网格的同步仅适用于垂直滚动。我想要发生的是，当我单击冻结网格中的展开图标时，该行将展开，因此第二个网格将随之展开。请有人能帮帮我。

这是我的代码：

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.EmployeeViewModel>()
    .Name("grid")
    .Columns(columns =>
    {
        columns.Bound(e => e.FirstName).Width(110).Locked(true);
        columns.Bound(e => e.LastName).Width(110);
        columns.Bound(e => e.Country).Width(110);
        columns.Bound(e => e.City).Width(110);
        columns.Bound(e => e.Province).Width(110);
        columns.Bound(e => e.Town).Width(110);
        columns.Bound(e => e.Barangay).Width(110);
        columns.Bound(e => e.Street).Width(110);
        columns.Bound(e => e.HouseNo).Width(110);
        columns.Bound(e => e.Building).Width(110);
        columns.Bound(e => e.FloorNo).Width(110);
        columns.Bound(e => e.Title);
    })              
    .Sortable()
    .Pageable()
    .Scrollable()
    .ClientDetailTemplateId("template")
    .HtmlAttributes(new { style = "height:430px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(6)
        .Read(read => read.Action("HierarchyBinding_Employees", "Grid"))           
    )       
    .Events(events => events.DataBound("dataBound")))

 <script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.OrderViewModel>()
        .Name("grid_#=EmployeeID#")
        .Columns(columns =>
        {
            columns.Bound(e => e.LastName).Width(110).Locked(true);
            columns.Bound(e => e.Country).Width(110);
            columns.Bound(e => e.City).Width(110);
            columns.Bound(e => e.Province).Width(110);
            columns.Bound(e => e.Town).Width(110);
            columns.Bound(e => e.Barangay).Width(110);
            columns.Bound(e => e.Street).Width(110);
            columns.Bound(e => e.HouseNo).Width(110);
            columns.Bound(e => e.Building).Width(110);
            columns.Bound(e => e.FloorNo).Width(110);
            columns.Bound(e => e.Title);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            .PageSize(10)
            .Read(read => read.Action("HierarchyBinding_Orders", "Grid", new { employeeID = "#=EmployeeID#" }))
        )
        .Pageable()
        .Sortable()
        .ToClientTemplate()
)

Answer 1

根据kendo documentation：

Row template and detail features are not supported in combination with column locking.

所以恐怕你必须选择是要锁定列还是层次网格。

Answer 2

我刚刚使用 THIS 并添加了一些解决方法解决了我的问题。我用了两个网格。在第一个网格中，我放置了需要锁定的列。而且，我将其余列放在第二个网格中。然后我所要做的就是合并和同步网格。也就是说，当在第一个网格中打开第一个层次结构详细信息时，第二个网格中的第一个层次结构详细信息也将打开。依此类推，其他层次结构 levels.I 使用 JavaScript 来做到这一点。见下文（仅适用于第一层次）：

var grid = $('#grid_2').data('kendoGrid');
var hierarchy_level= grid.tbody.find('>tr.k-master-row');
var x = 0;
$("#grid_1").find("tr.k-master-row:first").click(function () {
 if (x == '1') {
   grid.collapseRow(allMasterRows.eq(0));
   x = 0;
 } else {
   grid.expandRow(allMasterRows.eq(0));
   x = 1;
 }
});

然后通过组合两个网格。我用过这个：

$("#grid_1,#grid_2").wrap('<td ></td>').parent().wrapAll('<table><tbody><tr></tr></tbody></table>');

如何 Lock/Freeze Kendo 具有层次结构的网格的第一列？

How to Lock/Freeze the First Column of Kendo Grid with Hierarchy?

model-view-controller

kendo-ui

kendo-grid

freeze