Telerik Forums
Kendo UI for Angular Forum
0 answers
4 views
I had a customer who would like us to make 'Enter' work similar to Tab for moving across consecutive fields. For that I built a directive to tag onto various open fields where it was applicable (ie. inputs, textareas, kendo-dropdownlist, kendo-dateinput, just avoiding multicolumncombobox because that requires Enter as part of it's functioning).

What I've noticed is this will work for inputs, textareas, even kendo-dropdownlists, but it seems like for kendo-dateinput it will never 'tab' onto or out of those. Here's an example of both the directive and the fields I'm talking about living in the wild:

import { Directive, HostListener, ElementRef } from '@angular/core';

@Directive({
  selector: '[tab13]'
})
export class Tab13Directive {

  constructor(private el: ElementRef) { }

  @HostListener('keydown', ['$event'])
  onKeyDown(event: KeyboardEvent) {
    if (event.key === 'Enter') {
      event.preventDefault();
      const nextElement = this.findNextFocusableElement();
      if (nextElement) {
        nextElement.focus();
      }
    }
  }

  private findNextFocusableElement(): HTMLElement | null {
    const tab13Elements = document.querySelectorAll('[tab13]');
    const currentIndex = Array.from(tab13Elements).indexOf(this.el.nativeElement);

    for (let i = currentIndex + 1; i < tab13Elements.length; i++) {
      if (this.isFocusable(tab13Elements[i] as HTMLElement)) {
        return tab13Elements[i] as HTMLElement;
      }
    }

    return null;
  }

  private isFocusable(element: HTMLElement): boolean {
    return (
      element.hasAttribute('tab13')
    );
  }
}

HTML example:

<div style="width: 100%; display: flex; flex-wrap: wrap; white-space: nowrap;">
  <input tab13 id="{{ '0-qs-code' }}" tabindex="{{'120007'}}" />
  <input tab13 id="{{ '0-qs-email' }}" tabindex="{{'120008'}}" />
  <kendo-dateinput tab13 id="{{ '0-qs-rfqsent' }}" tabindex="{{'120009'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
  <kendo-dateinput tab13 id="{{ '0-qs-rfqrec' }}" tabindex="{{'120010'}}" format="M/d/yy" placeholder="M/d/yy"></kendo-dateinput>
  <input tab13 id="{{ '0-qs-quoteno' }}" tabindex="{{'120011'}}"  />
</div>

The tab works across all of these but for reasons I'm unfamiliar with the tab13 selector fails at 0-qs-email when the next input is a kendo-dateinput and it fails in 0-qs-rfqsent but it will work from 0-qs-rfqrec because the next selector is an input rather than a kendo-dateinput.

I'm hoping to up my product knowledge a bit and get a better grasp of what the kendo-dateinput is doing under the hood that might explain this behavior and what workarounds might be available for improving the directive.

Ron
Top achievements
Rank 1
Iron
Iron
 asked on 15 Mar 2024
0 answers
5 views

Hello,

 

I have a kendo grid with many columns and virtualcolumns set to true. I would like to know how to have the horizzontal scroll working while selecting cells with drag enable in order to select cells that are outside of the portion of grid visible in the screen. I've noticed that if I set drag to false the scroll works but then I'm not able to select multiple cells with the mouse. Thanks

GIUSEPPE
Top achievements
Rank 1
 asked on 14 Mar 2024
1 answer
9 views

Is it possible to do nested grouping in a grid? And I don't mean a column grouping. Like handling a case where the grid can do a

file1
file2
folder1
  file3
  folder2
    folder3
      folder4
        file4
        file5

And do we have some sample code if this is possible?

 

Thanks!

 

J

Zornitsa
Telerik team
 answered on 14 Mar 2024
0 answers
4 views

I have a custom control type in a toolbar container (a simple input text box); inside the input box the arrow keys do not work.
Upon investigation I discovered that the problem is related to toolbar navigation (it adds a listener to the keydown event and overrides the arrow keys), so is there a method to avoid this? I though there was a property like navigable to enable or disable this feature.

I found a workaround, but it's almost a hack because it accesses private variables:
inside aferviewInit of toolbar's the parent i call 😱

toolbar["toolbarKeydownListener"]()

to remove the  listener, it works until you change the listener name.
i did an example 
https://stackblitz.com/edit/angular-ubjvvg?file=src%2Fapp%2Fcustom-tool.component.ts,src%2Fapp%2Fapp.component.ts

Greetings

 

n/a
Top achievements
Rank 1
 asked on 14 Mar 2024
0 answers
6 views

I have an angular project that has a kendo grid that needs to be exported into PDF.  Kendo grid has an expanded details per specific items when conditions met. 

As can see below, I need to make the parent row to be together with its expanded detail when the page breaks. How can I achieve it?



Appreciate the response about my inquiry.

 

Thank you!

Yadabase
Top achievements
Rank 1
 asked on 13 Mar 2024
2 answers
13 views

I am having an issue with compiling angular (webpack) after adding @progress/kendo-angular-pdfviewer@14.3.0.  It is referencing pdfjs-dist in the error.  I do not see anywhere in the Getting Started > Dependencies about pdfjs-dist being needed.  The StackBlitz demo does not contain that library either.  When I try adding the pdfjs-dist module (either latest 4.0 or earlier 3.11), more errors occur related to pdfjs-dist.  My tsconfig.json compilerOptions has module=es2020 and target=es2022.  I do not have issues with any other @progress/kendo-angular-xxxxxx modules, and the @progress/kendo-license is included.  Here is the error without pdfjs-dist module installed:

ERROR in ./node_modules/@progress/kendo-angular-pdfviewer/fesm2020/progress-kendo-angular-pdfviewer.mjs 17:0-43
Module not found: Error: Can't resolve 'pdfjs-dist/build/pdf.worker.entry' in '[path to project]\node_modules\@progress\kendo-angular-pdfviewer\fesm2020'
Did you mean 'pdf.worker.entry.js'?
BREAKING CHANGE: The request 'pdfjs-dist/build/pdf.worker.entry' failed to resolve only because it was resolved as fully specified
(probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
The extension in the request is mandatory for it to be fully specified.
Add the extension to the request.
resolve 'pdfjs-dist/build/pdf.worker.entry' in '[path to project]\node_modules\@progress\kendo-angular-pdfviewer\fesm2020'
  Parsed request is a module
  using description file: [path to project]\node_modules\@progress\kendo-angular-pdfviewer\package.json (relative path: ./fesm2020)
    Field 'browser' doesn't contain a valid alias configuration
    resolve as module
 
Adrian
Top achievements
Rank 1
Iron
 answered on 13 Mar 2024
0 answers
8 views

Hello!

I have a grid filter is specified as "menu"  ([filterable]="'menu'")

Some the grid columns are created dynamically like this:

<kendo-grid-column *ngFor="let c of myColumnsObjects"
        field="{{ c.name }}"
        title="{{ c.title }}"
    >
    <ng-template
          kendoGridFilterMenuTemplate
          let-column="column"
          let-filter="filter"
          let-filterService="filterService"
        >
          <app-mycolumn-filter
            [field]="column.field"
            [filterService]="filterService"
            [currentFilter]="filter"
            [distinctData1]="getDistinctData1(column.field)"
            [distinctData2]="getDistinctData2(column.field)"
            [distinctData3]="getDistinctData3(column.field)"
          ></app-mycolumn-filter>
        </ng-template>
    <ng-template 
      kendoGridCellTemplate 
      let-dataItem >
        <ng-container *ngIf="getObjectByColumnName(c.name, dataItem) as myItem">
          <div class="{{getClassByObject(myItem)}}">
            <div>{{myItem.dataOfField1}}</div>
            <div>{{myItem.dataOfField2}}</div>
            <div>{{myItem.dataOfField3}}</div>
          </div>
        </ng-container>
    </ng-template>
    </kendo-grid-column>

Where

myColumnsObjects is

interface IMyDynamicallyColumn {
  name: string;
  title: string;
}

dataItems is array of

interface IMyData {
  id: number;
  name: string;
  somecomlexobject: any;
  ....
  myItems: IMyItem[];
  otheItems: IOtherItem[];
}

myItem is: 

interface IMyItem {
  id: number;
  dataOfField1: string;
  dataOfField2: number;
  dataOfField3: EMyItemState;
}

const enum EMyItemState {
  State1 = 'state1',
  State2 = 'state2',
  ...
  State<N> = 'state<n>'
}


Input data   distinctData1, distinctData2 and distinctData3 used in angular's component of app-mycontrol-filter.

In this case, the standard filter does not work.

How can I organize a filter on an objects (type is IMyItem) associated with a column using all the properties of the object?

 

Vsevolod
Top achievements
Rank 1
Iron
 asked on 13 Mar 2024
1 answer
5 views
All settings that affect the appearance("backgroundColor", "color" or "strokeWidth") of the signature must be applied before you start drawing the signature. If you apply the parameters for changing the appearance of the signature after the signature is drawn, the value does not change and the "valueChange" event is not triggered. However, the changes are applied to the signature canvas. How can I fix this?
Hetali
Telerik team
 answered on 12 Mar 2024
1 answer
11 views
Kendo UI is  it possible to draw  directly on the kendo-pdfviewer from the angular component library.
Things II have tried:
-embedding it in a drawing component to draw over - the problem here being  that the kendo-pdfviewer is removed from  the  page completely to make way  for the  canvas
-I tried to super impose the canvas over the kendo-pdfviewer with a relative off set of -y in CSS - The problem here was that although it worked for the most part the canvas then blocked the  PDF controls such as scrolling (especially if set to the same size).
-I tried to hook the canvas in the PDF to draw - here I just did not see any success. It seemed like  either I was drawn over or it simply was not used. Not the canvas is height="2376" x width="1836"
Here is some rough code for the last option I tired:
public pdfLoad(pdfViewerLoadEvent: PDFViewerLoadEvent)
  {
    this.pdfViewerContext = pdfViewerLoadEvent.context;
    this.pdfViewerContext.pdfDoc.getPage(1).then(async (page)=>{
      var scale = this.pdfViewerContext.zoom;
      var viewport = page.getViewport({scale});
      var canvas: HTMLCanvasElement  = document.getElementById('the-canvas') as HTMLCanvasElement;
      var context = canvas.getContext('2d')!;

      canvas.width = Math.floor(viewport.width * scale);
      canvas.height = Math.floor(viewport.height * scale);
      canvas.style.width = Math.floor(viewport.width) + "px";
      canvas.style.height =  Math.floor(viewport.height) + "px";

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();

      var transform: number[] | undefined = scale !== 1
         ? [scale, 0, 0, scale, 0, 0]
         : undefined;
      var transform: number[] | undefined = [2,0,0]

      await page.render({
          canvasContext: context!,
          transform: transform,
          viewport: viewport
      });

      context.beginPath();
      context.arc(300, 300, 100, 0, 2);
      context.stroke();
    });
  }

Martin
Telerik team
 updated answer on 11 Mar 2024
0 answers
6 views

Hi, we want to split our applications via Module Federation. Works so far except for the applications that use Kendo UI (simple split button is enough). We always get the following error message.

 

"

ERROR Error: Uncaught (in promise): Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
Error: It looks like your application or one of its dependencies is using i18n.
Angular 9 introduced a global `$localize()` function that needs to be loaded.
Please run `ng add @angular/localize` from the Angular CLI.
(For non-CLI projects, add `import '@angular/localize/init';` to your `polyfills.ts` file.
For server-side rendering applications add the import to your `main.server.ts` file.)
    at _global.$localize (core.mjs:31692:15)
    at consts (progress-kendo-angular-buttons.mjs:2559:31)
    at createTView (core.mjs:12070:60)
    at getOrCreateComponentTView (core.mjs:12045:28)
    at addComponentLogic (core.mjs:12780:19)
    at instantiateAllDirectives (core.mjs:12583:9)
    at createDirectivesInstances (core.mjs:12008:5)
    at ɵɵelementStart (core.mjs:16299:9)
    at MyComponent_Template (my-component.component.html:2:6)
    at executeTemplate (core.mjs:11966:13)
    at resolvePromise (zone.js:1193:31)
    at resolvePromise (zone.js:1147:17)
    at zone.js:1260:17
    at _ZoneDelegate.invokeTask (zone.js:402:31)
    at core.mjs:10715:55
    at AsyncStackTaggingZoneSpec.onInvokeTask (core.mjs:10715:36)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Object.onInvokeTask (core.mjs:11028:33)
    at _ZoneDelegate.invokeTask (zone.js:401:60)
    at Zone.runTask (zone.js:173:47)

"

Daniel
Top achievements
Rank 1
 asked on 11 Mar 2024
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?