Kendo Heirarchical Grid Alignment Issue

我已經實現了兩個Kendo網格，第一個是父網格，另一個是子網格。當我打開子網格查看父網格中每個父元素的值時，兩個網格的列對齊不匹配。Kendo Heirarchical Grid Alignment Issue

如何解決這個問題的任何幫助？

下面是一般的代碼： -

//這是父電網

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

希望現在的問題變得更加清晰。期待有用的答案。

來源

2013-12-18 Shivam657

我想你或許可以張貼不很一般代碼放棄任何商業邏輯或「祕密」。但你會比我更清楚。 –

添加了一般的代碼，任何幫助表示讚賞:) – Shivam657

非常感謝您的回答和評論。他們幫助我解決了我的問題。

因此，這裏是最終的解決方案：

//這是父網格（不需要做家長電網的任何變化，仍是它是與寬度屬性，每列）

//這是孩子網格（所有的變化都在「子網格」做）

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

你必須從「在孩子電網即列第一列‘一’，」和開始刪除寬度設置最後一列的寬度。

爲子網格的最後一列指定一個寬度，使其與「父網格」的最後一列對齊，即通過給出「e」子網列「子網格的e」與「父網格的E」一個合適的價值。

一旦「e」對齊，它將被固定，現在以類似的方式對齊列「d，b，c」，您會發現列「a」與「父網格中的A」對齊。

通過這種方式，兩個網格得到對齊。

width屬性中的值特定於我的屏幕，所以我使用它們。這些不是標準值。根據屏幕嘗試並對齊子網格，值可能不同。

希望它有幫助，非常感謝，並有一個偉大的新的一年。

來源

2014-01-02 13:20:15 Shivam657

不得不對一些CSS有點花哨，但這裏是我必須完成的一個示例。

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

我認爲最主要的是覆蓋右填充和邊框對電網TD的，每列設置爲一個固定的寬度，保存爲一個。

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

來源

2013-12-18 21:11:55

我不能添加「border：none」選項，因爲它會刪除邊框，而paading：right：0em！重要的沒有多大幫助。你可以查看我的代碼，你肯定會得到一個更好的主意。 – Shivam657

嘗試從父網格和子網格上的標題列中刪除寬度，但將其留在剩餘的列上。 –

嗨@ giltnerj0，非常感謝您的評論。實際上，我們已經在父級和子級Grid的所有列中添加了標題列。所以請您詳細說明您的解決方案。 – Shivam657

我有劍道UI JavaScript網格同樣的問題和羅賓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

來源

2015-02-03 09:56:46

Kendo Heirarchical Grid Alignment Issue

回答

相關問題