|
 Preventing event bubbling when chart within user control |
| Posted by Richard on Jul-26-2016 17:45 |
|
I am using a copy of the chart used in the demo web site's viewportcontroldemo.aspx within a user control on my site. The only change I've made in the code-behind is adding 'ChartDirector.WebChartViewer.OnPageInit(this.Page);' to InitializeComponent().
The user control containing the chart is within another user control which is within a standard aspx page, which uses a master page.
My problem is that when I interact with the chart, say, to zoom-in, it causes the user control to re-submit and its parent user control and its containing page to re-load - causing a long delay before the chart refreshes.
I have tried replacing the occurrences of event.preventDefault with event.preventPropagation and also with 'return false;', and also adding 'return false;' to the end of JsChartViewer.addEventListener() and inside the viewer.attachHandler function, and I have also used a combination of preventDefault and preventPropagation, but something is still causing an event to bubble up to the containing page.
Any suggestions on how to prevent this event bubbling behaviour would be most welcome.
Thanks,
Richard |
| Re: Preventing event bubbling when chart within user control |
| Posted by Peter Kwan on Jul-27-2016 00:48 |
|
Hi Richard,
The behaviour is not related to event bubbling. Event bubbling is something that occurs on the browser side. For your case, the controls run on the server side. Also, it is likely not to be caused on OnPageInit.
When you zoom in, ChartDirector will send a request to the server to obtain a zoomed in chart. This will cause the ASPX web page to be accessed. The code on the ASPX should detect this request, and send an updated chart. It should not do anything else.
In our own code, in the "Page_Load" event handler of the ASPX page, we include the followings in the first few lines before we do anything else:
if (WebChartViewer.IsPartialUpdateRequest(Page)) {
// Restores the viewer state
WebChartViewer1.LoadViewerState();
// Draw the chart in partial update mode
drawChart(WebChartViewer1);
// Output the chart immediately and then terminate the page life cycle
WebChartViewer1.PartialUpdateChart();
}
Note that the above code is starts from the first line in Page_Load, and if it is a chart update request, it draws and returns the chart and immmediately ends the request. (The PartialUpdateChart internally will terminate the Page_Load event.) This avoids wasting CPU in other unnecessary processing.
Normally, the page and controls would not perform significant processing before Page_Load. (Most standard ASP.NET controls would not do anything before Page_Load.) For your case, is the user control doing a lot of things even before Page_Load (such as in the constructor or during Page_Init)? If this is the case, is it possible to move those code to Page_Load, so that they would not be run during chart update?
Also, note that the above charting code is in the Page_Load even of the ASPX Page, not the Page_Load event of the control. It is because in ASP.NET, the Page_Load event of the Page occurs first, followed by the Page_Load event of the controls. If we handle the chart update in the Page_Load even of the Page and then terminate the request immediately, we can make sure the code in the Page_Load event of the controls are not run.
If you would like to put the charting code in your user control, you can create a method is your control to contain the above code. You would still need to add one line as the first line in the Page_Load event of the Page to call the method, like:
MyUserControl.CheckPartialUpdateRequest(Page);
This make sure the method is called before any code in the Page_Load event handler is run.
Regards
Peter Kwan |
| Re: Preventing event bubbling when chart within user control |
| Posted by Richard on Aug-01-2016 17:57 |
|
| Thanks Peter. That works great! |
| Re: Preventing event bubbling when chart within user control |
| Posted by Richard on Aug-01-2016 22:48 |
|
Hi Peter,
Everything is working as expected now except when the entire web page is refreshed (by design) via a timer. In my user control, the zoom & scroll buttons and the viewport cease to function properly and the track bar also stops updating.
Is there a method I can call to completely reset/redraw the chart in the same way it does when the web page is first loaded (or refreshed via the browser's refresh button) and ensure the javascript functions work? I think the addEventListener stops working when the control gets refreshed after the web page postback.
Thanks,
Richard |
| Re: Preventing event bubbling when chart within user control |
| Posted by Peter Kwan on Aug-02-2016 02:36 |
|
Hi Richard,
After the WebChartViewer is created on the web page, we need some Javascript code to initialize and configure it. In our sample code, those initialization code is put in the window onload handler, so it will run after the web page has completed loading. This ensures the code is run only after the WebChartViewer has been created.
In your post, you mentioned the web page is "refreshed". The standard Javascript to refresh a web page is "location.reload();". Are you using this method? If the web page is "refreshed", window onload event should occur again, and so the WebChartViewer will be initialized.
In the sample code, the original code structure is like:
JsChartViewer.addEventListener(window, 'load', function() {
... some initialization code here ....
});
If you need to call the initialization code without the window loading, you can save the function into a variable, so you can all it later.
var myInitFunction = function() {
... some initialization code here ....
};
JsChartViewer.addEventListener(window, 'load', myInitFunction);
Your code can then call myInitFunction later if it is necessary. Note that the myInitFunction should be called only after the WebChartViewer has been created (that is, after the refresh has been completed.)
Hope this can help.
Regards
Peter Kwan |
| Re: Preventing event bubbling when chart within user control |
| Posted by Richard on Aug-02-2016 16:44 |
|
| Thanks again Peter. The support you provide is fantastic - much appreciated. |
|
Forum Home
Search
Message List
Post Message