Kendo UI for Angular Grid Detail expand/collapse b

Question

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

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.

Answer 1

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);
        }
    }