Problem with KendoValueAccessor in angular 2.0.0-beta.0

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

    Posted 16 Mar 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 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. Kendo UI is VS 2017 Ready
  4. alfred
    alfred avatar
    3 posts
    Member since:
    Nov 2014

    Posted 17 Mar 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 {
            }

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

    Posted 17 Mar 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.

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

    Posted 30 Mar 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

Back to Top
Kendo UI is VS 2017 Ready