Hi
How can i do that add show more button where bottom of the each kanban column?
Hi Yahya,
Greetings from Syncfusion support.
Using the below custom sample, we were able to meet your requirements. We rendered the button bottom on each cell using the dataBound event. We have bound the click event for each button. Please find the below code for your reference.
Index.js
|
dataBound() { if (this.firstRender) { // Allowed when initial rendering alone const contentRows = this.kanbanObj.element.querySelectorAll('.e-content-row'); let i = 0; contentRows.forEach((contentRow, index) => { if (!contentRow.classList.contains('e-swimlane-row')) { [].slice.call(contentRow.children).forEach((cell) => { // Get each cell const element = createElement('button', { // Create button className: 'e-btn', innerHTML: 'Show More', });
cell.appendChild(element); element.onclick = this.addClick.bind(this); // Bind click event }); } }); this.firstRender = false; } } addClick() { console.log('Button clicked'); }
render() { return ( <div className="control-wrapper"> <KanbanComponent dataBound={this.dataBound.bind(this)}>……… </KanbanComponent> </div> ); } |
Sample: https://stackblitz.com/edit/react-deadbm?file=index.js,index.html
API link: https://ej2.syncfusion.com/react/documentation/api/kanban/#databound
Regards,
Buvana S
Thank you so much sir.
Thanks for your update. Please let us know if
you need any further assistance.
