AutoFocus when external event is affecting grid state (e.g. filtering)

[Karol Januszczak]

Dear Syncfusion Team,

In my app there are multiple cross-component events that are allowing to re-fetch data with changed state.

E.g: Click on scheduler -> it's send filtering data to Grid -> state of Grid is updated (filtering) -> Grid automatic applies that, refetches and displays new data.

The problem is that whenever table is getting new state (by code and externally) - somewhere after dataBound event is triggered - Table is 'stealing' focus from the interacted component (e.g. Scheduler from the example above) - (so document.activeElement in dev tools shows first cell of table, not the sheduler cell/task I've clicked with mouse)

I couldn't find a built in way to disable autoFocus in table - would be great to have such an option (or maybe there is some clean-code workaround?)

Best regards,
KJ

[Aishwarya Rameshbabu]

Hi Karol Januszczak,

Greetings from Syncfusion support.

Based on the provided information, it has been noted that you are experiencing an issue where the focus is not maintained on the component from which the Grid's filtering is initiated. We have developed a simple example using the shared details, where the Grid filtering is triggered during the cellClick event of the scheduler component. In this example, the filtered data is shown in the Grid, and the focus remains within the input element of the scheduler component. The focus does not move to the first cell of the Grid. We were unable to replicate the reported issue

Please refer to the sample below and the attached video demonstration for further details.

Sample: Kcapworb (duplicated) - StackBlitz

Video Demonstration: Please find in the attachment. 

If you continue to encounter any issues, please provide the following details.

Complete Grid Code:

    Share the complete code used to render the Grid and the Scheduler components, including all event handlers, templates, or any other customizations you have implemented.

Filtering on Grid:

    Kindly provide details on which event initiates the filtering of data on the Grid, and include the relevant code.

Data Binding:

    Specify whether the Grid is utilizing local or remote data binding. In the case of remote data binding, kindly provide detailed information regarding the adaptor configuration.

Syncfusion Package Version:

    Specify the exact version of the Syncfusion package you are currently using.

Sample and Video Demonstration:

    Please provide a simplified sample that replicates the reported issue or attempt to reproduce the issue using the sample provided. Additionally, include the video demonstrating the issue replicating process. 

Providing these details will enable us to conduct a comprehensive analysis and deliver a more precise resolution.

 

Regards,

Aishwarya R

Attachment: 197946VideoDemo_d8427770.zip

[Karol Januszczak]

Hello,

Thanks for feedback - based on the sample I've prepared a scenario which fits to our flow:
When receiving events
- do not filter directly 

- update filtering settings in grid 

Clicking on event - set filter

Clicking on cell - remove filter

In both cases - after click is done - focus is moved to grid (pressing Tab just after click shows you where the focus is - so first cell in table)

https://stackblitz.com/edit/angular-ap8yudd7-fk6w253t?file=src%2Fapp.component.html,src%2Fapp.component.ts,src%2Fdata.ts

I will be grateful to consider that,

Best regards,

KJ

[Aishwarya Rameshbabu]

Hi Karol Januszczak,

Thank you for providing the sample.

To maintain focus within the Scheduler component following an update to the Grid’s filter settings, we recommend utilizing a combination of both the beforeDataBound and dataBound events:

beforeDataBound: To capture the element that currently holds focus prior to the Grid initiating the data binding process.

dataBound: Restore focus to the previously recorded element, thereby ensuring that the Grid does not shift focus to its initial cell.

Please refer to the below code example and sample for more information.

App.component.html 

 

          <ejs-grid id="Grid" #gridObj [dataSource]="data" width="450px" height="100%" cssClass="drag-grid" [allowSelection]="true"  

            allowFiltering="true" [allowPaging]='true' (beforeDataBound)="beforeDataBound($event)" (dataBound)="dataBound($event)">

                  ........................

          </ejs-grid>

App.component.ts 

  beforeDataBound(args) {

    // To capture the current focused element

    this.lastFocusedElement = document.activeElement;

  }

  dataBound() {

    if(this.lastFocusedElement) {

      // To set focus to the captured element

      setTimeout(() => this.lastFocusedElement.focus(), 10);

    }

  }

Sample: Kcapworb (duplicated) - StackBlitz

API References: beforedatabound, databound

 

Regards,

Aishwarya R