Angular Grid Detail的Kendo UI展开/折叠按钮向右移动？

Question

是否可以将Angular网格细节的Kendo UI展开/折叠按钮移动到网格的右侧？

似乎kendo-ui默认扩展/折叠到kendo网格的最左侧列。我需要看看是否可以将它移动到右边的按钮。

Answer 1

我们可以通过使用一些自定义CSS隐藏当前的+/-图标并手动将这些图标添加到最后一列来实现它。然后，当使用网格的expandRow和collapseRow函数单击最后一列中的图标时，我们需要以编程方式扩展和折叠详细信息模板。结合这些掠夺者来看https://plnkr.co/edit/hc8eYXNTZyFqfRvOiCrc?p=preview

  .k-icon.k-plus:before {
    content: none;
  }
  .k-icon.k-minus:before {
    content: none;
  }

  .k-icon.k-plus, .k-icon.k-minus{
     pointer-events: none;
  }

  .k-detail-cell{
    overflow: visible !important
  }
  .k-detail-cell section{
    margin-left: -32px;
  }

https://plnkr.co/edit/HaCEdMYUtAj4RlpebQnj?p=preview

//import components
import {
    GridComponent,
    GridDataResult,
    DataStateChangeEvent
} from '@progress/kendo-angular-grid';
//get the child
@ViewChild(GridComponent) grid: GridComponent;

//modify your logic here
public ngAfterViewInit(): void {
        // Expand all first rows initially
        for(let i = 0; i < this.pageSize; i++) {
          this.grid.expandRow(i);
        }
    }