Question

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

有关如何解决此问题的任何帮助？

以下是一般代码： -

//这是父网格

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

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

所以这是最终解决方案：

//这是父网格（不需要在父网格中进行任何更改，它保持不变每列都有width属性）

//这是子网格（所有更改都在“子网格”中完成）

<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时，我们会将右侧，两个网格的所有列及其内容对齐。

（不好，因为即使页眉和页脚也在右边对齐）

注意：Kendo UI版本2014.2.716

Kendo分层网格对齐问题

3 个答案: