JS error when using inside multiple material tabs

7 posts, 0 answers
  1. Jan
    Jan avatar
    49 posts
    Member since:
    Apr 2017

    Posted 22 Oct 2019 Link to this post

    When I use multiple instances of the kendo editor in different material tabs, I get the JS error:

    TypeError: Cannot read property 'createElement' of null

    https://stackblitz.com/edit/angular-d9rsu8

     

    The problem occurs in Chrome and Edge but not in Fireox and also with the latest v8 angular packages.

  2. Martin
    Admin
    Martin avatar
    149 posts

    Posted 24 Oct 2019 Link to this post

    Hi Jan,

    Thank you for the provided example.

    Indeed this error is expected. It is caused by the editors (in Second and Third tab) which are not rendered in the DOM yet. Please, check the screenshot.

    In fact, there are no rendered editors in the DOM, except the first one. That is why "Cannot read property 'createElement' of null" error is thrown.

    In order to avoid initialization of editors that are not currently in the DOM set the iframe option to false:

    <mat-tab-group>
          <mat-tab label="First">
            <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
          </mat-tab>
          <mat-tab label="Second">
            <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
          </mat-tab>
          <mat-tab label="Third">
            <kendo-editor [iframe]="false" [value]="value"></kendo-editor>
          </mat-tab>
        </mat-tab-group>

    Here is an example

    https://stackblitz.com/edit/angular-d9rsu8-3tu5sp?file=app/app.component.ts

    I hope this helps.

    Regards,
    Martin
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  3. Itiel
    Itiel avatar
    3 posts
    Member since:
    Jan 2017

    Posted 23 Feb in reply to Martin Link to this post

    Hi Martin, 

    I encountered the same problem. In the documentation, I see that setting [iframe] to "true" causes side effects. ("the Editor will run in style non-encapsulated mode."). I don't want these effects...

    I think that this behavior is a bug you need to resolve. It doesn't make sense that an Editor inside a tab throws an exception, no matter where is located.

     

    Itiel

  4. Itiel
    Itiel avatar
    3 posts
    Member since:
    Jan 2017

    Posted 23 Feb in reply to Itiel Link to this post

    Sorry I mean setting [ifarme] to false..
  5. Martin
    Admin
    Martin avatar
    149 posts

    Posted 25 Feb Link to this post

    Hi Itiel,

    It seems that the issue is caused by the fact that the Editor is tried to be created in the non-existent container. The Editor used in div with *ngIf directive or Kendo TabStrip component works properly. We guess that there is something specific in the way of how the content of the mat tab is initialized, which is not directly related to Kendo.

    I consulted this issue with the assigned developer and I can assure you that we will try to find a way to integrate the Editor component with Angular Material Tab component. Because of technical reasons, currently, we are not sure that this is a bug on our site, but we will try to do our best to make it possible, although we think that there is something specific in the mat tab.

    Meanwhile, what I could suggest to you as a workaround is to utilize the Kendo Angular TabStrip component. Please check the attached project. To run the application execute the following command in the root folder:

    - npm i

    - ng serve

    Feel free to contact us if any further questions come up.

    Regards,
    Martin
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  6. Martin
    Admin
    Martin avatar
    149 posts

    Posted 26 Feb Link to this post

    Hi Itiel,

    A quick follow up on this case.

    After some research on our side, we found what causes the discussed error. Please track the following related GitHub issue:

    https://github.com/telerik/kendo-angular/issues/2765

    Once fixed the issue will be updated.

    Accept our apologies for all the inconvenience caused while the problem is still present.

    Regards,
    Martin
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. Itiel
    Itiel avatar
    3 posts
    Member since:
    Jan 2017

    Posted 26 Feb in reply to Martin Link to this post

    Thank you, I'll track this issue
Back to Top