Questions on Kendo UI for Angular Forum

7 answers

1.1K+ views

Passing a custom variable to ToolTip template

I have seen following example https://www.telerik.com/kendo-angular-ui/components/tooltip/templates/ which shows how to use a template to render custom content for a tooltip, however it only shows very basic example of passing an "anchor" to the template, I would like to pass in a variable to the template, how do I do that?

In below example, I would like to pass the dataItem from within a ngFor to the template so that I can render custom tooltip content based on the data in dataItem,

<ng-template #approvalColTooltipContentTemplate let-dataItem>

{{dataItem | json}}

</ng-template>

<div *ngFor="let dataItem of dataItems">

<div kendoTooltip filter=".gridTooltip" [ tooltipTemplate]="approvalColTooltipContentTemplate">

<span class="gridTooltip"><span class="k-icon warningGreen"></span></span>

<span class="gridTooltip"><span class="k-icon warningOrange"></span></span

<span class="gridTooltip"><span class="k-icon k-i-warning"></span></span>

</div>

Thanks

Tooltip

answered on 05 Apr 2024

0 answers

14 views

npm_package error in Kendo Pdf Viewer

Hi All,

We are using angular kendo ui pdf viewer version "13.2.0"

Angular version "15.0.4"

we are getting this error when we run ng serve or ng build

Error: node_modules/pdfjs-dist/types/src/display/text_layer.d.ts:119:41 - error

TS2552: Cannot find name 'OffScreenCanvasRenderingContext2D'. Did you mean 'Canv

asRenderingContext2D'?



119         ctx: CanvasRenderingContext2D | OffScreenCanvasRenderingContext2D |

null;

                                            ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~



  node_modules/typescript/lib/lib.dom.d.ts:3495:13

    3495 declare var CanvasRenderingContext2D: {

                  ~~~~~~~~~~~~~~~~~~~~~~~~

    'CanvasRenderingContext2D' is declared here.

Also attaching the error snapshot and also attaching the projects package.json file

Here is the package.json file as well for your reference.

{
  "name": "test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "serve": "node --max_old_space_size=8192 ./node_modules/@angular/cli/bin/ng serve",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.0.4",
    "@angular/cdk": "^14.0.3",
    "@angular/common": "^15.0.4",
    "@angular/compiler": "^15.0.4",
    "@angular/core": "^15.0.4",
    "@angular/forms": "^15.0.4",
    "@angular/localize": "^15.0.4",
    "@angular/material": "^14.0.3",
    "@angular/platform-browser": "^15.0.4",
    "@angular/platform-browser-dynamic": "^15.0.4",
    "@angular/router": "^15.0.4",
    "@angular/service-worker": "^15.0.4",
    "@metismenu/angular": "0.0.2",
    "@ng-bootstrap/ng-bootstrap": "^12.1.2",
    "@ngx-translate/core": "^14.0.0",
    "@ngx-translate/http-loader": "^7.0.0",
    "@popperjs/core": "^2.11.5",
    "@progress/kendo-angular-buttons": "^13.2.0",
    "@progress/kendo-angular-charts": "^13.2.0",
    "@progress/kendo-angular-common": "^13.2.0",
    "@progress/kendo-angular-dateinputs": "^13.2.0",
    "@progress/kendo-angular-dialog": "^13.2.0",
    "@progress/kendo-angular-dropdowns": "^13.2.0",
    "@progress/kendo-angular-editor": "^13.2.0",
    "@progress/kendo-angular-excel-export": "^13.2.0",
    "@progress/kendo-angular-grid": "^13.2.0",
    "@progress/kendo-angular-icons": "^13.2.0",
    "@progress/kendo-angular-indicators": "^13.2.0",
    "@progress/kendo-angular-inputs": "^13.2.0",
    "@progress/kendo-angular-intl": "^13.2.0",
    "@progress/kendo-angular-l10n": "^13.2.0",
    "@progress/kendo-angular-label": "^13.2.0",
    "@progress/kendo-angular-layout": "^13.2.0",
    "@progress/kendo-angular-listbox": "^13.2.0",
    "@progress/kendo-angular-listview": "^13.2.0",
    "@progress/kendo-angular-menu": "^13.2.0",
    "@progress/kendo-angular-navigation": "^13.2.0",
    "@progress/kendo-angular-pager": "^13.2.0",
    "@progress/kendo-angular-pdf-export": "^13.2.0",
    "@progress/kendo-angular-pdfviewer": "^13.2.0",
    "@progress/kendo-angular-popup": "^13.2.0",
    "@progress/kendo-angular-progressbar": "^13.2.0",
    "@progress/kendo-angular-scheduler": "^13.2.0",
    "@progress/kendo-angular-sortable": "^13.2.0",
    "@progress/kendo-angular-toolbar": "^13.2.0",
    "@progress/kendo-angular-tooltip": "^13.2.0",
    "@progress/kendo-angular-treelist": "^13.2.0",
    "@progress/kendo-angular-treeview": "^13.2.0",
    "@progress/kendo-angular-upload": "^13.2.0",
    "@progress/kendo-angular-utils": "^13.2.0",
    "@progress/kendo-data-query": "^1.6.0",
    "@progress/kendo-drawing": "^1.17.5",
    "@progress/kendo-font-icons": "^1.8.0",
    "@progress/kendo-licensing": "^1.3.5",
    "@progress/kendo-svg-icons": "^1.8.0",
    "@progress/kendo-theme-bootstrap": "^6.6.0",
    "@progress/kendo-theme-material": "^6.6.0",
    "@types/xml2js": "^0.4.11",
    "angular-material-sidenav": "^0.1.1",
    "bn-ng-idle": "^2.0.1",
    "bootstrap": "^5.1.3",
    "copy-image-clipboard": "^2.1.2",
    "exceljs": "^4.3.0",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.0",
    "html2canvas": "^1.4.1",
    "i": "^0.3.7",
    "moment": "^2.29.3",
    "ng-recaptcha": "^8.0.1",
    "ngx-nestable": "^0.9.4",
    "ngx-perfect-scrollbar": "^10.1.1",
    "ngx-spinner": "^13.1.1",
    "npm": "^8.13.2",
    "rxjs": "~7.5.0",
    "stimulsoft-reports-js": "^2023.2.3",
    "timers": "^0.1.1",
    "tslib": "^2.3.0",
    "xml2js": "^0.4.23",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.0.4",
    "@angular/cli": "^15.0.4",
    "@angular/compiler-cli": "^15.0.4",
    "@types/file-saver": "^2.0.5",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.8.4"
  }
}

