We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Adding chips into the grid

Is there a good example to see how to add removable chips into the grid or ideally pivotview?


3 Replies

AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team December 15, 2022 09:36 AM UTC

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.




AL Alex Lyashok December 15, 2022 07:54 PM UTC

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?



AP AngelinFaithSheeba PaulvannanRajadurai Syncfusion Team December 16, 2022 01:28 PM UTC

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:

gridSettings: {

    rowHeight: 60,

    columnWidth: 175,

}

 

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

 

Video: https://www.syncfusion.com/downloads/support/directtrac/general/ze/16.12.2022_13.08.23_REC.mp4-180588495

 

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.


Loader.
Live Chat Icon For mobile
Up arrow icon