I need to open the Master-detail template not only on the "+" or "arrow" icon but on another button on the screen.
In other words, How can we invoke the "expandChange" method from other element instead of <Grid @expandchange="expandChange" > to expand/collapse the detail template?
Template: I want to expand the detail template with the click of the Edit button.
<Grid
:data-items="sampleData"
:columns="columns"
:detail="cellTemplate"
:expand-field="'expanded'"
@expandchange="expandChange"
>
<template v-slot:actionColumn>
<td>
<div class="d-flex align-items-center tbl-actions">
<button
type="button"
title="Edit"
@click="expandChange"
class="btn btn-icon d-flex align-items-center"
>
<span class="icon icon-edit"></span>
</button>
<button
type="button"
title="Add to Cart"
class="btn btn-icon d-flex align-items-center"
>
<span class="icon icon-cart"></span>
</button>
</div>
</td>
</template>
<template v-slot:expandTemplate> Detail template goes here.... <template>
Method:
expandChange: function (event: any) {
event.dataItem[event.target.$props.expandField] = event.value;
if (event.value) {
event.event.target.parentNode.parentNode.classList.add("expanded-row");
} else {
event.event.target.parentNode.parentNode.classList.remove(
"expanded-row"
);
}
},