I am trying to build a custom Activity Timeline using lwc. I want to have a button to expand all activity nodes and collapse all activity nodes on click . This is similar to expand all button in standard Activity Timeline.
The issue which i am facing is when click on ExpandAll button on parent , i am calling the child method . After that only the first node is getting expand
Before clicking
After clicking "Expand All" button
How to make all the nodes to expand when button is clicked.
Below is my code.
Parent HTML
<lightning-card class="slds-m-top_medium">
<template if:true={timelineGroups}>
<lightning-button variant="base" label="Expand All" title="Expand All" onclick={handleClick}
class="slds-m-left_x-small"></lightning-button>
<lightning-accordion allow-multiple-sections-open active-section-name={activeSections}>
<template for:each={timelineGroups} for:item="activityGroup">
<lightning-accordion-section name={activityGroup.sectionName} label={activityGroup.name}
key={activityGroup.items}>
<ul class="slds-timeline">
<template for:each={activityGroup.items} for:item="item">
<c-activitylineitem key={item} item={item} isexpanded="true"></c-activitylineitem>
</template>
</ul>
</lightning-accordion-section>
</template>
</lightning-accordion>
</template>
</lightning-card>
Parent JS -
@track activeSections = [];
@track timelineGroups;
connectedCallback() {
getActivityTimeline({ recordId: this.rowdetails.idtoupdate, includeChildren: false })
.then(result => {
console.log(result)
var timelineGroups = result;
var activeSections = [];
timelineGroups.forEach(function (timelineGroup, index) {
var sectionName = 'Section' + index;
activeSections.push(sectionName);
timelineGroup.sectionName = sectionName;
});
this.activeSections = activeSections;
this.timelineGroups = timelineGroups;
})
.catch(error => {
this.isLoaded = false;
this.error = error;
this.showToast(this.error, 'Error')
});
}
handleClick(e) {
this.template.querySelector('c-activitylineitem').expandAllNode();
}
Child HTML
<template>
<li>
<div class={itemStyle}>
<span class="slds-assistive-text">{item.activityTimelineType}</span>
<div class="slds-media">
<div class="slds-media__figure">
<button class="slds-button slds-button_icon" title={title} onclick={toggleActivityDetail}>
<lightning-icon icon-name="utility:switch" size="x-small"
class="slds-button__icon slds-timeline__details-action-icon">
</lightning-icon>
</button>
</div>
</div>
</div>
</li>
</template>
Child JS
get itemStyle() {
return this.showDetails ? "slds-timeline__item_expandable slds-is-open" : "slds-timeline__item_expandable";
}
@api
expandAllNode() {
this.showDetails = !this.showDetails;
}