Kendo UI Angular Grid Detail template "+" icon to be moved to last column

Question

[+ icon to be moved to right far end]

Iam using kendo angular Grid, where i need to customize the "+" icon to be the last column of the grid. by default it comes as the first column. can anybody help on acheiving it.

Answer 1

You need to:-

• Hide the detail icon column. I found this telerik forum link which explains how to hide the expand and collapse detail grid column.
• Add a new column for the detail icon to be displayed on the right.
• Call collapseRow and expandRow grid methods respectively onclick of the detail icon.
• Handle detailCollapse and detailExpand grid events respectively to toggle the detail icon for expand and collapse

Answer 2

i found a way to hide the column itself in the callback function.

rowCallback({ dataItem, index }) {
    $('.k-hierarchy-col').css('width', '0px');
    $('td.k-hierarchy-cell').css('visibility', 'hidden');
    $('th.k-hierarchy-cell').css('visibility', 'visible');
  }

thanks for the help.

Answer 3

you must change navigatable in details grid to false (kendoGridDetailTemplate)

<kendo-grid [navigatable]="false">
</kendo-grid>