Using Kendo Chart; Kendo Chart Events #Root #By Sayed Ahmed

Using Kendo Chart; Kendo Chart Events

Sayed Ahmed

One example that helped in real projects

http://demos.telerik.com/kendo-ui/tabstrip/events

The example shows how you can execute functionality on different Kendo Chart events. You can see the methods and events mapping as below

$("#tabstrip").kendoTabStrip({
                    select: onSelect,
                    activate: onActivate,
                    show: onShow,
                    contentLoad: onContentLoad,
                    error: onError,
                    contentUrls: [ , "../content/web/tabstrip/ajax/ajaxContent1.html", "error.html" ]
                });

Problem to Solve:
In my case, under a Kendo Chart (actually in an embedded iframe), there were some buttons. The kendo chart had multiple tabs. The height of the tabs were not the same as the contents were different. Hence, because of the iframe height (as was set to the height of the most height tab content - before this solution was applied), the buttons were far off (down) sometimes (if a tab content was not much). I was required to bring the buttons just under the content.

Solution:
Used Kendochart events to resolve the issue, and depending on the tab content height, re-sized the iframe height.

if you use select event, you may see that the buttons are still far off esp. when you move from a more height tab to a less height tab for the first time.  

Activate event helped to resolve the issue.

Another Problem to Solve:
the iframe was showing remote content i.e. cross domain content where I had access to both domains. Used post message communications to send the page height information to the client/parent and from parent/client the iframe size was adjusted. 

Please also check if you need to configure the remote Webserver for allow-access-origin or similar. I did though there were multiple stuff to do on cross-domains; hence, if for this particular case, allow-access-origin is mandatory or not, I need to double check. However, apparently, you need it or you need something similar as even for post message communications, you need to work with both domains.

Anyway, the complete code from the URL is as below as I just mentioned (just in case, the page is not available in future.).

 $(document).ready(function() {
                function onSelect(e) {
                    kendoConsole.log("Selected: " + $(e.item).find("> .k-link").text());
                }

                function onShow(e) {
                    kendoConsole.log("Shown: " + $(e.item).find("> .k-link").text());
                }

                function onActivate(e) {
                    kendoConsole.log("Activated: " + $(e.item).find("> .k-link").text());
                }

                function onContentLoad(e) {
                    kendoConsole.log("Content loaded in <b>"+ $(e.item).find("> .k-link").text() + "</b> and starts with <b>" + $(e.contentElement).text().substr(0, 20) + "...</b>");
                }

                function onError(e) {
                    kendoConsole.error("Loading failed with " + e.xhr.statusText + " " + e.xhr.status);
                }

                $("#tabstrip").kendoTabStrip({
                    select: onSelect,
                    activate: onActivate,
                    show: onShow,
                    contentLoad: onContentLoad,
                    error: onError,
                    contentUrls: [ , "../content/web/tabstrip/ajax/ajaxContent1.html", "error.html" ]
                });
            });
        </script>

From: http://sitestree.com/?p=2091
Categories:Root, By Sayed Ahmed
Tags:
Post Data:2015-07-12 18:32:41

Shop Online: https://www.ShopForSoul.com/
(Big Data, Cloud, Security, Machine Learning): Courses: http://Training.SitesTree.com
In Bengali: http://Bangla.SaLearningSchool.com
http://SitesTree.com
8112223 Canada Inc./JustEtc: http://JustEtc.net (Software/Web/Mobile/Big-Data/Machine Learning)
Shop Online: https://www.ShopForSoul.com/
Medium: https://medium.com/@SayedAhmedCanada