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

我使用了一个小代码来控制que标头位置。希望这有点帮助。这是为了剑道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');
  }
}

在kendo网格中实现虚拟滚动条后，标题和列错误对齐

2 个答案: