Questions on Kendo UI for Angular Forum

0 answers

2 views

preserving format of paragraphs in Kendo Editor after saving

I want to ensure that the spacing between paragraphs is preserved exactly as you typed it into the Kendo Editor. Does the Editor have this capability already or would I have to do a work-around?

Editor

asked on 19 Apr 2024

0 answers

14 views

Using a style gets defaulted if you select the color gradient or background

Hello,

I would like to know if this is expected behavior, if I have to possibly adjust my code, or if this is a bug.

The issue is when typing and selecting a font family or size and then selecting the left button of the color gradient or background the style will get reset to the default values for font family and style. Or, maybe this is due to the underlying ProseMirror change in node.

Please see my ScreenPal for demonstration of the issue.

https://somup.com/cZnhrjpi34

Thank you for your help.

updated question on 05 Feb 2024

1 answer

23 views

Kendo component not opening dropdown menu

HI, im using cypress testing framework and the component we use are kendo components, for some reason in the browser testing enviroemtn the grid component drop down menu for an option dose not work, the test clicks the component however it dose not open it. It works fine when im using the app in dev or production however it dose not in the cypress running env.

however this then gose back to the first picture i provided and dose not open up the kendo component

here is the code im trying to run on it

cy.get('div[aria-label="Press SPACE to deselect this row."]').find('div.ag-cell-value').eq(0).click({force: true});

why is this and how can i fix it so it dose open up in test environment

DropDownList

DropDownTree

Editor

answered on 22 Jan 2024

1 answer

24 views

In-Cell Editing WITHOUT Enter Key

Hello All,

I've got a product owner that requires the in-cell editing without needing to press Enter button. They want the cell to automatically enter edit mode simply by arrowing around the grid. My dev team is struggling to make this happen. Any suggestions or samples that would help us accomplish this? If we aren't able to make this work, we will have to use an entirely different framework (or roll our own) for grids, which I'm hoping to avoid.

Thanks

Editor

Grid

answered on 13 Dec 2023

1 answer

45 views

Customize dialog for the Insert Link tool in Editor

I'm using the Kendo Angular editor in my application and am wondering if there is a way to customize the Insert Link directive that is used by default? The dialog is working fine but I need to enforce that users prefix the URL with (http:// or https://).

I have looked through all the documentation I can find and am unable to find a way to alter it for Angular.

Alternatively is there an event that can be hooked into once the dialog is closed to do the validation there?

Thanks in advance.

Editor

ToolBar

answered on 23 Nov 2023

1 answer

137 views

Unable to clear display value of Kendo Editor when wrapped in custom component

I am trying to create a custom component that wraps the Kendo Editor so I can display a label and validation messages all within the same component. The goal is to make it reuseable and self-contained. The majority of it is working except for clearing out the form. When reset is called on the parent form (and then the form control) the backing value is reset to null but the display value remains the same.

The code for the custom component is below. I feel like either I'm missing something or the implementation is not correct. Thanks in advance.

rich-text.component.ts

import { Component, forwardRef, Injector, Input, OnDestroy, OnInit } from '@angular/core';
import { ControlValueAccessor, FormControl, FormControlDirective, FormControlName, FormGroupDirective, NgControl, NgModel, NG_VALIDATORS, NG_VALUE_ACCESSOR, Validator, Validators } from '@angular/forms';
import { PaletteSettings } from '@progress/kendo-angular-inputs';
import { ERROR_MESSAGES } from 'core/constants';
import { noWhitespaceValidator } from 'core/helpers/customValidators';
import { HTMLUtilities } from 'core/services/utility/html-utilities.service';
import { Subscription } from 'rxjs';

@Component({
    selector: 'rich-text',
    templateUrl: './rich-text.component.html',
    styleUrls: ['./rich-text.component.scss'],
    providers: [
        {
          provide: NG_VALUE_ACCESSOR,
          multi: true,
          useExisting: forwardRef(() => RichTextComponent)
        },
        {
            provide: NG_VALIDATORS,
            useExisting: forwardRef(() => RichTextComponent),
            multi: true
          }      
      ]
  })
  
export class RichTextComponent implements OnInit, OnDestroy, ControlValueAccessor, Validator {

    @Input() label: string = 'Please supply label';
    @Input() placeholder: string = 'Please provide a value';

    public paletteSettings: PaletteSettings = {
        palette: 'basic'
    }

