Is it possible to create a custom row expand button?

[Vincent]

Currently I'm using the Kendo native grid component and I want to make use of the master-detail template functionality:

https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/hierarchy/

 

However when enabling this the expand buttons are always on the left column and I can't change the styling easily. 

Is it possible to make a custom expand button via the use of a function or something that will also open each row's detail template?

[Petar]

Hi Vincent,

To achieve what you want, you can use the approach demonstrated in this StackBlitz example. You will see that in this example the opened/closed state of the detail field is controlled by the button in the last column of each row. 

The key to the implementation of your scenario is to control the expanded field of the dataItem as in the below toggleRow method.

toggleRow: function (dataItem: any) {
    dataItem.expanded =
    dataItem.expanded === undefined ? true : !dataItem.expanded;
}

I hope the provided example will help you achieve what you need. 

Regards,
Petar
Progress Telerik