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:

Hi There,

I'm currently trying to use the Kendo PDF Export Function using Kendo Drawing and have been struggling to split the page of dynamic widgets into 2 and it cuts off the bottom of the page and doesnt go onto a second page even when using force page break.

Is there any function to check if the page is overflowing? so I can adjust the table template with extra white space.

Or how can I amend this issue and make the page flow onto 2 pages even if the element ends up getting split in 2.

Attempt without page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45,
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

<div #elm >
...content...
</div>

In the image of the pdf, the bottom of the grid is cut off, then I did the same with text and the text template isnt even visible and doesnt flow onto the next page.

Attempt with Page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45, 
      forcePageBreak: '.page-break',
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

Child Component with page breaking:

<div class=".page-break"></div>
<div class="h-full flex flex-col">
...content...
</div>

Grid component with page breaking

<div class="h-full flex flex-col page-break">

<ngContainer... *gridTemplate></ng-container>

...content...
</div>

<ngTemplate  #gridTemplate>
...Kendo Grid...
</ngTemplate>

The drawer is working fine when I click to select items, but there are cases where I want to select an item programmatically instead of a mouse click.

My drawer's items come from an array of DrawerItem objects:

[items]="drawerItems"

In the .ts file, I've tried both of these ways to change the selected item:

drawerItems[index].selected = true;

drawer.items[index].selected = true;

I can see from console.log statements that both are adding a "selected = true" property to the correct DrawerItem, but it has no effect in the template.  Is there a better way to achieve this?

I am using the kendo-drawer component at the left side of a page. When the drawer is collapsed, only the icons are visible. At this time I would like to show tooltips over the icons.

I am using the 'items' attribute of Drawer to specify the items. However I do not see any attribute for tooltips in the docs for https://www.telerik.com/kendo-angular-ui/components/layout/api/DrawerItem

Is there anyway this can be achieved?

I'm currently implementing the kendo-drawer for navigation in my application. I have most things working but am running into an issue with styling.

I have tried setting a custom width of 300px for the drawer but the element itself always has a flex-basis of 240px on it, overriding the value in the scss. I have looked at the utils included with the theme but am unsure how to use them.

Is there a way that I can set the flex-basis to be the value that I am wanting? Changing it in DevTools gives me the result that I want.

Thanks in advance.

Hi All,

I have a drawer component set up as my application's side bar navigation.  I am using a kendoDrawerItemTemplate to allow some customisation of the menu items' appearances.

If I don't use kendoDrawerItemTemplate and just leave the default styling, when an item has children I get the collapse arrow to expand and contract the level.  When using the kendoDrawerItemTemplate I would obviously need to include this, I can't find anything in the docs about how to pull this bit in.

I have something like this:

<ng-template kendoDrawerItemTemplate let-item let-level="level">
        <div
          style="
            display: flex;
            align-items: center;
            padding-bottom: 3px;
            padding-top: 3px;
          "
        >
          <span
            [ngClass]="'k-icon ' + item.icon"
            [themeColor]="primary"
            size="medium"
          ></span>
          <span class="k-item-text">{{ item.text }}</span>
          <span
            *ngIf="item.children"
            class="k-icon k-panelbar-expand k-i-arrow-60-down"
          ></span>
        </div>
      </ng-template>

The span with the *ngIf children I know is wrong but it is there that I want to pull in the component / code for the arrow if possible.

Does anyone know the answer as to how I achieve this?

Many Thanks,

Hi

I have a very simple drawer: 

    <kendo-drawer
      #drawer
      [items]="items"
      [mini]="true"
      mode="push"
      [(expanded)]="expanded"
      (select)="onSelect($event)"
      [autoCollapse]="false"
    >
    </kendo-drawer>

and I would like to display the item.text as a tooltip when the drawer is minimized... I tried a couple of things but cannot seem to get this working correctly

Thanks in advance

Ursus