Kendo UI for Angular Grid Detail的展开/折叠按钮可以移到右边吗? [英] Kendo UI for Angular Grid Detail expand/collapse button to be moved to the right?

问题描述

是否可以将Kendo UI for Angular Grid Detail展开/折叠按钮移到网格的右侧?

Is it possible for the Kendo UI for Angular Grid Detail expand/collapse button to be moved to the right of the grid?

看来，kendo-ui会将扩展/折叠默认设置为kendo网格的最左侧一列.我需要查看是否可以将其移至右侧的按钮.

It appears that kendo-ui defaults the expand/collapse to the left most column of the kendo grid. I need to see if it is possible to move it to the button to the right.

推荐答案

我们可以通过使用一些自定义CSS隐藏当前的+/-图标并将其手动添加到最后一列来实现它.然后，当单击最后一列中的图标时，我们需要使用 https://plnkr.co/edit/hc8eYXNTZyFqfRvOiCrc?p=preview

We can implement it by hiding the current +/- icons using some custom CSS and manually adding such icons to the last column. Then we would need to programmatically expand and collapse the detail template, when clicking the icons in the last column, by using the expandRow and collapseRow functions of the grid. Combine these plunkers to see 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);
        }
    }

这篇关于Kendo UI for Angular Grid Detail的展开/折叠按钮可以移到右边吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！