Hello,

I am working on implementing  the Angular Editor: https://www.telerik.com/kendo-angular-ui/components/editor

One of the requirements is that when links are pasted, they turn into hyperlinks.

I was unable to find any info on how to implement this in the Forums or elsewhere.

I checked the jQuery editor https://www.telerik.com/kendo-jquery-ui/documentation/controls/editor/pasting and that one had it built in.

Any ideas on how this can be implemented?

Photo below shows missing behavior:

I want to configure a custom button for the editor toolbar as described here https://www.telerik.com/kendo-angular-ui/components/toolbar/custom-control-types/  However, the button should not always be there, depending on in which other component the editor is used. So, I wanted to approach the issue by using content projection with ng-content. I implemented the custom button and placed ng-content tag into the kendo-editor definition. However, when I try to project the custom button to the editor it does not work. The button is absent.

Below my editor implementation in an own component "my-editor".

<kendo-editor #editor
              [placeholder]="placeholder"
              [(ngModel)]="content"
              [iframe]="false"
>
  <kendo-toolbar>
    <kendo-toolbar-buttongroup>
      <kendo-toolbar-button kendoEditorBoldButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorItalicButton></kendo-toolbar-button>
      <kendo-toolbar-button kendoEditorUnderlineButton></kendo-toolbar-button>
    </kendo-toolbar-buttongroup>
    <ng-content></ng-content>             <!-- The place where the custom buttons should be inserted -->
  </kendo-toolbar>
</kendo-editor>

I inject the custom button like that

<my-editor>
  <custom-button></custom-button>
</my-editor>

Hello,

Is batch editing available in Kendo UI for Angular? If so, could you provide guidance or resources on how to implement it?

There is a bug in the Angular Kendo Editor, whereby it treats any semicolon in the style attribute as a CSS property delimiter. However, not all semicolons are CSS property delimiters, as I will show in an example below.

Version:    "@progress/kendo-angular-editor": "16.8.0".

Set the value property of <kendo-editor>  to the below value: 

<p  style="background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDo)"> </p>

When you load the editor, you will get the following error:

TypeError: Cannot read properties of undefined (reading 'trim')
    at http://localhost:9090/dev-build/vendor.js:81983:45
    at Array.forEach (<anonymous>)
    at applyStyle (http://localhost:9090/dev-build/vendor.js:81981:98)
    at http://localhost:9090/dev-build/vendor.js:81989:5
    at Array.forEach (<anonymous>)
    at restoreStyleAttr (http://localhost:9090/dev-build/vendor.js:81986:65)
    at htmlToFragment (http://localhost:9090/dev-build/vendor.js:82001:3)
    at parseContent (http://localhost:9090/dev-build/vendor.js:82041:15)
    at EditorComponent.initialize (http://localhost:9090/dev-build/vendor.js:324747:100)
    at Object.next (http://localhost:9090/dev-build/vendor.js:324378:155)

The error seems to be occurring in the file

./node_modules/@progress/kendo-drawing/dist/es2015/svg/utils/render-svg.js

Below is the problematic code. It assumes that any semicolon is a CSS property delimiter, but this is not true, as in the example above,

where the semicolon is part of the CSS value.

const applyStyle = (styleString, element) => styleString.split(';').filter(s => s !== '').forEach(s => {
  const parts = s.split(':');
  element.style[parts[0].trim()] = parts[1].trim();
});

Hello,

I have come across an issue that I was able to replicate in a stackblitz. When using dynamic columns to display a Kendo Grid's data, specifically when the grid only contains one row, the editTemplate unexpectedly reverts to a standard input field. This behavior does not occur when the grid has multiple rows.

In my example stackblitz below, I have a dropdownlist as the edit template for the column Product Type. Upon clicking it, (sometimes a double click) it turns into a input.

To repeat:
1) add product type in multi select above grid to display row
2) Click Dropdown
3) Dropdown becomes input

I'd appreciate any help, I've tried a few things like event.preventDefault and other ways to try and stop this behavior, but I cannot figure out a way. Again, it only happens when there is one row.

Thanks in advance!

Kendo UI for Angular Example Application (stackblitz.io)

https://stackblitz.com/edit/angular-ppvmbg?file=src%2Fapp%2Fapp.module.ts

Hi,

I've added an editor as following

<kendo-editor formControlName="note" [iframe]="false"></kendo-editor>

I'm trying to interact with it while testing with Cypress but no luck, i.e the following doesn't work

const input = cy.get('kendo-editor[formcontrolname=note]');
input.type('sample text');

the error is

Timed out retrying after 4000ms: cy.type() failed because this element:

<kendo-editor _ngcontent-yle-c1049="" formcontrolname="note" style="height: 180px;" _nghost-yle-c961="" ng-reflect-name="note" ng-reflect-iframe="false" dir="ltr" ariadisabled="true" class="k-editor k-state-disabled ng-untouched ng-pristine">...</kendo-editor>

has CSS pointer-events: none

pointer-events: none prevents user mouse interaction.

Could you please provide some hints on how to do this? Do we have guidelines/howtos for Cypress e2e testing of Kendo UI for Angular?

Thanks

Regardless of whether I set iframe = true or false, or switch my ViewEncapsulation strategy I cannot generate html from the editor which contains borders around table cells.   This means that table content is rendered with just whitespace around it.

Is this a bug?  How can I apply table css and have it appear in the editor's html output?