Questions on Kendo UI for Angular Forum

7 answers

2.2K+ views

[Solved] 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

294 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

182 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

75 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

400 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

122 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

205 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

320 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

0 answers

119 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

updated question on 26 Mar 2024

1 answer

278 views

Styling the Grid

Hi there,

We are using Angular and TailwindCss in our product and we want to use the Kendo Grid like below. Do you have any examples to style the grid like this? If not supported for tailwind, plain css is fine.,

Grid

answered on 25 Mar 2024