    formControl = new FormControl('', [Validators.required, noWhitespaceValidator]);
    subs: Subscription[] = [];
    _htmlUtilities: HTMLUtilities;
    onChange: any = () => {};
    onTouch: any = () => {};

    constructor(htmlUtilities: HTMLUtilities) {
        this._htmlUtilities = htmlUtilities;
    }

    ngOnInit(): void {

    }

    ngOnDestroy(): void {
        this.subs.forEach((s) => s.unsubscribe());
    }

    writeValue(value: string): void {
        if (value) {
            this.formControl.setValue(value);
        }

        if (value === null) {
            this.formControl.reset();
            this.formControl.setValue('');
        }
    }

    registerOnChange(fn: any): void {
        this.subs.push(
            this.formControl.valueChanges.subscribe(fn)
          );
    }

    registerOnTouched(fn: any): void {
        this.onTouch = fn;
    }

    validate(_: FormControl) {
        return this.formControl.valid ? null : this.formControl.errors;
    }

    getErrorMessage() {
        if (this.formControl.errors['required']) {
            return ERROR_MESSAGES.REQUIRED;
        }
        if (this.formControl.errors['whitespace']) {
            return ERROR_MESSAGES.WHITESPACE;
        }
    }
}

rich-text.component.html

<div>
  <kendo-label [text]="label" class="rich-text-label"></kendo-label>
    <kendo-editor [formControl]="formControl" (blur)="onTouch()"
      [placeholder]="placeholder" [pasteCleanupSettings]="_htmlUtilities.pasteCleanupSettings">
        <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>
          <kendo-toolbar-colorpicker
            kendoEditorForeColor
            [paletteSettings]="paletteSettings"
          ></kendo-toolbar-colorpicker>
          <kendo-toolbar-colorpicker
            kendoEditorBackColor
            [paletteSettings]="paletteSettings"
          ></kendo-toolbar-colorpicker>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button
              kendoEditorInsertUnorderedListButton
            ></kendo-toolbar-button>
            <kendo-toolbar-button
              kendoEditorInsertOrderedListButton
            ></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
          <kendo-toolbar-buttongroup>
            <kendo-toolbar-button
              kendoEditorCreateLinkButton
            ></kendo-toolbar-button>
            <kendo-toolbar-button kendoEditorUnlinkButton></kendo-toolbar-button>
          </kendo-toolbar-buttongroup>
        </kendo-toolbar>
      </kendo-editor>
  <mat-error *ngIf="formControl.invalid">
    {{getErrorMessage(formControl) | translate}}
  </mat-error>
</div>

Editor

answered on 13 Nov 2023

0 answers

43 views

Editor size customization

According to https://www.telerik.com/kendo-angular-ui/components/editor/styling/#toc-setting-the-height I can customize the size of the editor area. Is it possible to make it fill all available space?

height: 100%;

does not accomplish that unfortunately.

Editor

asked on 24 Jul 2023

0 answers

48 views

Kendo-Angular-Editor: ViewEncapsulation

According to https://www.telerik.com/kendo-angular-ui/components/editor/styling/#toc-setting-the-height I have to set the [iframe] property to false and disable the ViewEncapsulation. The second one I don't understand. According to https://angular.io/guide/view-encapsulation ViewEncapsulation guarantees that the styles I apply to my component would not propagate to the rest of my application. So in my understanding, if it is enabled, the styles I apply to the Kendo-Angular-Editor inside my component would not propagate beyond that component, that's all. So why do I need to disable it then if I don't care about possible propagation?

Editor

Styling

updated question on 10 Jul 2023

0 answers

59 views

Kendo-Angular-Editor: Content projection for custom toolbar

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>

Button

Editor

ToolBar

updated question on 07 Jul 2023

1 answer

53 views

Buttons in the editor's toolbar behave incorrectly

Hello, I’ve encountered an issue with Editor. After updating the main @progress dependencies to 11.6.0 along with @progress/kendo-theme-bootstrap and @progress/kendo-theme-default to 6.2.0, the buttons in the editor's toolbar started behaving incorrectly. However, I'm not able to reproduce this issue on examples of the Kendo Editor in Stackblitz.

Upon loading the page with the editor, the Clear button is displayed as active until the editor is clicked on (even though the class with disabled styles should be attached to the button immediately). Additionally, when clicking on the B button or any other button, the k-selected class is not added, but ng-reflect-selected becomes "true". However, clicking on another button in the toolbar results in the class being added and the button being recolored.

Please find the screen recording with the issue attached.

Could you please advise me on what might be causing this issue?

Editor