Hello everyone
I would like to persist the selection of columns in a kendo treelist, such that when a user reloads the page their selection of columns remains the same.
Is there a way of hooking into the events that take place when a selection is applied?
For example, in the picture attached, if the user were to select to display 'Description Two' and hit apply, then I would like for all three columns to be displayed on next reload. Likewise if a user were to hide both Description columns, then only the 'Name' column would be displayed on next reload. All three would still show up in the column chooser in this example, just that two of them would be turned off.
What might I do to achieve this in Angular15?
Best regards
@Component({
selector: 'my-app',
template: `
<kendo-combobox [data]="listItems">
<ng-template kendoComboBoxNoDataTemplate>
<h4>No data!</h4>
</ng-template>
</kendo-combobox>
`
})
class AppComponent {
public listItems: Array<string> = [];
}
<ng-template kendoComboBoxNoDataTemplate> <kendo-textarea placeholder="Enter text here." [rows]="4" resizable="both" formControlName="name"> </kendo-textarea> </ng-template>
but showing like this. is this kendo-textarea can we show properly in this 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
>
</
div
>
Thanks
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" } }
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.
It is possible On herewhen i remove<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>