Problem with KendoValueAccessor in angular 2.0.0-beta.0

37 posts, 1 answers
  1. alfred
    alfred avatar
    3 posts
    Member since:
    Nov 2014

    Posted 16 Mar 2016 Link to this post

    Thanks Diego and Jason for your input.  Wonder anyone sorted out how to load options template into KendoUI? I am not sure how to use dynamicComponentLoader to load angular component into the option.

    Many Thanks

    Eg. I want to display {{this._test}} inside the items in the ToolBarOptions. 

        private getTopNavBarTopOptions():kendo.ui.ToolBarOptions{
          let component=this;
          let options:kendo.ui.ToolBarOptions={
            items: [
              { template: "<label>{{this._test}}<label>"},
            ]
          }
          return options;
        }

        ngAfterViewInit() {
            try {
                this.createUIControls();
                window['TopNavBarComponent'] = this; //not the best way to get the component reference to the global scope.  Is there another way?
            }
            catch (e) { console.log(e);}//Log.error(e); }
            finally {
            }
        }

        private createUIControls(): void {
            this._uiControls.topNavBarTop =      $("#topNavBarTop").kendoToolBar(this.getTopNavBarTopOptions()).data("kendoToolBar");
            this._uiControls.isLoaded = true;
        }

    with template:`

    <div class="topNavBarTop" id="topNavBarTop"></div>

    `

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

    Posted 16 Mar 2016 in reply to alfred Link to this post

    I am not sure if you can.  Inside of Templates you have to use the Kendo template syntax and not Angular.

    In your scenario it would be  { template: "<label>#=window['TopNavBarComponent']._test#<label>"},

    There may be a way to load your current component into the template world that kendo has made but I have not found a way.  Does anyone at Telerik know if this can be done?  

     

     

     

  3. alfred
    alfred avatar
    3 posts
    Member since:
    Nov 2014

    Posted 17 Mar 2016 Link to this post

    Thanks Jason for your fast response.

    I sorted out my own question with dynamic component loader. Here is my temporary solution, which kind of work but is clumsy. Thanks for your suggestion above, which make small twist of local variables alot easier than making lots of sub component just for injecting into the kendo template.

     

    ...

     try {
     this.createUIControls();

     let topNavBarTop = $("#topNavBarTop");
     this.loader.loadNextToLocation(childComponent, this.elementRef)

     .then((result:ComponentRef) => {

     this.childComponent=result.instance;

    this.childComponent._test="xxx";

    topNavBarTop.append(result.location.nativeElement);


          });

                window['TopNavBarComponent'] = this; //not the best way to get the component reference to the global scope.  Is there another way?
            }
            catch (e) { console.log(e);}//Log.error(e); }
            finally {
            }

  4. alfred
    alfred avatar
    3 posts
    Member since:
    Nov 2014

    Posted 17 Mar 2016 Link to this post

    By the way Jason, I tried your suggestion of  using inside the items of toolbar for eg.

    { template: "<label>#=window['TopNavBarComponent']._test#<label>"},

     

    This normally would work in plain old kendo with our without angular1. However, this doesn't seems working in this hacked version after converting the kendo widget in ngAfterViewInit block. Above code just gives me plain "#=window['TopNavBarComponent']._test#" without any substitution as content of the label item of the toolbar.

  5. Hugo
    Hugo avatar
    1 posts
    Member since:
    Mar 2016

    Posted 30 Mar 2016 in reply to Sebastian Link to this post

    Hi,

    is there any chance that Kendo UI can be used with Angular2 upgrade adapter ? Right now, it cannot as directives doesn't follow the basic rules (see Using Component Directives here: Angular2 Upgrade) and directives are registered both as 'E' and 'A' which is simply not supported by the upgrade adapter (cannot have more than one type of restrict). Supporting this would allow early development in Angular2 with Kendo UI still working in AngularJS.

    Thanks

  6. Jessica
    Jessica avatar
    2 posts
    Member since:
    Apr 2017

    Posted 02 Aug in reply to Jason Link to this post

    Hi Jason,

    did you by any chance managed to implement the onSelect of the kendo.treeview with the TreeViewSelectEvent? I am completely desperate, I am not able to get the orignially folderData from the e.node. I am able to get the internal uid of the li element that was selected, but it seems impossible to grab the treeview from my typescript code to search the right folderData like this: treeview.dataSource.getByUid(uid). I am currently working with Angular4. 

    Any advice would be great!

    Cheers, Jessica

     

  7. Nencho
    Admin
    Nencho avatar
    1661 posts

    Posted 04 Aug Link to this post

    Hello Jessica,

    I noticed that you had submitted a similar question in another forum thread, which I had already replied. Please refer to it, in order to continue the correspondence there and hence avoid duplication.

    http://www.telerik.com/forums/kendo-treeview-for-jquery-used-in-angular2-apps-with-typescript

    Thank you in advance.

    Regards,
    Nencho
    Progress Telerik
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top