Question

我在ASP.NET MVC中使用Telerik Kendo UI Grid。我尝试应用Kendo的新功能.Locked() and .Lockable()属性来锁定/冻结网格的第一列（带层次结构）。但是，当我尝试运行程序时，它出错了。

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

这是我的代码：

@(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

我刚刚使用 THIS 解决了我的问题并添加了一些解决方法。我用了两个网格。在第一个网格中，我已经放置了需要锁定的列。并且，我将其余列放到第二个网格中。然后，我所要做的就是组合和同步网格。也就是说，在第一个网格中打开第一个层次结构细节时，第二个网格中的第一个层次结构细节也将打开。等等到其他层次结构级别。我使用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>');

Answer 2

根据kendo documentation：

不支持行模板和详细信息功能列锁定。

所以我担心你必须选择是否要锁定colum或层次网格。

如何使用层次结构锁定/冻结Kendo Grid的第一列？

2 个答案: