Updating a Kendo grid loses focus in components in other windows

[Elodie]

Hello,

 

I have a dashborard including widgets built with IFrame. I have a widget that contains a Kendo grid with a number of data.

If I have the focus in a field of a form in a widget other than the one containing the Kendo grid, when refreshing the Kendo grid, the focus is lost and it is the grid that takes over the focus. For example, if I open a drop-down list in a form present in a widget (defined in an Iframe), when the Kendo grid (defined in another widget, therefore another IFrame) updates, the drop-down list where I was closes automatically following the loss of focus. Is this behavior known? How can I prevent an update to the Kendo grid from losing focus in other components?

The grid updates very regularly when new data needs to be added (with a simulator, updates are done approximately every 2 seconds).

When new data comes in I completely replace the list (no differential) and use Util.getGrid (). DataSource.read (); This will call the read () method defined in in the transport option.

const dataSource: DataSource = new DataSource(
                    {
                        autoSync: true,
                        schema: this.$scope.schema,
                        pageSize: this.$scope.pageSize,
                        transport: {
                            read: (datas: kendo.data.DataSourceTransportOptions): void => {

                                    [some code]

                                     datas.success(this.$scope.items);  
                            }
                        },
                        serverFiltering: true,
                        serverSorting: true,
                        serverGrouping: false,
                        serverPaging: true,
                        sort: this.$scope.defaultSort,
                        filter: this.$scope.filters,
                        group: groupList,
                        requestStart: (e: kendo.data.DataSourceRequestStartEvent): void => {
                            setTimeout((e: JQuery): void => {
                                $(".k-loading-image").hide();
                            });
                        }
                    }
                );

I am using Kendo version v2019.3.1023

Thanks

 

[Georgi Denchev]

Hi, Elodie,

Thank you for the provided snippet.

Generally speaking the Grid shouldn't be taking the focus from another widget, however the usage of an iframe might affect the behavior in some way. It is difficult to determine what the problem could be without a runnable code sample. You could try to refocus the previous component inside the grid's dataBound event as a workaround.

There are some threads around the internet which discuss different situations where the iframe steals the focus, you can review them and see if they give you any ideas for an alternative solution.

Thread 1 and Thread 2.

Best Regards,
Georgi Denchev
Progress Telerik