Using Kendo UI Widgets

1

Has anyone used the Kendo UI components and Widgets successfully without conflicts? I am going to exeriment and post back the results, but thought I would ping the community to see if anyone else has done this. Thank you for the feedback.

2

From what I know, the kendo widgets use angular, correct? It should be the same step as including a new angular module…though haven’t tried it myself

3

Kendo ui is a fully standalone framework and works without angular.
But they did create a angulatjs integration.

I never tried to use the widget with ionic.
Would be interessting to now if it works

4

@mhartington & @Auro - Thanks for the response. I didn’t even think if searching for Angular + Kendo; if I had, I would have seen http://kendo-labs.github.io/angular-kendo/#/ - which is apparently deprecated as they are adding the Angular bindings in the release Q2 2014. Their pricing is a bit cryptic as to what community version is, their dev platform and their UI libraries. I will call them tomorrow to get the rundown on compatability and availablility with Angular and what libraries are included with thier community version. If the availablity is there, it could provide extra horsepower to our IONIC apps.

I will repost after my call with them.

1 Like
5

Did you make any progress on this? What did the Telerik guys answer?

6

The Kendo controls work well with Angular but I could not get them to work with Ionic. It seems like there is a conflict when they are trying to show pull down menus, date pickers, etc.

7

i have a problem right now with kendo, if i add repeat collection and kendo libraries the repeat collection turns slow, the scroll is like robotic, if just remove kendo dependencies everything goes normal, the problem is, i need to use kendo charts, someone have an idea how to solve it?

8

how about replace kento ui Chart with d3.js?
like this: http://bl.ocks.org/mbostock/3886208

9

I also need to use kendo widgets in my ionic app and can confirm ionic has some sort of conflict. Specifically, i have a kendoDateTimePicker. When ionic.js included on the page, you cant click on the date picker and have it stay expanded. It immediately contracts. Is there a workaround for this?

10

FOUND A SOLUTION! For any kendo widget you want to use, add data-tap-disabled=“true” to it or some parent. The date picker works like a charm now!

11

Ok i take this back. After testing further it fixed the initial calendar showing but when you click a month things disappear again.

I looked at the code and know what is happening, but im not sure how to get around it. Kendo dynamically creates the date picker and it gets attatched to the end of the document, so it is not a direct child of whatever element you have data-tap-disabled=“true” set on. So in the ionic code, where it checks to see if an element should be excluded from the ionic tap functionality, it is not detecting that the calendar should be excluded.

Any ideas on how to get around that?

12

Hi all! Thanks to Max for pointing this question out. Full disclosure: I work for Telerik who makes Kendo UI Mobile.

To answer a few questions here…

  • Angular integration is now baked into Kendo UI Mobile as of November.
  • Kendo UI Mobile is part of Kendo UI Core which is open source under Apache 2.
  • Kendo UI Charts are part of Kendo UI Professional, you can get more information on pricing for that here.
  • When in doubt about what widgets are included in what versions of Kendo UI, see this super handy table.

As for the issues using Kendo UI with Ionic, I’m not aware of any issues, but I’m curious now. I’ve created a starter project that we can collaborate on. If you could all jump in and tweak, re-create your issues, I’d love to find out if there is indeed an issue working with Kendo UI in Ionic. I am not aware of one, but we should be able to figure it out pretty quick here.

Cheers!

13

It might be good to try one widget at a time. Can you post some code, for example for the calendar, to show what’s working and what’s not?

best,
Jen
(I’m also at Telerik on Burke’s team, full disclosure :))

14

Take a look at 3ds charting - it’s pretty easy to implement and has loads of different charts

15

Thanks for starting that project. I am trying to integrate Kendu UI Scheduler into an ionic beta 14 app and I am getting errors. I took the KendoUI Scheduler Angular example and put it in an ionic app. See this project - http://dojo.telerik.com/afEcE

The errors it shows are not exactly like the ones I am getting, but might help lead to the root cause.

16

Please start with the Scheduler :-). After several iterations I have the scheduler painting in a Tab ionic app. However, tap does not work. When I look in the Scheduler mobile sample I see the following two things:

...

I believe this is handling tap on mobile. The problem is that in a Tab application in ionic I cannot seem to put a div under body with data-role=“view” and still have ionic work properly. I tried other elements and either the scheduler stops displaying or something breaks in ionic.

How do you get tapping to work with Kendo UI Scheduler and the ionic framework in a tab app?

17

Let’s start here…

http://dojo.telerik.com/afEcE/3

It seems to work fine for me, but I have also set the mobile: “phone” config setting on the scheduler, which forces it to render and optimize for a mobile device.

18

Thank you for spending time on this and putting that dojo together. I compared your working sample with mine and I see the difference. Your sample is showing the schedule in every tab where obviously a real tab app would not do that.

The ionic pattern from their generated code puts this code in index.html
    <!--
      The views will be rendered in the <ion-nav-view> directive below
      Templates are in the /templates folder (but you could also
      have templates inline in this html file if you'd like).
    -->
  <ion-nav-view></ion-nav-view>

So each of the tab templates is rendered nested inside the ion-nav-view element which seems to be enough to mess things up with tap, scroll, etc. when I run using ionic serve. In the dojo with the change (see http://dojo.telerik.com/afEcE/4) it runs better, but still has problems.

19

Given this is the first search that came up while I was looking for a solution to the DateTime picker problem. Apologies that it is waking a old thread but may help some others having problems with kendo, angular and use google.

Here is a small workaround as the problem with the datetime picker still exists for Kendo v2015.2.624 and ionic v1.0.0.

Im going to leech onto one of the widget’s events (some typescript):

$scope.openedDateTime = (e: kendo.ui.DatePickerOpenEvent) => {
   //not sure how the .k-calendar-container relates to the control via 'e' so lets add it to all matching elements: 
   $(".k-calendar-container").attr("data-tap-disabled", "true");
 };

and the angular directive

<input kendo-date-time-picker k-open="openedDateTime"
                           k-ng-model="thing.endDateTimeUtc"
                            />

When the datetime picker is opened it will scan the html for all “.k-calendar-container” and add a sign for ionic to ignore it.

Something similar for the scheduler…
http://dojo.telerik.com/afEcE/14
Easy enough… The Start and End Date pickers in edit work as expected again.

Back to sleep for me and I hope the above helps.

Thanks,
Matt