Problem with KendoValueAccessor in angular 2.0.0-beta.0

35 posts, 1 answers
  1. Vasil
    Vasil avatar
    3 posts
    Member since:
    May 2015

    Posted 17 Dec 2015 Link to this post

    Hi all,

    After I upgraded to latest Angular 2.0.0-beta.0 release my site stopped working. I tracked the problem and found out that it is due to KendoValueAccessor, which has dependency to 'angular2/angular2'. This package is not provided any more.

    Regards,

    Vasil
  2. Answer
    Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 17 Dec 2015 Link to this post

    Hi Vasil,

    We are already working to support the Angular 2 Beta version which was released a couple of days ago but we are not there yet. Since many of the concepts compared to the Alpha release changed we will need some time to modify our integrations accordingly, therefore expect updates on this topic in the first months of 2016.

    Note that our goal is to work in parallel with the next Anguar 2 updates in 2016, and provide formal support with Kendo UI shortly after the Angular 2 official release is announced by Google. Hence I hope you understand that at this juncture we cannot provide any definite estimates or commitments.

    Kind regards,
    Stefan Rahnev,
    Product Manager, Kendo UI
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. Vasil
    Vasil avatar
    3 posts
    Member since:
    May 2015

    Posted 17 Dec 2015 Link to this post

    Hi Stefan, Sebastian,

    Thanks for your reply. In fact I was able to figure out the problem myself by creating the following directive (see attachment).

     Regards,

    Vasil

  5. Aaron Jessen
    Aaron Jessen avatar
    14 posts
    Member since:
    Feb 2009

    Posted 13 Jan in reply to Vasil Link to this post

    Hi @Vasil,

    Thanks a million for posting your KendoValueAccessor implementation. Can you please explain how you are referencing `kendo`, in order to satisfy `kendo.webComponents`  in line 9? I can't find 'webComponents' in any file (kendo.webcomponents.js does not contain an exported module, and kendo.all.d.ts does not contain any reference to `webComponents`).

    Thanks,

     

    Aaron Jessen

  6. Vasil
    Vasil avatar
    3 posts
    Member since:
    May 2015

    Posted 14 Jan in reply to Aaron Jessen Link to this post

    Hi @Aaron,

     

    It is a bit of a hack. I created the following file and added it to typings folder.

     

    Regards,

    Vasil

  7. Aaron Jessen
    Aaron Jessen avatar
    14 posts
    Member since:
    Feb 2009

    Posted 14 Jan in reply to Vasil Link to this post

    Hi @Vasil,

    Thanks, again, for posting your code. I suppose my newness to TypeScript is a factor, but after an hour of hacking around, I still can't get my IDE (IntelliJ IDEA) and my rendered page to stop throwing errors. Even if I satisfy TypeScript so Webpack will render, the web page says it cannot find kendo. Perhaps I'm missing something simple?

    Since it could be a few months until Telerik releases full support for Angular 2, is it possible for you to throw together a basic plnkr when you get a chance to demonstrate how everything plays together? I'm figuring more people than just myself could benefit.

    Thanks,

     Aaron

  8. Lisa
    Lisa avatar
    20 posts
    Member since:
    Feb 2014

    Posted 20 Jan Link to this post

    I too am trying Vasil's solution but am running into the same problem at runtime:  

    Uncaught Uncaught ReferenceError: kendo is not defined

    Evaluating http://192.168.1.11:9001/node_modules/kendo/angular2/kendo_value_accessor.js

  9. VasVas
    VasVas avatar
    31 posts
    Member since:
    Nov 2012

    Posted 26 Jan in reply to Vasil Link to this post

    Dear Telerik,

    I am checking angular 2 support in kendo ui . In version 2016.1.112 there are Angular2 JS files but they seem to have no implementation.

    Are there angular 2 beta decleretives for kendo ui/kendo ui Pro. Do you have sample application we could play with. Could you point me to resources. 

     

    Yours,

     

    Ariel

  10. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 27 Jan Link to this post

    Hello guys,

    I recommend you review the following blog post which explains what to expect in 2016 for Kendo UI in terms of Angular 2 integration. Hope it will clarify our goal and set you expectations objectively.

    Kind regards,
    Stefan Rahnev,
    Product Manager, Telerik Kendo UI
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  11. Jason
    Jason  avatar
    7 posts
    Member since:
    Apr 2012

    Posted 02 Feb in reply to Sebastian Link to this post

    Sebastian,

    I know I am not the only one that is going to ask this, but please do not drop the support for Angular 2 that you guys are already have.  It is great that you are going to make Angular 2 native controls for Kendo, but those are over a year away.  There are many developers, your clients, that went with kendo because of the Angular support and need to start developing Angular 2 now while it is in Beta to have it ready by the time it is released.  

    What we really need is a way to continue/start our Angular 2 development now with the current JQuery based widgets and when the time comes to update them to use your new Angular 2 native ones.  If not you basically halt the development for your clients.  

    At this point I am fine with using the JQuery widgets inside of my Angular 2 applications and I know others will be also.  We need to way to proceed forward without waiting a year. 

    Thanks,

    Jason
  12. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 02 Feb Link to this post

    Thanks for the input, Jason.

    I am afraid that supporting Angular 2 with our current Kendo UI offering in the same way as we did with Angular 1 (via directives) is against the core principles and concepts for UI components defined by Google with Angular 2, and renders such integration ineffective. That's the reason we chose a different path to support Angular 2 with Kendo UI, as explained in the blog post referenced below.

    We'll be pushing incremental support for Angular 2 according to the timeline provided in the blog, so you should be able to embrace what we deliver with each dev iteration (via the continuous delivery model mentioned in the article) released to the public in 2016.

    Regards,
    Stefan Rahnev,
    Telerik Product Manager, Kendo UI
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  13. Jason
    Jason  avatar
    7 posts
    Member since:
    Apr 2012

    Posted 02 Feb in reply to Sebastian Link to this post

    Sebastian said:  
    We'll be pushing incremental support for Angular 2 according to the timeline provided in the blog, so you should be able to embrace what we deliver with each dev iteration (via the continuous delivery model mentioned in the article) released to the public in 2016.


    That is what Telerik does not understand.  By not providing a way to bridge that time gap, you are effectively shutting down any Angular 2 development for clients that want to use Kendo as their UI controls.  I know our company can't wait for a year until kendo is supported on Angular 2 natively to start development on our new application, and I am sure others can't as well.  There will be no embracing what you deliver with each dev iteration, because Angular 2 will not be an option.  

    I am in the process of trying out Vasil's approach.  Does this only work for a particular widget or is it a solution for all widgets?  I notice the (spin) so I figure it may only work with the numeric textbox.
  14. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 03 Feb Link to this post

    Unfortunately there's no conceptually right (by the latest Angular 2 components definition) and straight-forward means to provide Angular 2 shims for the existing Kendo UI jQuery-based widgets. That's why we are unable to provide any temporary solution you are requesting.

    Feel free to utilize and extend the workaround provided by community members in this thread, if applicable for you.

    Kind regards,
    Stefan Rahnev,
    Product Manager, Telerik Kendo UI
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  15. Diego
    Diego avatar
    11 posts
    Member since:
    May 2009

    Posted 16 Feb in reply to Sebastian Link to this post

    Sebastian said:Unfortunately there's no conceptually right (by the latest Angular 2 components definition) and straight-forward means to provide Angular 2 shims for the existing Kendo UI jQuery-based widgets. That's why we are unable to provide any temporary solution you are requesting.

    Feel free to utilize and extend the workaround provided by community members in this thread, if applicable for you.

     

    Hi Sebastian:

    actually we are trying to integrate Kendo UI into our new Angular 2 app without success, i mean we know about blog post and the new Angular 2 roadmap but we have to find the best way to integrate right now.

    So we have dropped the use of wrapper "kendo.angular2.min.js" because we have found that it use the "angular2/angular2" module that it has dropped in favor of "angular2/core". We think right now to integrate Kendo UI WebComponet because we guess that native angular 2 implementation will be really close.

    Do we are right? We really need the right path to integrate it thinking also on new Angular 2 development on Telerik side.

  16. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 16 Feb Link to this post

    Diego, at this point I don't think we can advise you anything more than what has already been discussed in this forum thread. Feel free to adopt the solution posted by community members here for your scenario.

    Regards,
    Sebastian
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  17. Diego
    Diego avatar
    11 posts
    Member since:
    May 2009

    Posted 16 Feb in reply to Sebastian Link to this post

    Sebastian said:Diego, at this point I don't think we can advise you anything more than what has already been discussed in this forum thread. Feel free to adopt the solution posted by community members here for your scenario.

    Just to know Sebastian....are you going to drop "kendo.angular2.min.js" file or update it in meanwhile?

    So thanks!

    Diego

  18. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 16 Feb Link to this post

    Yes, this file will be dropped and we won't support it with our future Angular 2 integrations, Diego.

    You can use the updated version of the file posted by community members in this thread as a temporary workaround, if applicable, having in mind that it's not supported by our team.

    Hope this makes sense.

    Regards,
    Sebastian
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  19. Jason
    Jason  avatar
    7 posts
    Member since:
    Apr 2012

    Posted 16 Feb in reply to Sebastian Link to this post

    What we have decided to do is to continue our Angular2 development by using kendo as require jquery widgets.  It is actually not too far off from how they are used in Angular 1X.  We are just creating the widgets on the ngAfterViewInit of the component, it may not be the best way or the Angular way but it will allow us to continue with Angular 2 and update when the actual Angular 2 widgets come out.

     

  20. Diego
    Diego avatar
    11 posts
    Member since:
    May 2009

    Posted 16 Feb in reply to Jason Link to this post

    Jason said:

    What we have decided to do is to continue our Angular2 development by using kendo as require jquery widgets.  It is actually not too far off from how they are used in Angular 1X.  We are just creating the widgets on the ngAfterViewInit of the component, it may not be the best way or the Angular way but it will allow us to continue with Angular 2 and update when the actual Angular 2 widgets come out.

     

     Good to hear that someone else is going with this approach....i hope we could share some experiences if needed.

    Diego

  21. Bruce Denham
    Bruce Denham avatar
    7 posts
    Member since:
    May 2006

    Posted 03 Mar in reply to Jason Link to this post

    Hey Jason, since Telerik won't help us start building Angular2 apps with existing jQuery controls, can you point me to an example of how you managed to do it via ngAfterViewInit? My company is facing the same problem with needing to start building our Angular2 app NOW. We'd be out of business if we waited for Telerik's KendoUI rewrite.

    Thanks and hope to hear from you soon.

    Bruce Denham

    bdenham@topazti.com

  22. Bruce Denham
    Bruce Denham avatar
    7 posts
    Member since:
    May 2006

    Posted 03 Mar in reply to Sebastian Link to this post

    Sebastian -- I don't understand why Telerik isn't helping its current customers who need to start building their Angular2 apps now using current KendoUI jQuery controls. Does Telerik seriously think companies can wait a year to start building their Angular2 apps? Like most companies, we have to start development on our app now so we can be finished by the end of this year. If we had to wait a year for KendoUI to catchup, we'd be out of business. 

    Our company recent spent over $9,000 on several KendoUI Pro licenses to ensure we'd get great support and backing for Angular2 development. So forgive me if I'm astonished over the lack of Angular2 customer support I'm seeing here and in other blog postings. Very disappointing.

  23. Jason
    Jason  avatar
    7 posts
    Member since:
    Apr 2012

    Posted 03 Mar in reply to Bruce Denham Link to this post

    Here is what we are doing.  We have almost complete converting one of our small apps and it has worked out really well so far.

    We are using Typescript with WebPack and NPM.

    Sample Component:

    @Component({
        selector: 'XXXX',
        templateUrl: 'XXXX.html',
        providers: [XXXXService],
    })
    export default class XXXXComponent {
          
        //just defindes what is in _uiControls
        private _uiControls: {
            panelBar: kendo.ui.PanelBar;
            treeViewCategories: kendo.ui.TreeView;
            isLoaded: boolean;
        };
     
        //#region Life Cycle Methods
        ngOnInit() {
            window['XXXXComponent'] = this;
        }
     
        ngOnDestroy() {
            delete window['XXXXComponent'];
        }
     
        ngAfterViewInit() {
            try {
                this.createUIControls();
                window['XXXXComponent'] = this; //not the best way to get the component reference to the global scope.  Is there another way?
            }
            catch (e) { Log.error(e); }
            finally {
            }
        }
        //#endregion
     
        constructor(private _xXXXService: XXXXService) {
            //need to initialize _uiControls here
            this._uiControls = {
                panelBar: null,
                treeViewCategories: null,
                isLoaded: false
            };
        }
      
        /**
     * Creates all the Kendo UI controls
     */
        private createUIControls(): void {
            this._uiControls.panelBar = $('#KPanelBar').kendoPanelBar(this.getPanelBarOptions()).data("kendoPanelBar");
            this._uiControls.treeViewCategories = $('#kTreeViewCategories').kendoTreeView(this.getTreeViewCategoriesOptions()).data("kendoTreeView");
            this._uiControls.isLoaded = true;
        }
     
        private getPanelBarOptions(): kendo.ui.PanelBarOptions {
            let component = this;
            let options: kendo.ui.PanelBarOptions = {
                activate: function (e) {
                }
            }
            return options;
        }
     
        private getTreeViewCategoriesOptions(): kendo.ui.TreeViewOptions {
            let component = this;
            let dataSource: kendo.data.HierarchicalDataSource = new kendo.data.HierarchicalDataSource({
                data: [],
                schema: {
                    model: {
                        id: 'key',
                        children: 'items'
                    }
                },
            });
            let options: kendo.ui.TreeViewOptions = {
                dataSource: dataSource,
                checkboxes: {
                    checkChildren: true,
                },
                loadOnDemand: false,
                dataTextField: 'name',
            };
            return options;
        }
    }

    Here is the sample HTML view:

    <ul id="KPanelBar" style="height:99%;overflow:auto;">
        <li id="pb_tags_header_categories">
            <label>TITLE</label>
            <div id="pb_container_categories" style="height:100%;">
                <div id="kTreeViewCategories" style="height:100%;"></div>
            </div>
        </li>
    </ul>

    This may not be the best approach, but it is working for us and it will give us a clean way to move towards the native Angular 2 widgets when they become available.  

    The biggest thing to remember when doing it like this is that any interaction with the kendo widget requires you to use kendo coding style.  By that I mean you can't use Angular templates, you need to use templates in the kendo style.  You have to treat this like it is totally separated from Angular.  You will need to use DynamicComponentLoader.loadIntoLocation a lot to inject your Angular components into kendo areas.  An example of this would be when using the Tab widget.  We are having to use loadIntoLocation in order to get our Angular components inside the tab content section.

    Over the last 3-4 weeks, working with this approach I can see how it would be extremely difficult for this to be the supported way of doing things in Angular 2.  The whole way Angular 2 works is completely different than Angular 1.X and there would be no way to have a supported product for Angular 2 using the JQuery widgets.  With that said, I am still disappointing that Telerik just threw it under the bus like they did.  They could have come out and said here is a template to get it working.  I think everyone would have realized that there would be issues going forward with the jquery widgets and the ultimate goal was to move to native Angular 2 widgets.  I totally expect to run into things that are going to be very difficult or impossible to figure out with this approach but at least we can start conversion.

    Hope this helps.  I will email you so you have my email if you run into any issues.

  24. Bruce Denham
    Bruce Denham avatar
    7 posts
    Member since:
    May 2006

    Posted 03 Mar in reply to Jason Link to this post

    This is great, Jason, I really appreciate this! I will try it out on some prototypes and show the rest of our devs. Thanks so much!
  25. Diego
    Diego avatar
    11 posts
    Member since:
    May 2009

    Posted 04 Mar Link to this post

    Hi to All...

    we do the same as well so...no more KendoValueAccessor but pure jQuery.....we have just started to an Angular 2 approach.....so on the template we mark just the "div" as "#chart" and on Angular 2 Controller: 

    @ViewChild("chart")
        private chartElement: ElementRef;

    So on 
    public ngAfterViewInit() {
            // We have to use jQuery wrapper because of kendo dependencies
            this.kendoGrid = jQuery(this.chartElement.nativeElement).kendoGrid(this.mainGridOptions).data("kendoGrid");
            // Now we have to bind to elements
            kendo.bind(this.chartElement.nativeElement, this.mvvmObject);
        }

     

    But really it is really sad to use kendo template...instead angular 2 syntax....and we are really not sure that this approach will work correctly on big application!

    Diego

  26. Aaron Jessen
    Aaron Jessen avatar
    14 posts
    Member since:
    Feb 2009

    Posted 05 Mar Link to this post

    I'm having some success using jQuery to instantiate a Kendo grid, while using Angular 2's DynamicComponentLoader to bind a templated grid column. Here's the Plnkr.

    While the approach may not be best-practice, and it may or may not be applicable to other widgets, it's so far enabling our company to move forward with the adoption of Angular 2 while still using Kendo's Grid.

    On a related note, I traipsed across an actual ng2-compatible HTML5 grid: Wijmo's FlexGrid. It appears to be fairly feature-rich, it fully supports Angular 2 beta, and their roadmap is much more reasonable (they're apparently releasing an ng2-beta-compatible set of their components sometime in March 2016, with full support being released when Angular officially rolls out 2.0...not a year from now *WTF Telerik?!*).

  27. Petyo
    Admin
    Petyo avatar
    2439 posts

    Posted 07 Mar Link to this post

    Hi Aaron,

    thank you for sharing the approach you have taken. I am not going to go into details commenting the roadmap or the features of our competitors.

    I woud like to assure you that, as far as Telerik is concerned, deciding on a fresh, native Angular 2 implementation (instead of trying to make something exising "compatible" with the framework) was not an easy one from both engineering and product development point. There is tons of work to be done on our side.

    However, based on our experience with the Angular 1.* support, where we wrapped the existing widgets in directives, we do believe that a native Angular 2 implementation will result in best and most reliable implementation we can offer to our customers in the long run.  

    Concerning the "WTF" phrase, I would really appreciate if we can keep the discussion on calm and constructive grounds. Thank you beforehand.


    Regards,
    Petyo Ivanov,
    Kendo UI Architect

    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  28. Aaron Jessen
    Aaron Jessen avatar
    14 posts
    Member since:
    Feb 2009

    Posted 07 Mar in reply to Petyo Link to this post

    Apologies for the phraseology, Petyo. I did not say it out of hostility, but rather frustration over having to spend so much time coming up with hacks for a product for which I shell out $1,000/year in order to stay current.

    Some sort of wrapper or full, Telerik-built example to hold everyone over would still be a really nice gesture, even if it goes against best practices; from the length and tone of this thread, it seems there are enough people who would benefit.
  29. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 08 Mar Link to this post

    I understand your point, Aaron, yet having a half-baked temporary/intermediate solution which is truly a hack is not something we can build quickly and share with our customers. Even if we do so, it'll be very limited and won't work in many scenarios, which you'll probably concur will eventually cause more harm than good to people using it.

    Building Kendo UI from scratch to create true Kendo UI Angular 2 components is a gigantic effort, and as much as we want, we cannot deliver it in a couple of months. We understand our users would prefer to have something in the interim, that's why we built our strategy in 2016 to deliver Kendo UI Angular 2 component in waves starting in May.

    Even more, we'll try (although we cannot make a firm commitment right now) to flip the switch and make our Kendo UI Angular 2 repository public a month or so before May, to allow early adopters to fetch pre-preview bits and make early tests. There will also be public updates in-between the formal milestones during 2016 we shared (see this post for reference).

    Hope this will help you gradually adopt our Kendo UI Angular 2 components immediately after they are available, and develop your Angular 2 apps in parallel. Your feedback when using the early bits will be much appreciate and drive the next advancements in our Kendo UI Angular 2 journey.

    Hope this makes sense and let me know if you have additional feedback going forward.

    Kind regards,
    Stefan Rahnev,
    PM for Kendo UI, Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  30. Diego
    Diego avatar
    11 posts
    Member since:
    May 2009

    Posted 08 Mar in reply to Sebastian Link to this post

    Hi Stefan,

    we are "future" customers really disappointed about new Angular 2 time adoption. We really know that making Kendo UI components angular 2 native is really big effort....but we need also to develop our products using a well know library road-map. So this change on your road-map didn't make us so happy.

    So please make your Kendo repository public just because:

    1) we need to "learn" how to integrate your components and it takes time

    2) we also need to start integrate Sass and Bootstrap 4

    Best regards,

    Diego

     

  31. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 08 Mar Link to this post

    Thanks for chiming in, Diego. We'll do everything possible to make our (currently) private github repos public a bit in advance before the expected first Angular 2/React previews in May.

    Regards,
    Stefan Rahnev,
    PM for Kendo UI, Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready