Updating a Kendo grid loses focus in components in other windows

1 Answer 35 Views
Grid
Elodie
Top achievements
Rank 1
Elodie asked on 03 Jun 2021, 11:05 AM

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

 

1 Answer, 1 is accepted

Sort by
0
Georgi Denchev
Telerik team
answered on 08 Jun 2021, 09:57 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
Grid
Asked by
Elodie
Top achievements
Rank 1
Answers by
Georgi Denchev
Telerik team
Share this question
or