계층이있는 검도 그리드의 첫 번째 열을 잠 그거나 고정하는 방법은 무엇입니까?

Question

ASP.NET MVC에서 Telerik Kendo UI Grid를 사용하고 있습니다. 나는 검도 (이있는 )의 첫 번째 열을 잠 그거나 고정하기 위해 .Locked() and .Lockable() 속성 인 Kendo의 새로운 기능을 적용하려고 시도했지만, 프로그램을 실행하려고하면 오류가 발생합니다.

나는 또한 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에 따르면 :

행 템플릿 및 세부 기능 열 잠금과 함께 지원되지 않습니다

여기 내 코드입니다.

그래서 열 또는 계층 구조 그리드를 잠글 지 여부를 선택해야합니다.