Fatal编程技术网
  • kendo-ui/
  • Kendo ui 剑道体系网格对齐问题

Kendo ui 剑道体系网格对齐问题

kendo-ui

Kendo ui 剑道体系网格对齐问题,kendo-ui,kendo-grid,Kendo Ui,Kendo Grid,我已经实现了两个Kendo网格，第一个是父网格，另一个是子网格。 当我打开子网格以查看父网格中每个父元素的值时， 两个轴网的柱对齐方式不匹配 关于如何解决这个问题有什么帮助吗 以下是一般代码：- //这是父网格 @(Html.Kendo().Grid<XYZ.Models.ViewModels.ABCMODEL>() .Name("ParentGrid") .Columns(columns => { columns.Bound(e =>

我已经实现了两个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()
)

@（Html.Kendo（）.Grid（））
.Name（“父网格”）
.列（列=>
{
列.装订（e=>e.A）.标题（“ABC”）.宽度（30）；
columns.Bound（e=>e.B）.Title（“EFG”）.Width（30）.HeaderHtmlAttributes（新的{style=“background color:#996666；”）；
columns.Bound（e=>e.C）.Title（“IJK”）.Width（30）.HeaderHtmlAttributes（新的{style=“background color:#996666；”）；
columns.Bound（e=>e.D）.Title（“MNO”）.Width（30）.HeaderHtmlAttributes（新的{style=“background color:#996666；”）；
columns.Bound（e=>e.e）.Title（“XYZ”）.Width（30）.HeaderHtmlAttributes（新的{style=“background color:#996666；”）；
})
//.Scrollable（）
.DetailTemplateId（“模板”）
.HtmlAttributes（新的{style=“height:100%；背景色：#fcfedf；“}）
.HtmlAttributes（新的{@class=“tableMain”}）
.DataSource（DataSource=>DataSource
.Ajax（）
//.页面大小（6）
.Read（Read=>Read.Action（“层次绑定”、“利润”））
)
.Events（Events=>Events.DataBound（“DataBound”））
//.column菜单（）
//.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>

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


@（Html.Kendo（）.Grid（））
.Name（“grid#=CId#”）
.列（列=>
{
列。装订（e=>e.a）。标题（“123”）。宽度（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（）
//.页面大小（5）
.Read（Read=>Read.Action（“HierarchyBinding_XYZ”，“Profit”，new{CId=“#=CId#”}））
)
.ToTemplate（）
)
函数数据绑定（）{
var grid=此；
$（“.k-hierarchy-cell”）.css（{width:8}）；
$（“.k-hierarchy-col”）.css（{width:8}）；
}
.k-grid tbody.k-grid.k-grid-header
{
显示：无；
}    
#ParentGrid.k-grid-header.k-header
{
背景色：#d42e12；
颜色：白色；
字体大小：小；
字体风格：普通；
边框：1px；边框颜色：黑色；边框样式：纯色；文本对齐：居中；
空白：nowrap；
}
.k-grid T车身
{
背景色：#fcfedf；
身高：100%；
字体大小：x-small；
边界：无；
边框颜色：#fcfedf；
空白：nowrap；
}
#ParentGrid.k-grid td
{
边界：无
右边填充：0em！重要；
}
希望现在问题变得更清楚。
期待一个有用的答案。

必须对一些css有一点兴趣，但下面是一个我必须实现这一点的示例

我认为主要的事情是覆盖网格td上的正确填充和边框，并将每列设置为固定宽度，只保留一列

.k-grid td
{
  border: none;
  padding-right: 0em !important;
}
非常感谢您的回答和评论。 他们在回答我的问题时帮了我很大的忙

这是最终的解决方案：

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

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


@（Html.Kendo（）.Grid（））
.Name（“grid#=CId#”）
.列（列=>
{
列.绑定（e=>e.a）.标题（“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（）
//.页面大小（5）
.Read（Read=>Read.Action（“HierarchyBinding_XYZ”，“Profit”，new{CId=“#=CId#”}））
)
.ToTemplate（）
)
您必须删除子网格中“第一列”（即“a”列）的宽度，并从最后一列开始设置宽度

为子网格的最后一列指定宽度，使其与“父网格”的最后一列对齐，即。 通过给“e”一个合适的值，将“子网格e”列与“父网格e”列对齐

一旦“e”对齐，它将被固定，现在以类似的方式对齐列“d、b、c”，您将发现列“a”与父网格中的“a”对齐

通过这种方式，两个栅格对齐

“宽度”属性中的值特定于我的屏幕，因此我使用了它们。这些值不是标准值。请尝试根据屏幕对齐子网格，这些值可能不同

希望对你有所帮助，谢谢你，祝你新年快乐

我在剑道UI Javascript网格中也遇到了同样的问题，受Robin Giltner答案的启发，我通过以下方式解决了这个问题：

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

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

3） 重写
.k-detail-cell
类，如下所示：

    .k-detail-cell
    {
        padding-right: 0em !important;
    }
正在应用
右填充：0em！重要的
到
.k-detail-cell
我们只将细节网格向右对齐；在应用
右填充时：0em！重要的
到
.k-grid td
我们将两个网格及其内容的所有列向右对齐

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