Filtering in Grid has some unexpected behavior

[Gerhard Boer]

Hello,

When the default filtering is used in the Grid, and multiple columns are filterable an old value is used when the user uses TAB to go to the next field instead of pressing enter first.

So when a user has a filter value filled in column 1 and presses enter, the grid is filtered on that value.

when the user changes the value of column 1, then uses TAB or the mouse to go to next field (without pressing enter first), filles in a value in filter column 2 and presses enter, the value from the first column is reset to the previous value.

I've noticed in the code: Filter.js, in the keyUpHandler around line 623 the filtering explicitly ignores the TAB key (keyCode = 9).

Is there a specific reason for this?

In the case as i've described it, it leads to unwanted behavior.

i've made a workaround that when the filter input throws the blur event, i hack an "enter" event and call a private method on the grid to have it filter on that value.

Maybe an extra option, next to enter and "immediate" would be a good addition.

[Magesh Sabapathi]

Hi Gerhard , 

 

Greetings from syncfusion support 

 

Query : Filtering in Grid has some unexpected behavior. 

 

We have analyzed your query. By default in filtering, the datas in filter bar got filtered and saved once you press the enter key. But in your query you have just written the data in the filter bar (without enter key pressed) and filter the another columns that leads to show the previous filter data. This will happen because the entered value got not saved. So to overcome from this we suggest to use the “Immediate” mode in the filterSettings. This will make the filtering to be happened while you entering the data. This will retain in the filter bar even when you do the filtering in another column. 

 

In the below attached sample. We have used the immediate mode and also set the immediate mode delay to 15. This delay can altered based on your need. Please refer the code snippet and sample. 

 

App.component.ts 

 

import { Component, OnInit, ViewChild, Inject } from '@angular/core'; 

 

@Component({ 

    selector: 'app-root', 

    template: `  <ejs-grid #grid [dataSource]='data' allowPaging='true' allowFiltering='true' [filterSettings]="filteroptions" [pageSettings]="pageOptions"> 

        </e-columns> 

    </ejs-grid>`, 

}) 

export class AppComponent { 

    public filteroptions: Object; 

    public category: string[]; 

     

    public ngOnInit(): void { 

        this.data = categoryData; 

        this.pageOptions = { pageSize: 10, pageCount: 5 }; 

        this.filteroptions = { mode : 'Immediate', immediateModeDelay: 15};    // modeDelay can be changed  based on your need 

    } 

 

} 

 

Sample : https://stackblitz.com/edit/angular-1fsqhe-ihsdrz?file=app.component.ts 

Please get back to us if you need further assistance 

Regards 

Magesh 

[Gerhard Boer]

Hello,

The proposed solution with immediate also gives unexpected behavior when using the TAB key to go to the next field.

If you use the same steps as i described in the initial post, use TAB to switch to another field and have immediate to a low value (<25), then as you are typing in the new field the focus suddenly changes to the initial field.

This sudden behavior is very annoying for the user

[Ajith Govarthan]

Hi Gerhard, 

Query : Filtering in Grid has some unexpected behavior. 

We have validated your query and confirmed it is bug and logged defect “Focus not maintained with tab navigation in filterbar” report for the same. At Syncfusion, we are committed to fixing all validated defects (subject to technological feasibility and Product Development Life Cycle ) and including the defect fix in our upcoming weekly release which is expected to be rolled out  after the Volume 1 Release  on or before April 1, 2020. 

 

You can now track the current status of your request, review the proposed resolution timeline, and contact us for any further inquiries through this link.  

 

Feedback Link : https://www.syncfusion.com/feedback/12787/focus-not-maintained-with-tab-navigation-in-filterbar 

Till then we appreciate your patience. 

Regards, 

Ajith G.