2

Can anyone provide pointers on how to integrate jQuery component KendoEditor in Angular4 application? I have already integrated jQuery component Splitter control but not sure what is the best way to integrate KendoEditor. It is unfortunate that not all components exist in Angular2/4 suite of Kendo Angular UI tools as compared to the early version of KendoUI controls (for ~AngularJS).

Any pointers will be helpful. So far I have tried using something like

textarea #questionEditor name = "questionEditor" rows="10" cols="30" and then used @View in typescript to get the reference of this editor. It seems to fail and give error like -

Cannot read property 'nativeElement' of undefined

Also, I tried similar approach using div-tags but no result till now.

EDIT

Anyone facing this issue - make sure your Kendo Themes are loaded before trying Rich text or Window JQuery controls from Kendo Angular World.

RinkuK
  • 21
  • 5

1 Answers1

0

this may help you check it 

import {Component, OnInit, ViewChild, ElementRef, AfterViewInit} from '@angular/core';
declare var kendo: any;

@Component({
  selector: 'app-text-editor',
  templateUrl: './text-editor.component.html',
  styleUrls: ['./text-editor.component.scss']
})

export class TextEditorComponent implements OnInit , AfterViewInit {

  @ViewChild("questionEditor") questionEditor : ElementRef;

  constructor() { }

  ngOnInit() { }

  ngAfterViewInit() {
     kendo.jQuery(this.questionEditor.nativeElement).kendoEditor({ resizable: {
       content: true,
       toolbar: true
     }});
  }
}
Ahmed Nasser
  • 1
  • Thanks for this answer. But what I have realized it is that some of these controls don't work as expected unless we don't have relevant "theme" loaded / associated for the component(s). That was the root cause of the issue.Unfortunately, no where in Kendo Angular documentation this has been mentioned clearly. – RinkuK Dec 06 '17 at 17:21