Event listener implementation for IE browser

Progress® Telerik® UI for ASP.NET MVC Feedback Portal

Create an account Log In

Back to Feed

Request a Feature Report a Bug

Declined

Last Updated: 12 Feb 2020 11:50 by ADMIN

Sudipto

Created on: 20 Nov 2018 13:19

Category: Chart

Type: Feature Request

Event listener implementation for IE browser

Background:

In our project, there's a newly revamped application and Kendo UI has been used for first time.

The Home page of our application has a bar graph and a donut graph.

I am from Test Automation team and run OpenTest-Selenium tests on Chrome and IE browsers.

The problem described below applies to both, so to keep it simple I will describe for only the bar graph.

Reference isolated application:

https://demos.telerik.com/kendo-ui/bar-charts/column

Problem Description Title: UI based automated tests run on Chrome succeed, but fail on IE for Kendo Bar Chart

Troubleshooting performed: In both browsers, we looked for the click event using the Browser Inspector

Observation: The click event is present in Chrome, but not in IE

I found an article in your site:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/performance#using-fast-browsers

Is this the reason that you've no exposed this event specifically in IE?

(My understanding from this is that the Click event can be exposed, but is currently not done in the interest of performance).

Could you share any data on what is the slowness with how much data, so I could share it with our Dev team.

Because the number of bars in our application is only 4 (always) and volume of data gets reflected in the height of the bars.

Thanks,

Sudipto.

7 comments

ADMIN

Alex Hajigeorgieva

Posted on: 07 Dec 2018 08:30

Hello, Sudipto,

The events are attached to the wrapper element, not on the SVG of the Kendo UI Chart.

Unfortunately, the IE Developer tools UI is limited to only showing events for the elements which are currently selected. This is the way Microsoft designed the browser developer tools and as it looks like from their documentation, IE will not be enhanced in any way in the future.

The only way to break at the click event in IE is by attaching a conditional breakpoint:

There are various resources on the Internet which demonstrate how to debug with IE, like this :

https://raygun.com/blog/debug-javascript-internet-explorer/

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Sudipto

Posted on: 04 Dec 2018 04:44

Hi Alex,

I tried with the current selection method but still am unable to see the events on SVG elements.

The events are visible for the non-SVG elements though.

Is it possible to show the events for selected SVG element, in IE?

Best Regards,

Sudipto.

Attached Files:

ADMIN

Alex Hajigeorgieva

Posted on: 03 Dec 2018 13:39

Hello, Sudipto,

The Microsoft documentation states that the Events tab shows the events attached to the currently selected element only and Kendo UI has no way of influencing the IE11 tools UI:

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/dn255008(v%3dvs.85)#events

I had a look at the Microsoft documentation whether or not it is possible to show all of the events at all times like in Chrome, however, the Developer Tools of IE 11 do not seem to have such settings at all. In Edge, Microsoft has implemented an "ancestors" checkbox. Looking at the Microsoft documentation for Edge, I believe that they are only going to push security updates from now on so I am doubtful if the Dev tools in IE will receive any upgrades in the future:

https://developer.microsoft.com/en-us/microsoft-edge/platform/faq/

Will Internet Explorer 11 continue to receive updates?

- The latest features and platform updates will only be available in Microsoft Edge. We will continue to deliver security updates to Internet Explorer 11 through its supported lifespan. To ensure consistent behavior across Windows versions, we will evaluate Internet Explorer 11 bugs for servicing on a case by case basis.

However, it is for Microsoft to say if they will make any changes.

In case you have any issues that you would like to report to us, please advise how to reproduce it, otherwise, in IE 11, it seems that you can count on the events debugging tool as described in the Microsoft documentation.

https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/samples/dn255007%28v%3dvs.85%29#setting-and-managing-breakpoints

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Sudipto

Posted on: 30 Nov 2018 17:07

Hi Alex,

In the SVG elements in our application, the xpaths are having several levels of nodes in the node hierarchy:

//*[@id="chart"]/svg/g/g[3]/g/g[4]/path[1]

(In test automation, we use a different style of xpaths, but the above one is an illustration of the levels that are present)

Now in the Chrome browser, each of these levels show several events in the event listener tab of Chrome Browser's inspector.

I would like to understand if the same events are available in IE but IE's browser Inspector is not showing it, or are these events not implemented at all for each of these levels of nodes. Because the manual click is working successfully, I would like to think that these events are present in the background. Are there any accessibility APIs that need to be implemented specifically for these events to become visible in IE Browser Inspector?

Best Regards,

Sudipto.

ADMIN

Alex Hajigeorgieva

Posted on: 29 Nov 2018 10:43

Hello, Sudipto,

The IE developer tools work in a different way than the Chrome tools. If you hover over the Events tab in IE, you will see that the inspector only shows events of the currently selected element.

Therefore, if you want to see the event handler in IE, select the Kendo UI Chart element:

More about the Kendo UI widgets element is available at:

https://docs.telerik.com/kendo-ui/intro/widget-basics/wrapper-element

Kind Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

Sudipto

Posted on: 28 Nov 2018 12:13

Hi Alex,

Thanks for sharing the data.

The click event is working fine when we manually click on the chart - it opens the next page/popup page.
However, upon inspecting with browser, the event is showing up in Chrome Inspector, but not in IE Inspector.
(Please refer attached screen snaps of Inspector on either browser)

For IE, is there any way we can publish the event to browser inspector?

Thanks,
Sudipto.

Attached Files:

ADMIN

Alex Hajigeorgieva

Posted on: 27 Nov 2018 10:39

Hello, Sudipto,

The Kendo UI Chart has the following click events and they are triggered in all browsers:

The performance article that you can check is the one for the Charts at:

https://docs.telerik.com/kendo-ui/controls/charts/troubleshoot/performance-tips

However, four bars is very very few and will never cause any performance issues. We have a benchmark demo that you can check with a huge amount of data and constant updates to get an idea of the benchmark:

https://demos.telerik.com/kendo-ui/chart-api/benchmark

Let me know in case you need further information.

Regards,
Alex Hajigeorgieva
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.