Kendo version :

How to reproduce :

- Add a kendo dropdown button with some items

- Use appendTo='component' popupSetting

- Bind itemClick and close events

Stackblitz example : https://stackblitz.com/edit/kendo-dropdownbuttons-keyboardnavigation?file=app/app.component.ts

What happens :

- If you use arrows to navigate through items, is always skip one item.

- If you use enter or space to select item, the popup close and reopen immediately.

- If you prevent close as in the stackblitz example : enter and space will fire twice the itemClick event.

When setting the [zoom] value in TypeScript the drop down value does not reflect this and remains at the default of 125% even though the PDF is zoomed in/out.

Adjusting the zoom level using the buttons then "corrects" the issue and it displays the right value.

Would like the API expanded to include support for adding your own tool(s) that would allow you to tag the selected text with custom html tags.

For example, would like to be able to highlight some text, hit the custom button and then "text goes here" is replaced with "<custom>text goes here</custom>".  From some documentation research, it looks like you don't support custom tools that would be able to accomplish this, is that correct? 

From this previous post, it states that such a thing is not supported?

https://www.telerik.com/forums/add-custom-tool

Currently ng-templates can only be added as tags inside a Kendo component's html tag.  This forces the developer to use the template feature of an Angular Component.

This limits the flexibility of what you can do for any of these components and forces developers to make them stand alone Angular Components if they need to be used in their code.  This is overkill in a lot of instances and while it works great in all the examples it is not practical in every real world situation.  Especially if there is a lot of supporting HTML involved.

I have seen several other developers looking for a way to define a template outside of a component for reuse or due to some other dynamic interaction that is required.  I believe this is needed throughout the Kendo library.

Hi,

Can we have a word cloud component on the Kendo UI for Angular?

Thanks,

When using any kendo components that uses dialogs from inside an ionic application, all dialogs experience stacking context issues in iOS.

The solution for this at the moment is to tell every single component to append its dialog(s) to a specified container in a bid to better control its visibility.
Right now, not every component have an 'appendTo' setting for its dialogs (ie: Editor) which makes it unusable on iOS devices.

The feature I would like to request is a way to setup the default 'appendTo' container only once from a core service to any and all dialogs.
This would help in not having to add it manually to every single components we use and maybe make it easier for you to make this feature available to more components with less work. I would make it so it applies to the dialog component and service. (or use different methods to setup each differently)

Here's how it could look like :

@Component({
  selector:    'app-mycomponent',
  templateUrl: './mycomponent.component.html'
})
export class MyComponent implements OnInit {

  public kendoContainer: ViewContainerRef; //This would point to a container.
  
  constructor( private kendoSetupService: SetupService ) {}


  ngOnInit() {
      //This would affect all components using dialogs as well.
    this.kendoSetupService.dialogs.setDefaults({
      'appendTo': this.kendoContainer
    });
  }
}

<kendo-dropdownlist [(ngModel)]="data" [popupSettings]="{ 'appendTo': kendoContainer }"></kendo-dropdownlist>

This service could be used to override many of the kendo default behaviors with minimal code footprint in the end.
It could be divided into smaller default services instead if you prefer such as DialogSetupService

Please ensure that ALL kendo components are extended with @Output() onDataBound = new EventEmitter<any|T>();

When printing directly from Angular PDF Viewer results in a blurry printed PDF document. Downloading to PDF and printing does not affect the document

There is a dearth of browser inline editors for Word documents.  It appears that the only viable solution currently out there is to implement WOPI and this standard is complex, poorly documented and extremely difficult to implement.  There are some alternatives out there:

• https://www.zoho.com/officeplatform/integrator/wopi-alternative.html
• https://www.collaboraoffice.com/code/

The former is incredibly expensive because it charges per API call (effectively charging each time a document is opened or edited) and the latter is overly complex and for Linux users.

A further alternative is syncfusion's document editor.  This editor is good but loses formatting.

Surely it would be possible to unravel Word's open xml format and load it into a modified version of the Rich text Editor?

Basically, we have just a limitation that we could not use host directives if the directive is not standalone:

see for example :

https://angular.io/guide/directive-composition-api#adding-directives-to-a-component

and about cdk (they are not ready as well):

https://github.com/angular/components/issues/26036#issuecomment-1588683306

Thanks

Diego

Test Environment:
Browser: Edge browser Version 114.0.1823.51 (Official build) (64-bit)
OS: Windows 22H2

Steps to Reproduce:

1. Open the URL - https://angular-kendo-dropdown-list.stackblitz.io/ in edge browser.
2. Press Tab key and navigate to “Select gender” dropdown.
3. Run fastpass in Accessibility insights for web extension.

Actual Result: Fastpass run shows "Ensures every ARIA input field has an accessible name" error for “Select gender” dropdown.

