This is a migrated thread and some comments may be shown as answers.

Problem with KendoValueAccessor in angular 2.0.0-beta.0

36 Answers 730 Views

General Discussions

This is a migrated thread and some comments may be shown as answers.

36 Answers, 1 is accepted

Accepted

answered on 17 Dec 2015, 10:34 AM

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!

answered on 17 Dec 2015, 03:51 PM

kendo_value_accessor.zip

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

answered on 14 Jan 2016, 04:11 PM

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

answered on 02 Feb 2016, 04:04 PM

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

answered on 02 Feb 2016, 04:37 PM

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!

answered on 02 Feb 2016, 05:28 PM

[quote]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.
[/quote]

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.

answered on 16 Feb 2016, 08:01 AM

[quote]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.

[/quote]

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.

answered on 04 Mar 2016, 05:06 AM

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.

answered on 04 Mar 2016, 05:33 AM

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.

answered on 04 Mar 2016, 07:15 AM

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

answered on 05 Mar 2016, 01:36 PM

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?!*).

answered on 07 Mar 2016, 12:43 PM

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!

answered on 08 Mar 2016, 10:39 AM

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!

answered on 16 Mar 2016, 08:47 AM

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:`

answered on 17 Mar 2016, 11:57 PM

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 {
}