This is a migrated thread and some comments may be shown as answers.

Gauges don't always appear in the correct position after creation

7 Answers 146 Views
Gauges
This is a migrated thread and some comments may be shown as answers.
Jeff Benson
Top achievements
Rank 1
Jeff Benson asked on 17 Mar 2020, 07:47 PM

We are using both the radial and linear gauges in our own jQuery UI widget wrappers. These custom widgets are then added dynamically to a "canvas" window in our product. This had been working well until recently, when we noticed that sometimes the Kendo gauges would not always appear centered in their container divs. See the attached .PNG files for an example of a "misaligned" gauge, as well as the proper alignment.

When a gauge is misaligned, any small change to the browser window size will cause it to immediately "snap" into position. So, clearly the gauge is responding to some window message to reflow the page.

Our developers have spent a long time trying to solve the initial misalignment problems. We found that setting a timer when the page loads and then calling the gauges' "resize(true)" method would cause the gauges to align properly. However, a lot happens in the page when it loads so it was always tricky to set the timer delay so it didn't occur "too soon" to have an effect. Even so, this workaround has not been effective in every case and our customers have started to notice the issue.

I have noticed that misalignment seems to occur most often in recent versions of Chrome and Edge browsers. Firefox and Internet Explorer don't appear to suffer the same issue.  We are still using an older version of Telerik controls: 2018.3.911.

In my rather extensive testing of this issue the past few days I have noticed that a in simpler "preview" page that one type of our widget seems to always be initially misaligned but another widget type behaves properly. I have looked for differences between the two widgets (both based on Kendo radial gauges) and aside from default CSS, layout and labeling differences, the two widgets are pretty similar. I can't explain the difference but it seems reproducible.

Any thoughts about could be going wrong? We could prefer to avoid the "resize" method of solving this issue, if possible. What message do the gauges respond to when the browser window is resized?

I can provide details on how the widgets are rendered and the appropriate CSS upon request.

Thanks,

Jeff Benson

New Boundary Technologies

 

 

7 Answers, 1 is accepted

Sort by
0
Teya
Telerik team
answered on 20 Mar 2020, 02:33 PM

Hello Jeff,

Generally speaking, similar issues with Gauge wrong positioning are happening if the Gauge is inside a hidden container, which gets displayed on a button click for example. Do you have something like that in your application? In such cases, we recommend calling the Gauge resize() function, which fixes the positioning. As you pointed out, once the window resizes, the Gauge appearance is fixed and this is because the resize() function is called on window resize() event.

In order to assist you further, can you please provide me with a runnable example where the Gauge issues can be replicated?

I am looking forward to your reply.

 

Regards,
Teya
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.
0
Jeff Benson
Top achievements
Rank 1
answered on 24 Mar 2020, 09:08 PM

Thanks for the reply. Our application is complicated so I haven't spent time trying to create a working example of the problem (for fear I wouldn't be able to do it). You did have some interesting insights so I've been doing more testing based on that. As I said, we have wrapped Kendo gauge widgets in our own jQuery UI widgets. For example, in our radial gauge widgets we have internally:

<div class="radialgaugewidget">
    <div class="radialgauge"></div>
    <div class="radiallabel"></div>
</div>

and the Kendo radial gauge widget is created within the "radialgauge" element. The "radialgaugewidget" acts as the gauge's circular bezel. The "radiallabel" element is for an associated text label. Each widget created is dynamically added to a blank "canvas" page by something like:  $(canvas).append(widget);

From debugging the load of the canvas page, it almost looks to me as if the Kendo gauge gets created and is displayed before its parent div elements are completely rendered. In other words, the misalignment is probably due to a timing issue.

Any suggestions for how we might handle the creation and rendering so Kendo gauges have a better chance of displaying correctly?

Thanks again,
Jeff

 

0
Teya
Telerik team
answered on 27 Mar 2020, 03:55 PM

Hello Jeff,

Can you please try calling the resize() function after the widget is added to the canvas:

$("#gauge").data("kendoRadialGauge").resize();

If this does not solve the issue, can you please try creating a sample project where the issue can be replicated?

 

Regards,
Teya
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jeff Benson
Top achievements
Rank 1
answered on 27 Mar 2020, 07:36 PM

Thanks again. We are already using essentially the code you suggest. At the end of the page load script, we loop on every Kendo gauge, radial or linear, it finds and call  .resize(true)

Part of the issue we've had is to delay the resize step long enough that it is effective. We wrap the resize calls in a setTimeout function. In some cases, inpredictably, some or all of the gauges don't seem to respond to the resize.

Yesterday I fixed a problem (seemingly unrelated) on the base canvas page that was causing a jQuery exception when the page loaded (whether any widgets were being added to the canvas or not). To my surprise, that actually seemed to help alleviate the Kendo gauge resize issues. We are still in early stages of testing but so far things look good. So this issue may or may not be resolved, we'll see...

Thanks again,

Jeff

0
Teya
Telerik team
answered on 01 Apr 2020, 03:02 PM

Hi Jeff,

I am glad that the resize() method worked. Javascript (jQuery) errors might affect the whole script execution so this might be the reason why fixing one error that seemed unrelated, fixed the Gauges issues as well.

Please, contact me again if anything else pops up in future regarding the Gauges positions.

 

Regards,
Teya
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Jeff Benson
Top achievements
Rank 1
answered on 01 Apr 2020, 05:15 PM

I was informed that a user was still seeing the Kendo gauges misalignment issue, even with the updated base page (without the jQuery exception). I am checking to see whether this is still a "real" problem or if the user may have needed to clear their web browser cache to get the updated page.

You may have misunderstood a portion of my last post. We have always used the gauge resize() calls on our base page. The issue seems to be that, under some circumstances, the resize() function call has no effect on the gauge location (upon first load of the page). It seems to be a timing issue: delaying when the resize() functions are called, using setTimeout, helps in some cases. In other situations, we either don't set the time delay to be long enough or the gauges don't respond to the resize() function.  The issue also seems to be dependent on the browser. I have seen it largely in Chromium-based browsers (e.g., Chrome, Edge) but not in Firefox or Internet Explorer.

What can you tell me about the inner workings of the gauge resize() function? In particular, what conditions might cause the function to fail or avoid changing the position/size of the gauge?

Thanks again. I'm sorry this issue keeps dragging on. If I have time, I will try to create a demonstration project that shows the issue (but it might take me a while). 

Jeff

 

 

0
Teya
Telerik team
answered on 06 Apr 2020, 03:32 PM

Hi Jeff,

The Gauge resize() method makes sure that the widget is resized and well-positioned in the container it's rendered in. However, if the container is still not displayed, or not fully resized, etc. at the time that the resize() method is called, the Gauge would not be resized and positioned properly. This is why the setTimeout function solves the issue in most of the cases as it makes sure that the element containing the Gauge is visible on the page.

If you are experiencing further issues, I would appreciate it if you can create a sample project, because unfortunately, with the given information I am not able to provide you with more valuable insights.

 

Regards,
Teya
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
Tags
Gauges
Asked by
Jeff Benson
Top achievements
Rank 1
Answers by
Teya
Telerik team
Jeff Benson
Top achievements
Rank 1
Share this question
or