I am trying to create a heirarchial drawer, I have pasted her my html, ts and scss files as they are.
I have set up the items for the drawer in the ts file and used id and parent id. If I don't use template in html then they all appear fine and nested as they should be but I am unable to apply mouse over or active/selected css styles to the drawer items. If I use template then I am able to apply css mouse over and active styles but then I don't know how to get the drawer subitems to work. Can you please help me with this? The help online shows only setting up in ts file and does not show, how you can apply mouse over etc to custom svg icons or the text. This is very urgent.
Regards,
Adeel
This is my html:
<kendo-drawer-container class="side-bar-container-drawer-container">
<kendo-drawer #drawer [items]="drawerItems" [mini]="isV6Enabled" mode="push" [autoCollapse]="false"
[(expanded)]="expanded" (select)="onSelect($event)" [isItemExpanded]="isItemExpanded">
<ng-template kendoDrawerItemTemplate let-item let-level="level" let-hasChildren="hasChildren"
let-isItemExpeanded="isItemExpanded">
<ng-container>
<kendo-svgicon [icon]="item.svgIcon"></kendo-svgicon>
<span class="drawerspan">{{ item.text }}</span>
</ng-container>
</ng-template>
</kendo-drawer>
<kendo-drawer-content>
<router-outlet></router-outlet>
</kendo-drawer-content>
</kendo-drawer-container>
and this imy ts file:
export class SideBarComponent implements AfterViewInit {
public expandedIndices = [0];
public selected = "Home";
public drawerItems: Array<DrawerItem> = [
{text: "Home", svgIcon: DrawerHome, cssClass: "drawerspan", selected: true, id: 0 },
{text: "Monitor", svgIcon: bellIcon, cssClass: "drawerspan", id: 1 },
{text: "Review", svgIcon: calendarIcon, cssClass: "svg-icon-hover", id: 2 },
{text: "Analyse", svgIcon: envelopeLinkIcon, cssClass: "drawerspan", id: 3 },
{text: "Line Operations", id: 4, parentId: 3},
{text: "Line Engineering", id: 5, parentId: 3 },
{text: "Site Operations", id: 6, parentId: 3 },
{text: "Site Engineering", id: 7, parentId: 3 },
{text: "Planning", id: 8, parentId: 3 },
{text: "Waste", id: 9, parentId: 3 },
{text: "KPIs", id: 10, parentId: 3 },
{text: "Activity", svgIcon: starOutlineIcon, id: 11 },
{text: "Search", svgIcon: envelopeLinkIcon, id: 12 },
{text: "Help", svgIcon: starOutlineIcon, id: 13 },
]
@Input() items: MenuItemModel[];
@Input() isV6Enabled: boolean;
@Input() expanded: boolean;
@Input() autoCollapse: boolean;
@Input() updateBadgeVisibility$: BehaviorSubject<boolean>;
@Input() refreshDefaultPage$: BehaviorSubject<boolean>;
@Input() toggleDrawer$ : BehaviorSubject<boolean>;
@Input() userIsAuthenticated: boolean;
@Input() logo: string;
@ViewChild('drawer') public drawer: DrawerComponent;
selectedItem: any;
constructor(private route: ActivatedRoute,
private router: Router) {
}
ngAfterViewInit(): void {
this.toggleDrawer$?.subscribe(result => {
if (result) {
this.drawer.toggle();
}
});
}
public isItemExpanded: DrawerItemExpandedFn = (item): boolean => {
return this.expandedIndices.indexOf(item.id) >= 0;
};
isSelected(item: any): boolean {
return this.selectedItem === item;
}
getIconClasses(level: number, item: any): any {
const classes = {};
classes['k-level-' + level] = !this.isSelected(item);
classes['k-level-' + level + '-selected'] = this.isSelected(item);
return classes;
}
getItemIcon(item: any, isItemExpanded: boolean): string {
const iconMap: { [key: string]: string } = {
'traceability': 'categorizeIcon',
'lineview admin': 'gearsIcon',
'customer admin': 'userIcon'
};
const lowerCaseText = item.text.toLowerCase();
if (iconMap.hasOwnProperty(lowerCaseText)) {
return iconMap[lowerCaseText];
} if (isItemExpanded) {
return 'folderOpenIcon';
} else if (!isItemExpanded) {
return 'folderIcon';
} else {
return item.icon;
}
}
public refreshDefaultPage() {
this.refreshDefaultPage$?.next(true);
}
public onMouseOver(ev: DrawerSelectEvent): void {
ev.item.svgIcon = bellIcon;
}
public onSelect(ev: DrawerSelectEvent): void {
this.selected = ev.item.text;
const current = ev.item.id;
if (ev.item.id == 0)
{
ev.item.svgIcon = DrawerHomeActive;
}
else {
this.drawerItems[0].svgIcon = DrawerHome;
}
if (this.expandedIndices.indexOf(current) >=0)
{
this.expandedIndices = this.expandedIndices.filter(
(id) => id !== current);
}
else
{
this.expandedIndices.push(current);
}
}
}
and this is my page scss:
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" } }