剑道分层网格对齐问题

Question

我已经实现了两个剑道网格，第一个是父网格，另一个是子网格。当我打开子网格以查看父网格中每个父元素的值时，两个网格的列对齐不匹配。

关于如何解决这个问题的任何帮助？

这是一般代码：-

这是父网格

@(Html.Kendo().Grid<XYZ.Models.ViewModels.ABCMODEL>()
   .Name("ParentGrid")
    .Columns(columns =>
    {
        columns.Bound(e => e.A).Title("ABC").Width(30);
        columns.Bound(e => e.B).Title("EFG").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.C).Title("IJK").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.D).Title("MNO").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
        columns.Bound(e => e.E).Title("XYZ.").Width(30).HeaderHtmlAttributes(new { style = "background-color:#996666;" });
    })
    //.Scrollable()
    .DetailTemplateId("template")
        .HtmlAttributes(new { style = "height:100%;  background-color: #fcfedf;" })
        .HtmlAttributes(new { @class = "tableMain" })
    .DataSource(dataSource => dataSource
        .Ajax()
        // .PageSize(6)
            .Read(read => read.Action("HierarchyBinding_ABC", "Profit"))
    )
    .Events(events => events.DataBound("dataBound"))
    //.ColumnMenu()
    // .Scrollable()
    //.Sortable()
    //.Pageable()
)

这是子网格

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
        .Name("grid_#=CId#")
        .Columns(columns =>
        {
            columns.Bound(e => e.a).Title("123").Width(30);
            columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(30);
            columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(30);
            columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(30);
            columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(30);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId =      "#=CId#" }))
        )
        .ToTemplate()
)

</script>

<script>
    function dataBound() {
        var grid = this;

        $(".k-hierarchy-cell").css({ width: 8 });     
       $(".k-hierarchy-col").css({ width: 8 });
    }
</script>

    <style>
.k-grid tbody .k-grid .k-grid-header
{
    display: none;
}    
#ParentGrid .k-grid-header .k-header
{
       background-color: #d42e12;       
       color:White;
       font-size:small; 
       font-style:normal; 
       border:1px; border-color:Black; border-style:solid; text-align:center;
       white-space:nowrap;
}
.k-grid tbody
{
    background-color: #fcfedf; 
    height:100%; 
    font-size:x-small;
    border:none;
    border-color: #fcfedf; 
    white-space:nowrap;
}
#ParentGrid .k-grid td
{
  border:none   
  padding-right: 0em !important;
}
</style>

希望现在问题变得更加清晰。期待一个有用的答案。

Answer 1

不得不对一些 css 进行一些花哨，但这是我必须完成此操作的示例。

http://jsbin.com/uritAno/2/edit

我认为最主要的是覆盖网格 td 上的右填充和边框，并将每列设置为固定宽度，除了一列。

.k-grid td
{
  border: none;
  padding-right: 0em !important;
}

Answer 2

非常感谢您的回答和评论。他们帮助我回答了我的问题。

所以这是最终的解决方案：

这是父网格

（无需在父网格中进行任何更改，它保持原样每列都有宽度属性）

这是子网格

（所有更改都将在"子网格"中完成）

<script id="template" type="text/kendo-tmpl">
@(Html.Kendo().Grid<ABC.Models.ViewModels.ABCMODEL>()
        .Name("grid_#=CId#")
        .Columns(columns =>
        {
            columns.Bound(e => e.a).Title("123");
            columns.Bound(e => e.b).Title("456").Format("{0:N3}").Width(149);
            columns.Bound(e => e.c).Title("789").Format("{0:N3}").Width(150);
            columns.Bound(e => e.d).Title("101").Format("{0:N3}").Width(137);
            columns.Bound(e => e.e).Title("112").Format("{0:N3}").Width(127);
        })
        .DataSource(dataSource => dataSource
            .Ajax()
            // .PageSize(5)
            .Read(read => read.Action("HierarchyBinding_XYZ", "Profit", new { CId =      "#=CId#" }))
        )
        .ToTemplate()
)

您必须从"子网格中的第一列，即"a"列"中删除宽度，然后从最后一列开始设置宽度。

为子网格的最后一列

提供宽度，使其与"父网格"的最后一列对齐，即通过为"e"提供合适的值，将列"子网格的 e"与"父网格的 E"对齐。

一旦"e"对齐，

它将被修复，现在以类似的方式对齐列"d，b，c"，您会发现列"a"与"父网格中的A"对齐。

这样，两个网格都对齐了。

width 属性中的值特定于我的屏幕，所以我使用了它们。这些不是标准值。尝试根据您的屏幕对齐子网格，值可能会有所不同。

希望对您有所帮助，非常感谢，并祝您新年愉快。

Answer 3

我在使用Kendo UI Javascript Grid时遇到了同样的问题，并受到Robin Giltner答案的启发，我通过以下方式解决：

1） 在必须在右侧对齐的成对列上使用相同的宽度。（从右开始）

2） 在动态宽度列上保留自由宽度。（从左起）

3） 按如下方式覆盖.k-detail-cell类：

    .k-detail-cell
    {
        padding-right: 0em !important;
    }

将padding-right: 0em !important;应用于.k-detail-cell我们仅将详细信息网格向右对齐;将padding-right: 0em !important;应用于.k-grid td时，我们向右对齐两个网格的所有列及其内容。

（不好，因为甚至页眉和页脚都向右对齐）

注意：剑道 UI 版本 2014.2.716