Is there a good example to see how to add removable chips into the grid or ideally pivotview?
Hi Alex,
Using queryCellInfo and dataBound events, you can create and add Chip component inside the cells of the Pivot Table. Please refer the below code example.
Code example:
gridSettings: { queryCellInfo: function (args) { var colIndex = Number(args.cell.getAttribute('data-colindex')); if ( args.data && args.data[colIndex] && args.data[colIndex].axis == 'row' && args.data[colIndex].actualText == 'France' ) { // Here created a div element in the first row header cell to render chip component. var div = document.createElement('div'); div.id = 'chip'; args.cell.appendChild(div); } }, }, dataBound: function (args) { // Here the chip component created for the created div element. new ej.buttons.ChipList( { chips: ['Janet Leverling'], enableDelete: true }, '#chip' ); }, |
Meanwhile, we have prepared a sample for your reference.
Sample: https://stackblitz.com/edit/rvnorn-jdq9d3?file=index.js,index.html
Output Screenshot:
To know more details about “queryCellInfo” event, refer the following documentation.
Document: https://ej2.syncfusion.com/javascript/documentation/pivotview/row-and-column/#querycellinfo
Please let us know if you have any concerns.
Regards,
Angelin Faith Sheeba.
Thank you.
1) How do i have the pivot update layout so that cell renders with enough room for chips?
2) When i call refreshData on pivot, chips disappear. Do they need to be created onDataBound or how to make them stick?
Hi Alex,
Please find the response below:
Query |
Comments |
|
How do i have the pivot update layout so that cell renders with enough room for chips? |
Using the rowHeight and columnWidth properties, you can adjust the row height and column width to render the chip inside the value cells in the pivot table. Please refer the below code example.
Code example:
Output screenshot:
|
|
When i call refreshData on pivot, chips disappear. Do they need to be created onDataBound or how to make them stick? |
We have checked the reported issue and we are unable to reproduce it at our end. Please refer the below sample and video.
Sample: https://stackblitz.com/edit/rvnorn-l7hnyr?file=index.js,index.html
If the problem persists, please reproduce it in the provided sample and revert to us (or) send your sample that replicates the problem. This would allow us to investigate the reported problem at our end and provide a solution as soon as possible.
|
Please let us know if you have any concerns.
Regards,
Angelin Faith Sheeba.