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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Filtering on column template

Thread ID:

Created:

Updated:

Platform:

Replies:

143873 Apr 8,2019 07:35 PM UTC Apr 10,2019 07:06 AM UTC Vue 3
loading
Tags: Data Grid
Rebecca Wyman
Asked On April 8, 2019 07:35 PM UTC

How can I use column filtering on a column that uses a column template?  I have a grid that uses templates to display multiple fields in one cell, for example Contact Name, Phone Number and Email.  I would like to use column filtering, but default filtering is a disabled text box.  I've tried writing a custom filter and using a filterBarTemplate.  Neither the Filter or the FilterBarTemplate even call the create method.

I've attached my grid and the typescript code for both my Filter and FilterBarTemplate.



Attachment: examples_cb6bd0b1.zip

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 9, 2019 09:37 AM UTC

Hi Rebecca, 

Greetings from Syncfusion support. 

We have analyzed your requirement. Based on your requirement, we have prepared a sample for your convenience, please refer the link below, 

We suggest you to set the “field” property for the template column. To bind a filter bar template, please refer the documentation link below, 

 
    template: ` 
    <div id="app"> 
        <ejs-grid id="Grid" ref="grid"  :dataSource="data" :allowFiltering='true' height='273px'> 
            <e-columns> 
                … 
                <e-column field='CustomerID' :template='cTemplate' width=120 :filterBarTemplate='templateOptions'></e-column>    //Specify the field property for template column. 
            </e-columns> 
        </ejs-grid>  
    </div> 
`, 
 
        data() { 
        return { 
            cTemplate: function () { 
                return { 
                    template: Vue.component('columnTemplate', {           //Template containing values of multiple columns 
                        template: `<table><div>CustomerID : {{data.CustomerID}}</div><br> 
             <div>ShipCity : {{data.ShipCity}}</div><br> 
             <div>ShipCountry : {{data.ShipCountry}}</div></table>`, 
                        data: function () { 
                            return { 
                                data: {} 
                            } 
                        }, 
                    }) 
                } 
            }, 
            data: data, 
            templateOptions: { 
                create: function (args) { 
                    elem = document.createElement('input'); 
                    return elem; 
                }, 
                write: function (args) { 
                    dObj = new DropDownList({      //Bind the dropdown list to filter bar 
                        dataSource: data, 
                        fields: { text: "CustomerID" }, 
                        change: function (args) { 
                            var selVal = args.value; 
                            var grid = document.getElementById('Grid').ej2_instances[0]; 
                            grid.filterByColumn("CustomerID", "equal", selVal);     //Perform filter for the template column. 
                        } 
                    }); 
                    dObj.appendTo(elem); 
                }, 
            } 


Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


Rebecca Wyman
Replied On April 9, 2019 04:27 PM UTC

I was able to get that work, thank you.


I do have another question about filtering.  How can I hide the filter for certain columns?  For instance my grid has a command column and I would like to hide the filter option for that column.  It is disabled because it's not bound to a field, but being able to hide it would be better.  Thank you.

Thavasianand Sankaranarayanan [Syncfusion]
Replied On April 10, 2019 07:06 AM UTC

Hi Rebecca, 

You can hide the filter bar cell for the particular column by using the “created” event of Grid component. In the “created” event handler you can fetch the element and hide that element. We are attaching the modified sample from our previous update, please find the sample link below, 
 
Please find the code example below, 
  
template: `  
    <div id="app">  
        <ejs-grid id="Grid" ref="grid" :created=created  :dataSource="data" :allowFiltering='true'>  
            ...  
        </ejs-grid>   
    </div>  
`,  
.  .  .  
  },  
  methods:{  
     created: function(e) {  
       this.$refs.grid.ej2Instances.getHeaderTable().querySelector(".e-filterbarcell div").style.display = "none"   
    },      
  },  


 
Please get back to us if you need further assistance. 

Regards, 
Thavasianand S. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon