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:
width: 100%;
&-appbar {
width: 80px;
float: left
}
&-drawer {
width: 1700;
margin-left: 80px;
&-container {
height:900px
}
}
}
.k-drawer-wrapper {
width: 243px !important;
}
.k-i-menu {
font-size: 25px;
}
.k-level-0 {
font-size: 20px;
padding-left: 10px;
filter: brightness(0%);
&:hover{
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
}
}
.k-level-0-selected {
font-size: 20px;
padding-left: 10px;
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
//filter: invert(0.5) sepia(1);
}
.k-level-1 {
padding-left: 20px;
filter: brightness(0%);
&:hover{
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
}
}
.k-level-1-selected {
padding-left: 20px;
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
}
$image-height: 30px;
.image-logo {
height: $image-height;
}
.image-logo img {
height: $image-height;
}
$mat-card-header-size: 40px !default;
.image-avatar {
height: $mat-card-header-size;
width: $mat-card-header-size;
border-radius: 50%;
flex-shrink: 0;
// Makes `<img>` tags behave like `background-size: cover`. Not supported
// in IE, but we're using it as a progressive enhancement.
object-fit: cover;
}
.k-level-2 {
padding-left: 40px;
}
.k-level-2 {
padding-left: 60px;
&:hover{
fill: red !important;
}
}
.theme-slider {
border-right: 1px solid rgba(255, 255, 255, 0.12);
padding-right: 15px;
}
::ng-deep .select-flags {
position: inherit !important;
}
.hamburger-button {
padding: 0 !important;
margin: 0 !important;
}
.item-selected {
color: var(--tb-kendo-primary-100);
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
}
kendo-svgicon {
filter: invert(0.5) sepia(1);
}
kendo-svgicon:hover {
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
}
.drawerspan{
color: white;
}
.drawerspan:hover {
filter: invert(48%) sepia(88%) saturate(1265%) hue-rotate(347deg) brightness(98%) contrast(94%);
}
Hi Adeel,
Thank you very much for the details provided.
I noticed that a reply to a similar question has already been provided in the following private ticket thread that you have submitted to our team:
https://www.telerik.com/account/support-center/view-ticket/1648618
Since the query has been posted in our public Forum, I will also provide the answer to the question below since other developers might come across a similar situation:
The default behavior of the Kendo UI for Angular Drawer implies that in order to configure the items in the component, the developer would need to utilize the built-in items property and bind it to an array of DrawerItem objects:
By design, the DrawerItem interface provides multiple configuration objects that allow the developers to apply custom styling and render specific items in the Drawer. For further reference, I would suggest checking out the following articles:
https://www.telerik.com/kendo-angular-ui/components/layout/drawer/items/
https://www.telerik.com/kendo-angular-ui/components/layout/api/DrawerItem/
Having said that, a possible approach for applying custom styling to the Drawer items on specific user operations might be for the developer to utilize their CSS selectors and apply the desired styling modifications or execute some custom JavaScript code thus achieving the case-specific requirements. To better illustrate the suggested approach, I am sending you a StackBlitz demo that implements it:
https://stackblitz.com/edit/angular-wkcpzp
Another possible approach that might prove to be useful in the particular case would be for the developer to utilize the built-in templates of the component thus implementing a custom hierarchical Drawer that grants access for customization to the desired elements. Here is a StackBlitz demo that demonstrates such an approach:
https://stackblitz.com/edit/angular-waab1t
For further reference about the built-in Drawer templates, I would suggest checking out the following article:
https://www.telerik.com/kendo-angular-ui/components/layout/drawer/templates/
Please, keep in my mind that the two StackBlitz demos aim to point the developer in the right direction but might need some additional customizations in order to fit the case-specific requirements which are considered the developer's effort.
In case none of the provided information helps you achieve the desired customizations, I would ask you to provide more detailed information about the expected end result. This would allow me to gain a better understanding of the exact scenario and thus come up with a more suitable suggestion.
With that being said, I would ask you in the future to ask questions either in the Forum thread or as a private support ticket. This allows our team to better track support history and provide a better support service in general.
Please, let me know if I am missing out on something.
Regards,Georgi
Progress Telerik