Sidebar

[ST]

Hello,

I am trying kendo angular and so far it's a great product.
I would like to do a sidebar like on the image bellow, that follow user scrolling :

Do you know how I can achieve this ? Do you have a any component for ?

[Hetali]

Hello,

In order to achieve the sidebar as displayed in the Kendo UI for Angular documentation page, use the Kendo UI ListView component. Please make the following changes to customize the look:

1. Remove the container border and item border:

<kendo-listview
  [itemClass]="{ 'item-border': true }"
>
</kendo-listview>

.item-border {
  padding: 5px;
}

.k-listview-bordered {
  border-left-width: 1px;
  border-top-width: 0px;
  border-bottom-width: 0px;
  border-right-width: 0px;
}

2. Add the focus to the first item and add the border-left property:

<kendo-listview
  #listview
  [navigable]="true"
>
</kendo-listview>

 @ViewChild('listview') public listview;

ngAfterViewInit() {
  this.listview.focus(0);
}

.k-listview-item.item-border.k-state-focused {
  border-left: 5px solid rgb(255, 99, 88);
  box-shadow: none;
}

3. Change the focus on wheel event:

var listview = document.querySelector(".k-listview-content");
listview.addEventListener("wheel", (event: WheelEvent) => {
  if(event.deltaY > 0) {
    this.listview.focus(this.listview.activeIndex + 1);
  } else if (event.deltaY < 0) {
    this.listview.focus(this.listview.activeIndex - 1);
  }
});

Please take a look at this StackBlitz example where I have modified the ListView component to replicate the sidebar in the documentation.

I hope this helps. Let me know if you have any further questions.

Regards,
Hetali
Progress Telerik