Using Kendo Chart; Kendo Chart Events<\/p>\n
Sayed Ahmed<\/p>\n
<\/p>\n
One example that helped in real projects<\/p>\n
http:\/\/demos.telerik.com\/kendo-ui\/tabstrip\/events<\/p>\n
<\/p>\n
The example shows how you can execute functionality on different Kendo Chart events. You can see the methods and events mapping as below<\/p>\n
$<\/span>(<\/span>\"#tabstrip\"<\/span>).<\/span>kendoTabStrip<\/span>({<\/span>\r\n select<\/span>:<\/span> onSelect<\/span>,<\/span>\r\n activate<\/span>:<\/span> onActivate<\/span>,<\/span>\r\n show<\/span>:<\/span> onShow<\/span>,<\/span>\r\n contentLoad<\/span>:<\/span> onContentLoad<\/span>,<\/span>\r\n error<\/span>:<\/span> onError<\/span>,<\/span>\r\n contentUrls<\/span>:<\/span> [<\/span> ,<\/span> \"..\/content\/web\/tabstrip\/ajax\/ajaxContent1.html\"<\/span>,<\/span> \"error.html\"<\/span> ]<\/span>\r\n });\r\n\r\nProblem to Solve:<\/strong>\r\nIn 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.\r\n\r\nSolution:<\/strong>\r\nUsed Kendochart events to resolve the issue, and depending on the tab content height, re-sized the iframe height.\r\n\r\nif you use <\/span>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. \r\n\r\nActivate event helped to resolve the issue.<\/strong>\r\n\r\nAnother Problem to Solve:<\/strong>\r\nthe 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. \r\n\r\nPlease 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, <\/span>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.\r\n\r\nAnyway, the complete code from the URL is as below as I just mentioned (just in case, the page is not available in future.).\r\n\r\n<\/span><\/pre>\n $<\/span>(<\/span>document<\/span>).<\/span>ready<\/span>(<\/span>function<\/span>()<\/span> {<\/span>\r\n function<\/span> onSelect<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\r\n kendoConsole<\/span>.<\/span>log<\/span>(<\/span>\"Selected: \"<\/span> +<\/span> $<\/span>(<\/span>e<\/span>.<\/span>item<\/span>).<\/span>find<\/span>(<\/span>\"> .k-link\"<\/span>).<\/span>text<\/span>());<\/span>\r\n }<\/span>\r\n\r\n function<\/span> onShow<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\r\n kendoConsole<\/span>.<\/span>log<\/span>(<\/span>\"Shown: \"<\/span> +<\/span> $<\/span>(<\/span>e<\/span>.<\/span>item<\/span>).<\/span>find<\/span>(<\/span>\"> .k-link\"<\/span>).<\/span>text<\/span>());<\/span>\r\n }<\/span>\r\n\r\n function<\/span> onActivate<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\r\n kendoConsole<\/span>.<\/span>log<\/span>(<\/span>\"Activated: \"<\/span> +<\/span> $<\/span>(<\/span>e<\/span>.<\/span>item<\/span>).<\/span>find<\/span>(<\/span>\"> .k-link\"<\/span>).<\/span>text<\/span>());<\/span>\r\n }<\/span>\r\n\r\n function<\/span> onContentLoad<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\r\n kendoConsole<\/span>.<\/span>log<\/span>(<\/span>\"Content loaded in <b>\"<\/span>+<\/span> $<\/span>(<\/span>e<\/span>.<\/span>item<\/span>).<\/span>find<\/span>(<\/span>\"> .k-link\"<\/span>).<\/span>text<\/span>()<\/span> +<\/span> \"<\/b> and starts with <b>\"<\/span> +<\/span> $<\/span>(<\/span>e<\/span>.<\/span>contentElement<\/span>).<\/span>text<\/span>().<\/span>substr<\/span>(<\/span>0<\/span>,<\/span> 20<\/span>)<\/span> +<\/span> \"...<\/b>\"<\/span>);<\/span>\r\n }<\/span>\r\n\r\n function<\/span> onError<\/span>(<\/span>e<\/span>)<\/span> {<\/span>\r\n kendoConsole<\/span>.<\/span>error<\/span>(<\/span>\"Loading failed with \"<\/span> +<\/span> e<\/span>.<\/span>xhr<\/span>.<\/span>statusText <\/span>+<\/span> \" \"<\/span> +<\/span> e<\/span>.<\/span>xhr<\/span>.<\/span>status<\/span>);<\/span>\r\n }<\/span>\r\n\r\n $<\/span>(<\/span>\"#tabstrip\"<\/span>).<\/span>kendoTabStrip<\/span>({<\/span>\r\n select<\/span>:<\/span> onSelect<\/span>,<\/span>\r\n activate<\/span>:<\/span> onActivate<\/span>,<\/span>\r\n show<\/span>:<\/span> onShow<\/span>,<\/span>\r\n contentLoad<\/span>:<\/span> onContentLoad<\/span>,<\/span>\r\n error<\/span>:<\/span> onError<\/span>,<\/span>\r\n contentUrls<\/span>:<\/span> [<\/span> ,<\/span> \"..\/content\/web\/tabstrip\/ajax\/ajaxContent1.html\"<\/span>,<\/span> \"error.html\"<\/span> ]<\/span>\r\n });<\/span>\r\n });<\/span>\r\n <\/script><\/span><\/pre>\n<\/pre>\n From: http:\/\/sitestree.com\/?p=2091
Categories:Root, By Sayed Ahmed
Tags:
Post Data:2015-07-12 18:32:41<\/p>\n
\t\tShop Online: https:\/\/www.ShopForSoul.com\/<\/a>
\n\t\t(Big Data, Cloud, Security, Machine Learning): Courses: http:\/\/Training.SitesTree.com<\/a>
\n\t\tIn Bengali: http:\/\/Bangla.SaLearningSchool.com<\/a>
\n\t\thttp:\/\/SitesTree.com<\/a>
\n\t\t8112223 Canada Inc.\/JustEtc: http:\/\/JustEtc.net (Software\/Web\/Mobile\/Big-Data\/Machine Learning) <\/a>
\n\t\tShop Online: https:\/\/www.ShopForSoul.com\/<\/a>
\n\t\tMedium: https:\/\/medium.com\/@SayedAhmedCanada <\/a><\/p>\n","protected":false},"excerpt":{"rendered":"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: [ , … <\/p>\n