Chips - or tags - on Grid

[Christian DAquino]

Hi,

I have a column on my grid that I'd like to render the words as if they where tags - or chips - and even filter them based on those tags. Is there a way to accomplish that?

[Shalini Maragathavel]

Hi Christian, 

Greetings from Syncfusion support. 

Before we proceed with your query, we need the following details 

1. Do you need render column data as chips or tags based on column data values? 

2. Do you need to perform filtering operation on chips and tags? 

3. Syncfusion Package Version. 

If the above details does not meet your requirement, please elaborate on it with more details based on that we will check from our end and provide the further details. 

Let us know if you have any concerns. 

Regards, 

Shalini M. 

[Christian DAquino]

Hi Shalini,

1. Do you need render column data as chips or tags based on column data values?

I am using the words chips and tags interchangeably here. But checking the syncfusion library, I guess it would be more appropriate to call it as chips. I'm referring to something like this: https://ej2.syncfusion.com/vue/documentation/chips/getting-started/

2. Do you need to perform filtering operation on chips and tags? 

I am using excel style filters. I'd like to have the chips to be rendered as select boxes on the excel style filter, which the users can select from the chips he/she wishes to filter.

3. Syncfusion Package Version.

    "@syncfusion/ej2": "^18.2.56",

    "@syncfusion/ej2-base": "^18.3.40",

    "@syncfusion/ej2-buttons": "^18.3.40",

    "@syncfusion/ej2-data": "^18.2.54",

    "@syncfusion/ej2-dropdowns": "^18.2.59",

    "@syncfusion/ej2-vue-base": "^18.3.40",

    "@syncfusion/ej2-vue-buttons": "^18.2.54",

    "@syncfusion/ej2-vue-dropdowns": "^18.2.56",

    "@syncfusion/ej2-vue-gantt": "^18.3.40",

    "@syncfusion/ej2-vue-grids": "^18.2.56",

    "@syncfusion/ej2-vue-inputs": "^18.2.59",

    "@syncfusion/ej2-vue-popups": "^18.2.54",

[Shalini Maragathavel]

Hi Christian, 

Thanks for the update. 

Based on your requirement we suspect that you need to render the Syncfusion EJ2 chips in the column. To achieve your requirement we can use columnTemplate feature of EJ2 Grid and in column template feature we have options to display the custom element instead of a field value in the column.  

Using columnTemplate feature we can render the chips in the column based on the field value. In your update you also mentioned that you need to render the chips as select checkboxes in the excel style filter. By default in EJ2 Grid the excel filter is works like the Microsoft Excel filter, so it is not feasible to display the chips as checkboxes in the excel filter. 

So, please confirm that can we provide the sample using columnTemplate feature to render the chips in the column. 

Regards, 

Shalini M. 

[Christian DAquino]

Hi Shalini,

Yes, rendering through the templates is feasible. Please provide a sample. And I guess I can still use the search feature of the excel filter to search for key works.

Thanks.

[Thiyagu Subramani]

Hi Christian, 

Thanks for your update. 

Based on your requirement we have prepared sample with rendering chips control using column template property. Please refer to the below code, screenshot and sample link. 

<e-column field="CustomerID"  headerText="Customer ID" textAlign="Left"  :template="cTemplate" width="180"></e-column> 

cTemplate: function () { 

        return { 

          template: Vue.component("columnTemplate", { 

            template: `<ejs-chiplist id="chip" :text=CustomerID></ejs-chiplist>`, 

            data: function () { 

              return { 

                data: {}, 

              }; 

            }, 

            computed: { 

              CustomerID: function (args) { 

                return this.data.CustomerID; 

              }, 

            }, 

          }), 

        }; 

      }, 

Sample link: https://codesandbox.io/s/vue-template-forked-qvvfm 

Screenshot:  

 

Documentation : https://ej2.syncfusion.com/vue/documentation/grid/columns/#column-template 

Note : By default Sorting/Filtering performs based on field name of the column which is specified in the dataSource. 

Please get back to us, if you need any further assistance. 

Regards, 

Thiyagu S. 

[patil yashwanth]

Hi Shalini / subramani,

im using ejs grid and for a table and there are add,edit,save,delete,options in that 

i need to change a column for chips  like e-chips which should take input from user and convert them to chips and display in the column value there ,

i tried e chips but i cant find anything for giving input to chips dynamicall from ui 

please provide me a sample to have a column for chips in a ejs grid 

thankyou

[Rajapandiyan Settu]

Hi Patil, 

 

Thanks for contacting Syncfusion support. 

 

By using columnTemplate feature, you can display the cell value using the chip component. 

 

columnTemplate: https://ej2.syncfusion.com/vue/documentation/grid/columns/column-template/ 

Edit: https://ej2.syncfusion.com/vue/documentation/grid/editing/edit/#toolbar-with-edit-option 

 

Screenshot #1: Showing the cell value with Chip Component 

 

 

While editing a record, we rendered the input element to edit the column. Here you can change the value as you want. 

 

Screenshot #2: Edit the column through the input element 

 

 

Once the save action done, the updated value will be shown in chip component. 

 

Screenshot #3: Shown the updated value in the Chip Component 

 

 

Find the below sample for your requirement. 

 

Sample: https://codesandbox.io/s/vue-template-forked-gno97t?file=/src/App.vue 

 

If this does not meet your requirement, kindly explain it with video demo to provide a better solution. 

 

Regards, 

Rajapandiyan S