PDFViewer

updated question on 04 Apr 2024

1 answer

21 views

Hi, How to retain the values selected in kendo multiselect in the first page of the two form pages upon going to second page

I had two page form in which in first page using kendo multiselect and after selecting the options in the first page and going to second page and then returning back to previous page i.e first page where I have selected options is getting blank how to retain the values??

General Discussions

MultiSelect

answered on 03 Apr 2024

0 answers

10 views

Disabling the row except a specific column in grid.

I want to disable the row based on condition where one particular column/cell will be exempted, when I tried to use rowClass it disables whole row.
after disabling the row it should show text as already added to user

Update: Solved

Grid

updated question on 03 Apr 2024

0 answers

12 views

Change switch background color per component

Is it possible to have different Switch fill colors in different components? I can't turn off View encapsulation.

I have tried:

::ng-deep .k-switch-on .k-switch-track {
  border-color: red !important;
  background-color: red !important;
}

in the component .scss file but it doesn't work.

Switch

asked on 02 Apr 2024

0 answers

11 views

File Upload

It is possible  On here  <kendo-upload
          #upload
          [saveField]="'file'"
          [saveUrl]="uploadSaveUrl"
          [removeUrl]="uploadRemoveUrl"
          [autoUpload]="false"
          [withCredentials]="false"
          (remove)="removeImg($event)"
          (upload)="onFileUpload($event)"
          (success)="onUploadSuccess($event)"
          (complete)="complete()"
          (cancel)="cancel($event)"
          (error)="error($event)"
          (focus)="focus()"
        (pause)="pause($event)"
        (uploadProgress)="uploadProgress($event)"
        (resume)="resume($event)"
          [chunkable]="chunkSettings">
        </kendo-upload>

when i remove

[removeUrl]="uploadRemoveUrl" 

remove icon didnot removed in browser?

Upload

asked on 01 Apr 2024

1 answer

50 views

Change the icon of detail row in kendo grid

I want to change the svg-icon of expand row and change the order of that column in kendo grid

Grid

SVGIcon

answered on 01 Apr 2024

1 answer

17 views

Locked Right Column - Kendo Grid Angular

Hi Kendo,

We have a requirement where we need to lock a couple of starting columns and one ending column in a Kendo Angular Grid.

We have implemented the lock feature for starting columns, but it doesn’t work as expected for the last (ending) column in the grid.

We are aware that this can be achieved by applying the ‘Sticky’ feature. But the problem with ‘Sticky’ feature is the horizontal scroll runs to the end of the grid. Ideally, the scrollbar should stop at the start of the last column. (Sticky column)

Is there any workaround to make the last(right) column locked? Or stop the scrollbar at the start of the last column in a ‘Sticky’ behavior?

Appreciate your support on this.

Grid

answered on 29 Mar 2024

1 answer

20 views

Digital Accessibility Issues when using kendo grid in angular

Hi there,

Recently we started working on accessibility issues on angular 15 app Currently we are using the below version for kendo grid.

"@progress/kendo-angular-grid": "^4.7.0",

And we are facing some issues from kendo grid and wanted to check if these get sorted out if the kendo grid version is updated to higher versions. And if so, please suggest the version no..
Please find the attached issues.

---------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------------------------

--------------------------------------------------------------------------------------------

----------------------------------------------------------------------------------------
Please check the issues and let us know how I can sort out my issues.

Accessibility

Grid

answered on 29 Mar 2024

0 answers

16 views

Kendo grid with inline editting using sorting and pagination issue

I'm encountering an unexpected behavior with the Kendo Grid's sorting functionality in my application.

Here's the scenario:

    I perform inline row editing for a record in the Kendo Grid with pagination.
    Sorting the data by clicking a column header works as expected.
    However, if I sort the data again after editing a row, the current index seems accurate, but the data object retrieved appears to be incorrect.

Grid

Pager

Sortable