Expected Result: Every ARIA input field has an accessible name
Fix ONE of the following:
aria-label attribute does not exist or is empty
aria-labelledby attribute does not exist, references elements that do not exist or references elements that are empty
Element has no title attribute

Hi,

The condition is that we need a homepage with multiple dynamic tabs. Only one component is active at any given time in this feature. However, if we want to view the data from two or more tabs simultaneously, we can drag and position them next to each other, similar to how we see tabs in Chrome and other browsers. This functionality is controlled by docking managers.

Thank you in advance for your consideration.

There appear to be no decent solutions for PDF viewing in Angular in handling viewing of downloaded PDF files that works intelligently and consistently across all desktop and mobile browsers, and supports navigation, saving, and printing.

1. The Angular Kendo Report Viewer is limited to Telerik reports generated using the Telerik Report web infrastructure and doesn't handle PDFs from other sources.

2.  There is an open source Angular viewer, that provides reasonable viewing and navigation, but doesn't support save to file. or print.

https://github.com/VadimDez/ng2-pdf-viewer

3.  Syncfusion have a very nice Angular PDF viewer, but requires buying there whole Angular suite.  

https://help.syncfusion.com/angular/pdfviewer/getting-started  
A Kendo Angular PDF Viewer Component
 

When adding a filter to a grid, there is no way to define "case insensitivity" for the oData filter query.
There is a property in the Data Query library (toLower) but it seems only to work for the value and not accessible from grid.

This Feature Request is to have the ability to do case insensitive queries via the query string and not in the API.

Reproduce the bug with

import { Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <button (click)="show = !show">Show/hide</button>
    <ng-container *ngIf="show">
      <div class="example-config">
        Selected value is: {{ value | kendoDate: "MM/dd/yyyy" }}
      </div>
      <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
          [(value)]="value"
          fillMode="outline"
        ></kendo-datepicker>
        <p>
          (use Alt+↓ to open the calendar, ← and → to navigate, ↑ to increment
          and ↓ to decrement the value)
        </p>
      </div>
    </ng-container>
  `,
  styles: [
    `
      kendo-datepicker {
        width: 170px;
      }
    `
  ]
})
export class AppComponent {
  public show = false;
  public value: Date = new Date(2000, 2, 10);
}

error displayed:

"TypeError: Cannot read properties of undefined (reading 'nativeElement')
    at set fillMode [as fillMode] (progress-kendo-angular-dateinputs.mjs:9186:53)
    at Object.ngOnChangesSetInp"

in file
node_modules/@progress/kendo-angular-dateinputs/fesm2020/progress-kendo-angular-dateinputs.mjs

at

 /**
     * Sets the fillMode of the component.
     *
     * The possible values are:
     * * `solid` (Default)
     * * `flat`
     * * `outline`
     * * `none`
     *
     */
    set fillMode(fillMode) {
        this.renderer.removeClass(this.wrapper.nativeElement, getFillModeClass('input', this.fillMode));
        this.renderer.removeClass(this.toggleButton.nativeElement, getFillModeClass('button', this.fillMode));
        this.renderer.removeClass(this.toggleButton.nativeElement, `k-button-${this.fillMode}-base`);
        const newFillMode = fillMode ? fillMode : DEFAULT_FILL_MODE;
        if (newFillMode !== 'none') {
            this.renderer.addClass(this.toggleButton.nativeElement, getFillModeClass('button', newFillMode));
            this.renderer.addClass(this.toggleButton.nativeElement, `k-button-${newFillMode}-base`);
            this.renderer.addClass(this.wrapper.nativeElement, getFillModeClass('input', newFillMode));
        }
       

import { AfterViewInit, Component } from "@angular/core";

@Component({
  selector: "my-app",
  template: `
    <button (click)="show = !show">Show/hide</button>
    <ng-container *ngIf="show">
      <div class="example-config">
        Selected value is: {{ value | kendoDate: "MM/dd/yyyy" }}
      </div>
      <div class="example-wrapper" style="min-height: 400px">
        <p>Select a date:</p>
        <kendo-datepicker
          [(value)]="value"
          [fillMode]="fillMode"
        ></kendo-datepicker>
        <p>
          (use Alt+↓ to open the calendar, ← and → to navigate, ↑ to increment
          and ↓ to decrement the value)
        </p>
      </div>
    </ng-container>
  `,
  styles: [
    `
      kendo-datepicker {
        width: 170px;
      }
    `
  ]
})
export class AppComponent implements AfterViewInit {
  public show = false;
  public value: Date = new Date(2000, 2, 10);

  public fillMode = "solid";

  ngAfterViewInit() {
    Promise.resolve().then(() => (this.fillMode = "outline"));
  }
}