在剑道网格中实现虚拟滚动条后，页眉和列错误对齐

Question

我已经成功实现了滚动条在网格中，一旦我实现了滚动条页眉并且列未对齐，因为滚动条只能向左移动列但不移动页眉。任何指教，谢谢

谢谢

@(Html.Kendo().Grid<HH.BookModel>() 

     .Name("Book") 
     .HtmlAttributes(new { @Style = "align:center; font-size:10px; width:495px" }) 
     .Columns(columns => 
     { 


      columns.Bound(p => p.Description); 
      columns.Bound(p => p.SessionCreateDate).EditorTemplateName); 
      columns.Command(commands => commands.Destroy()).Width(100); 



     }) 


     .Editable(editable => editable.Mode(GridEditMode.InLine)) 
     .Sortable() 


     .Selectable() 
     .Scrollable(scrollable => scrollable.Virtual(true)) 
     .ColumnMenu(c => c.Columns(false)) 
     .DataSource(dataSource => dataSource 
      .Ajax()//bind with Ajax instead server bind 
      .PageSize(5) 
      .ServerOperation(true) 
       .Model(model => 
       { 
        model.Id(p => p.BookID); 

       }) 
            .Sort(sort => sort 
          .Add(x => x.Description).Descending()) 

      .Read(read => read.Action("GetBookData", "BookDetails").Type(HttpVerbs.Get)) 
      .Destroy("DeleteBook", "BookDetails") 
      ) 



    ) 

Answer 1

尝试设置的两列的宽度。第三个将占领其余的空间。这也将正确设置标题单元格的宽度。

Answer 2

我用一个小代码让我控制队列标题位置。希望这会有所帮助。这是为剑道Js图书馆。

function correctGridHeader() { 
    if ($('#grid table.k-selectable').height() > $('#grid .k-grid-content').height()) { 
    $('.k-grid .k-grid-header').css('padding-right', '17px'); 
    } else { 
    $('.k-grid .k-grid-header').css('padding-right', '0px'); 
    } 
}