Custom Filter template

[Wilma Hill]

Hello,

Could you help me how to create filter template using ng-template such that the filter UI will be in checkbox.

Requirement: Filter in column by checkbox filter and filter is value is fullName array.

code is:

fullName=["Chris Bryan","Elen Cruise","Marie Clark"] i need to show checkbox this particual column only and other column is menu bar

exceptionFilterTemplate>
[dataSource]="FullName" > 

="false" field='firstname' headerText='Exception' textAlign='right' width=250 [filterTemplate]="exceptionFilterTemplate">

[Manivannan Padmanaban]

Hi Wilma, 

Thanks for the patience. 

We have achieved your requirement using column filter property, please refer the below code example and sample link 

       <ejstreegrid #treegrid [dataSource]='data' allowPaging='true'  [allowFiltering]='true' [filterSettings]="filterSettings" ……> 

          <e-columns> 

………………….. 

                      <e-column field='taskName'  [filter] = 'filter' headerText='Task Name' textAlign='Left' width=150> 

                      </e-column> 

………………. 

          </e-columns> 

                  </ejs-treegrid> 

    </div> 

  </div> 

export class AppComponent { 

    ……….. 

    public filterSettings: Object; 

    

    public filter : IFilter; 

 

    constructor() { 

         

    } 

 

    ngOnInit(): void { 

……………….. 

        this.filterSettings = { type: 'Menu', hierarchyMode: 'Parent' }; 

        this.filter = { 

            type : 'CheckBox' 

        } 

    } 

} 

Sample Link - https://stackblitz.com/edit/angular-k7mppp-av6rnf  

Also refer the below API  and documentation links, 

https://ej2.syncfusion.com/angular/documentation/api/treegrid/column/#filter 

https://ej2.syncfusion.com/angular/documentation/treegrid/filtering/#enable-different-filter-for-a-column 

Regards, 

Manivannan Padmanaban. 

[Wilma Hill]

Hello Manivannan,

1.creating custom template using ng-template. 

2.using that template as filter template which is type checkbox for only one column

In treegrid, filterSetting for other column is menu.

[Farveen Sulthana Thameeztheen Basha]

Hi Wilma, 

Query#:- using that template as filter template which is type checkbox for only one column 

We have checked your query and in previous update, we have provided solution as per expected scenario. By default we have the default filter property in the columns, So that we can specify the requirement type as per our requirement.  

Refer to the code example:- 

export class AppComponent {  

    ………..  

    public filterSettings: Object;  

     

    public filter : IFilter;  

  

    constructor() {  

          

    }  

  

    ngOnInit(): void {  

………………..  

        this.filterSettings = { type: 'Menu', hierarchyMode: 'Parent' };  

        this.filter = {  

            type : 'CheckBox'  

        }  

    }  

}  

Screenshot:- 

 

In this we have render the filterDialog with type Checkbox for TaskName column and for other columns we have displayed it as Menu. 

If your requirement is different from the above solution, please share the detailed Explanation/Screenshot of your requirement so that we can provide you solution accordingly. 

Regards, 

Farveen sulthana