What component did you use for Telerik components page?

1 Answer 105 Views
General Discussions
Missing User
Missing User asked on 04 Jan 2022, 02:36 PM

I'm referring to the sidenav of this page: 
https://www.telerik.com/kendo-angular-ui/components/barcodes/ 

I really love how it looks, and I'd like to make a similar one (with a main search input that filters among the list).

The closest thing I could find is the TreeView, but looking at the source I don't think it's what you used... Would it be possible to have a SB of something similar to it? 

 

Thanks in advance

1 Answer, 1 is accepted

Sort by
1
Accepted
Hetali
Telerik team
answered on 06 Jan 2022, 10:39 PM

Hello Marco,

The Kendo UI for Angular documentation page was not created using the built-in components.

To replicate the sidebar navigator along with a search box, use the Kendo UI TreeView with filtering enabled. The icons of the TreeView can further be modified by using the following custom function in the expand and collapse event:

var collapse = document.querySelectorAll(".k-icon.k-i-collapse");
collapse.forEach((item) => {
  item.className = item.className.replace("collapse", "arrow-chevron-down");
});

var expand = document.querySelectorAll(".k-icon.k-i-expand");
expand.forEach((item) => {
  item.className = item.className.replace("expand", "arrow-chevron-right");
});


Please take a look at this StackBlitz example where I have replicated the sidebar navigator from the documentation.

Let me know if this information helps or if I can further assist you.

Regards,
Hetali
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Missing User
commented on 10 Jan 2022, 09:40 AM

Thank you!
Tags
General Discussions
Asked by
Missing User
Answers by
Hetali
Telerik team
Share this question
or