Filter function on Grid does not work with complex data about ej2-javascript-ui-controls

[Pavithra15]

Hi @taysonvo,

We have checked your query and the cause of this behavior is the data remains with tag elements in dataSource. So when filtering Grid compares the given value with the data as in dataSource. This is the default behavior of Grid Filtering.

However, we have prepared a custom sample to achieve your requirement. In that sample, we have extended a Custom adaptor from JSONAdaptor to modify the default filtering (onWhere) method and used custom Filter UI (Essential JavaScript 2 TextBox) for the column having data with tag element. Please refer to the sample code, documentation link, and sample link.

[component.html]

<ejs-grid #grid [dataSource]='data' allowFiltering='true' [filterSettings]='filterSettings'>
        <e-columns>
            <e-column field='OrderID' headerText='Order ID' width='120' textAlign="Right"></e-column>
            <e-column field='CustomerID' headerText='CustomerID' [filter]= 'filter' width='120' format='C2' textAlign="Right"></e-column>
           .     .     .
        </e-columns>
    </ejs-grid> 

[component.ts]

class CustomFilterAdaptor extends JsonAdaptor {                       // CustomAdaptor extended from JsonAdaptor 
    public onWhere(ds: Object[], e: { validate: Function }): Object[] {
        if (!ds || !ds.length) { return ds; }
        return ds.filter((obj: Object) => {
            if (e) {
                let obj1 = Object.assign({}, obj);
                obj1['OrderID'] = obj1['OrderID'].replace(/<[^>]*>/g, '');       //replaces the tag elements of 
                return e.validate(obj1);                                                                              original data
            }
        });
    }
}
 @Component({
    selector: 'control-content',
    templateUrl: 'app.html'
})
export class DefaultComponent implements OnInit {
    public data: DataManager;
    public filterSettings: Object;
    public orderData = [{
       'OrderID': 10248,
        'CustomerID': '<a href="#">VINET</a>',
        'OrderDate': '1996-07-04T00:00:00.000Z',
        .    .    .
    },
    ];
    public ngOnInit(): void {
       this.data = new DataManager(this.orderData).executeLocal(new Query());
        this.data.adaptor = new CustomFilterAdaptor;
        this.filterSettings = { type: 'Menu' };
        this.filter = {
            ui: {
                create: (args: { target: Element, column: Object }) => {
                    let flValInput: HTMLElement = createElement('input', { className: 'e-input flm' });
                    args.target.appendChild(flValInput);
                },
                write: (args: {
                    column: Object, target: Element, parent: any,
                    filteredValue: number | string
                }) => {
                           if(args.filteredValue !=undefined){
                    (<HTMLInputElement>document.querySelector('.e-input.flm')).value = <string>args.filteredValue;
                }
                },
                read: (args: { target: Element, column: any, operator: string, fltrObj: Filter }) => {
                    args.fltrObj.filterByColumn(args.column.field, args.operator, (<HTMLInputElement>document.querySelector('.e-input.flm')).value);
                }
            }
        };
    }
}

Documentation : 1. http://ej2.syncfusion.com/angular/documentation/grid/databinding.html#custom-adaptor
2. http://ej2.syncfusion.com/angular/documentation/grid/filtering.html#custom-component-in-filter-menu

Sample : https://plnkr.co/edit/NMzihdjBkcbzz95ikPFi?p=preview

Regards,
Pavithra S.

[taysonvo]

Sorry, this is working fine now, pls ignore.

[taysonvo]

Hi supporters,

Im not sure why in plunker it working but in my code it doesnt work.
The issue is because of the querySelector('#OrderID.text_filterBarcell') is return null. Because the id content the '.'

Please show me how to fix that, or tell me which version of ej2 that the issue was resolved.

Many thanks

[Pavithra15]

Hi Taysonvo,

We have checked your query and the reported issue has been already fixed in our Essential JavaScript 2 release version 15.4.26. Please update your Essential JavaScript 2 packages to the latest version.

Regards,
Pavithra S.

[taysonvo]

Hi @Pavithra15 ,

Thanks for your answer but there is another issue :

If the value is containing the "a" tag with a href link like below screenshot then the filter will not working. Because the value that the grid understand now is including the "a" tag, href and the value, not only the value.

Should I open a new issue for that ?

Regards,
Son

[Pavithra15]

Hi @taysonvo ,

We have checked your query and could you please provide the below details that will be helping us to provide a better solution as early as possible.

1. Which type of filtering are you using, for example, filter menu or checkbox?
2. Are you using dataSource with tag elements?

Regards,
Pavithra S.

[taysonvo]

Hi @Pavithra15 ,

Sorry for very late response due to my long vacation. PSB my answers:

1. Filter type is "menu".
2. Yes, for example like below screenshot:
   

Regards,
Son