Questions on Kendo UI for Angular Forum

1 answer

97 views

Signature Field. No valueChange event when changing backgroundColor, color or strokeWidth.

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?

Signature

answered on 12 Mar 2024

1 answer

123 views

Is it possible to draw/enrich on the kendo-pdfviewer in Angular.

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();
    });
  }

Drawer

Drawing

PDFViewer

updated answer on 11 Mar 2024

0 answers

218 views

Kendo Splitbutton + Module Federation

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)

"

General Discussions

asked on 11 Mar 2024

0 answers

283 views

How to use custom icon for reordering row in Grid

We want to use the built in re-ordering rows feature in kendo grid. Currently Kendo-grid-rowreorder-column has its default icon. How do I change it to a different icon (i.e using font awesome). Plus, how do I use custom content for a dragging row (as shown in the attached file)

Drag and Drop

Grid

asked on 08 Mar 2024

0 answers

86 views

Kendo Dropdownlist with [filterable]="true", unable to change the filter(search icon) position.

How to change the search icon (search icon) which is placed at the left near the search text box. I want this search icon to be placed immediate right to the search text box. Kindly assist.

Thank you

DropDownList

asked on 08 Mar 2024

0 answers

250 views

How to change the placeholder text color in Date Picker

How to change the placeholder text color in Date Picker ? I have tried to modify it, but ended up it is changing the color of value text not the placeholder text.

Kindly assist here.

Thank you.

DatePicker

asked on 08 Mar 2024

0 answers

184 views

Kendo Scheduler Month View header template week names in short format, also custom event height for the events

Hi,

In Kendo Scheduler (Month View option) would like to set short form of week names, also in the cells, event height dynamic, like below image

Scheduler

asked on 08 Mar 2024

1 answer

78 views

changing functionality of the multiselect component

i'm currently using the kendoUI multiselect component, and wondering if there is anyway to change the default functionality, where instead of coloring the selected item. it can be removed from the list once it has been selected populates in the input element and added back to the list once it de-selected.

MultiSelect

answered on 08 Mar 2024

1 answer

70 views

Line style option of Scatter line chart -Angular 13

Hello,

Linestyle option of scatterLine chart is not working. Whatever value I put there, it is not changing line style. It is always normal.

Even if I put just some random value, it does not throw any error and plotting chart as normal linestyle.

I am trying to make it smooth. Let me know what I am missing.

    <kendo-chart-series-defaults
        [style]="'smooth'"
        type="scatterLine"
    >
    </kendo-chart-series-defaults>

Charts

answered on 06 Mar 2024

1 answer

89 views

Error in Kendo Scheduler slot select on Day Light Saving Day change day

To reproduce this issue please select your time zone as any time zone of US (eastern, central or pacific) select the date of date light saving change either the start or end of day light saving i.e the 2nd Sunday of March or November click on 4 am (or to be precise add your time zone offset to 2 am and click on any for example for eastern standard time any time from 2am to 7 am) it returns the wrong time. This can be observed for any kendo scheduler version from 2.1.6 to 15..1.0.

The ideal behavior for any time after the change time i,e 2 am should return the value of the slot clicked but as of now it is incorrect for any value till 2+offest of the the time zone with day light saving.

To reproduce this select a US time zone as mentioned (eastern, central or pacific) select 10th march 2024 or 3rd November 2024 and select 3am, 4 am , 5am etc.

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

Let me know if you need more details

Calendar

Scheduler

answered on 06 Mar 2024