Excel filtering

Question

Hi,Could you help me how to filter the column value according to selected value.I have id          Alphabets      1.             Aa Bb AA2.              Cc dd DDAlphabets column have filter .What I need is when selecting dd then it should show like thisid          Alphabets     2.            dd Thank you and I await,Willima Hill

Gowri Loganathan · Answer

Hi Wilma, 
 
Thanks for using Syncfusion Products  
 
Query # :  How to filter the column value according to selected value. 
 
We are quite unclear about your query. 
 
Please share us the below details which will be very helpful for us to proceed further. 
 

Confirm whether you use EJ2 Grid or TreeGrid.
When you use excel filtering in TreeGrid, while perform filter operation in the checkbox list complete column data are shown. In this case how can you select the specific letters (eg: dd) only from (eg: CC dd DD). If you use any custom filter or you change the default operator to “contains”, kindly share us the complete code snippet.
Also Kindly explain your requirement in detail.
 
Regards, 
Gowri V L.

Wilma Hill · Answer

Hi Gowry,Thanks for the replythis is my html file

e-column> e-column>

{{passSub.code}} span> ng-template> e-column>

{{failSub.code}} span> ng-template> e-column> e-columns>ejs-treegrid>this is .ts file dataSource:Object[]=[]; excelFilter:IFilter; @ViewChild('treegrid') public treeGridObj: TreeGridComponent; public editSettings: EditSettingsModel = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: "Cell", showConfirmDialog: true }; public filterOptions: FilterSettingsModel = { type: "Menu", ignoreAccent: true, showFilterBarStatus: true, mode: "Immediate" }; ngOnInit(): void { this.getTableData(); this.excelFilter={ type:"Excel", } } ngAfterViewInit(): void { this.treeGridObj.created.subscribe((e) => { this.getTableData(); }); } getTableData(){ this.dataSource=studentData; }}const studentData=[ { id:001, name:"abc", passSubjects: [ {id:1, name:"english", code:'ENG', }, {id:5, name:"math", code:'MAT', }, {id:6, name:"science", code:'SCI', }, ], failSubjects:[ {id:2, name:"economic", code:'ECO', }, {id:3, name:"principle of management", code:'POM', }, ] }, { id:002, name:"abc", passSubjects: [ {id:1, name:"english", code:'ENG', }, {id:2, name:"economic", code:'ECO', }, {id:3, name:"principle of management", code:'POM', }, {id:6, name:"science", code:'SCI', }, ], failSubjects:[ {id:5, name:"math", code:'MAT', }, ] }, { id:003, name:"abc", passSubjects: [ {id:1, name:"english", code:'ENG', }, {id:5, name:"math", code:'MAT', }, {id:6, name:"science", code:'SCI', }, {id:2, name:"economic", code:'ECO', }, ], failSubjects:[ {id:3, name:"principle of management", code:'POM', }, ] },]Requirements:Display column with code of pass subject and fail subject .While filtering the column should contain name of subject for user to select.When choose name then its should display its respective code only and other if column contain then not showing.Multiple filtering can be done .RegardsWilma Hill.

Gowri Loganathan · Answer

Hi Wilma, 

Thanks for the details. 
Query # :  How to filter the column value according to selected value.   
  
While analyzing your code snippets we could see that you have used multiple array of objects for the fieldName (passSubjects and failSubjects). Using ngFor we can display the multiple array of objects in the same cell but we are unable to perform the data operations. In TreeGrid , we don’t have support for performing data operations when we use multiple array of objects in the same cell. 
  
Kindly get back to us, if you need further assistance from us. 

Regards, 
Gowri V L

Wilma Hill · Answer

Hi Gowry,Thank for the informationI like to know when using checkbox filter how to know which values are selected and i need to store the selected values in array.checkbox filter UI has following option1.select All2. A3 B4.C5. BlankProblem:when selected A,B  I get the desired output [A,B] but when selecting A,B,C then the selected value is undefined so I cannot save them in array . Note:value A,B,C are dynamic .I am using  Treegrid .I need to store the user selected value of filter UI in array .

Gowri Loganathan · Answer

Hi Wilma, 
 
Thanks for the update. 
 
Query :How to get the user selected values in filter check box 
 
We have analysed your query at our end and we have achieved your requiremnet using actionBegin event of TreeGrid. In this event when requestType is “filtering” we get the user selected values from the arguments and stored it in the array and also we have emptied the selected value array while perform clear filtering using actionComplete event. 
 
Code snippet 
 




Component.html file 
<ejs-treegrid #treegrid [dataSource]='data' (actionBegin)="actionBegin($event)" (actionComplete)="actionComplete($event)" allowFiltering='true' [filterSettings]='filterSettings'> 
. . . . . . 
 
Component.ts file 
 
. . . . . . .  
export class AppComponent 
{ 
    public selectedValue: Object[] = []; 
    public data: Object[] = []; 
. . . .  . . .  
    } 
. . . . . .  
actionBegin(e:any)    //triggers when perform filtering 
{ 
    if (e.requestType === 'filtering') 
    { 
        for (let i: number = 0; i < e.columns.length; i++) { 
            this.selectedValue.push(e.columns[i].properties.value);  //store the selected values from filter checkbox here 
        } 
        console.log(this.selectedValue); 
 
    } 
} 
actionComplete(e:any) 
{ 
 
    if (e.requestType === 'refresh' && !this.treegrid.filterModule.filteredResult.length) 
    { 
        this.selectedValue =[];   //empty the selected values when clear filter 
        console.log(this.selectedValue);   
 
    } 
 
} 
. . . . . . .  
 
 
Please refer the below sample 
https://stackblitz.com/edit/angular-cknxgv-9yfz4j 
 
 
Kindly get back to us, if you need more assistance on this 
 
Regards, 
Gowri V L.

Wilma Hill · Answer

Hi Gowry,Thank I would like to ask if there any way to give field name defined in ts file in e-column.What I need is :in ts                                   in htmlfieldName=[a,b,c];             In treeGrid Component. While filtering option enable it should have available value a,b,c

Manivannan Padmanaban · Answer

Hi Wilma, 

Thanks for the update. 

We don’t have the support to use array value as field name.  

Regards, 
Manivannan Padmanaban.