Is it possible to have TreeView in one section of the Drawer and a ListView (with checkable items) in another section, similar to the attached image? I would like to have the ability to filter different tab contents using the same filter pane / drawer, that can be easily hidden or displayed
5 Answers, 1 is accepted
Hi Stuart,
Yes, it is possible to achieve the desired structure using a Drawer Template which allows you to control the whole rendering of the Drawer. You can use the TreeView and ListView components in the template, or any other hierarchy display.
An important point to take into consideration is that when you are using this template all built-in features of the Drawer are disabled(for example item selection and rendering, navigation to different pages, etc.). Therefore, they should be handled by the application/components themselves.
Note: In case this is something you also want to implement, the TreeView will soon support checkboxes for selecting the nodes. It is planned for the next release (2.21.0) and you may follow it in this public feedback portal post.
To better illustrate the implementation of a Drawer with hierarchical data including a ListView with checkbox selection, I have created a sample project (see attached, comments in the code for details).
Regards,
Nadezhda
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/.
Rank 1
Thank you Nadezhda.
When I try and run the sample you provided I get the attached error. Is this because I am using the trial nuget package (Telerik.UI.for.Blazor.Trial 2.20.0)?
Hi Stuart,
It seems to me that the exception you are getting most likely stems from a JavaScript issue.
At this stage, we are using JavaScript for features that the Blazor framework does not provide yet (such as conditional preventDefault of an event based on keyboard shortcut).
Since you are using the Trial version of Telerik UI for Blazor, you might need to make sure you are using the correct js file in the <head> tag of your ~/Pages/_Host.cshtml file as follows
<script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script>If you are using the correct js file but you are still getting this exception, we will need to look further into the problem. In order to do so, could you enable the DetailsError to provide more error details, so we can diagnose and solve the issue.
Note: In the attached screenshot I also noticed that the proper styles are not applied. That most likely means that you are not using the correct reference for the Trial stylesheet. The one that you need to include in the <head> tag is the following
<link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
Regards,
Nadezhda
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/.
Rank 1
Thanks Nadezhda, changing the js ref to _content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js worked.
Sorry another related question, based on code below do you know why the drawer closes when I click on certain items in the drawer, such as a checkbox? I only want it to close if the toggle button is clicked
@layout TelerikLayout
@inherits LayoutComponentBase
@* This example shows how to create header and footer for the Drawer and select an item manually. *@
<div class="row">
@*<div class="col-6 mb-md">*@
<div class="custom-toolbar">
<TelerikButton OnClick="@(() => ToggleDrawer(Drawer1))" Icon="@IconName.Menu" Class="k-flat"></TelerikButton>
<span style="margin-left: 20px; font-weight: bold; font-size: 17px;">Drawer with Item Template</span>
</div>
<TelerikDrawer @ref="@Drawer1"
@bind-SelectedItem="SelectedItem"
@bind-Expanded="@ExpandedDrawer1"
Data="Data"
Mode="DrawerMode.Push" >
<ItemTemplate>
@if (context.Text == "Paris")
{
<TelerikTreeView Data="@HierarchicalData">
<TreeViewBindings>
<TreeViewBinding TextField="Category" ItemsField="Products"></TreeViewBinding>
<TreeViewBinding Level="1" TextField="ProductName"></TreeViewBinding>
</TreeViewBindings>
</TelerikTreeView>
}
else if (context.Text == "Rome")
{
<div class="k-drawer-items" role="menubar" aria-orientation="vertical">
<TelerikListView Data="@ListViewData">
<HeaderTemplate>
<h5>Types</h5>
</HeaderTemplate>
<Template Context="contextListview">
<div>
<TelerikCheckBox Value="contextListview.isChecked"></TelerikCheckBox>
<p style="display:inline">@contextListview.Option</p>
</div>
</Template>
</TelerikListView>
</div>
}
</ItemTemplate>
<Content>
<span class="weather-icon @SelectedItem.IconClass"></span>
<span class="weather">
<h2>@SelectedItem.Temp<span>ºC</span></h2>
<p>Sunny weather in @SelectedItem.Text</p>
</span>
</Content>
</TelerikDrawer>
@*</div>*@
</div>
@code {
public TelerikDrawer<DrawerItem> Drawer1 { get; set; }
public bool ExpandedDrawer1 { get; set; }
public bool IsOverlay { get; set; }
public DrawerItem SelectedItem { get; set; }
public DrawerMode Mode => IsOverlay ? DrawerMode.Overlay : DrawerMode.Push;
public IEnumerable<DrawerItem> Data { get; set; } =
new List<DrawerItem>
{
new DrawerItem { Text = "Paris", Description="Capital of France", IconFlag = "france-flag", Temp = 21, IconClass = "sunny"},
new DrawerItem { IsSeparator = true},
new DrawerItem { Text = "Rome", Description="Capital of Italy", IconFlag = "italy-flag", Temp = 30, IconClass = "sunny"},
new DrawerItem { IsSeparator = true},
};
public async Task ToggleDrawer(TelerikDrawer<DrawerItem> drawer) => await drawer.ToggleAsync();
protected override void OnInitialized()
{
SelectedItem = Data.First();
LoadHierarchical();
base.OnInitialized();
}
public class DrawerItem
{
public string Text { get; set; }
public string IconFlag { get; set; }
public int Temp { get; set; }
public string IconClass { get; set; }
public string Description { get; set; }
public bool IsSeparator { get; set; }
}
public IEnumerable<ProductCategoryItem> HierarchicalData { get; set; }
public class ProductCategoryItem
{
public string Category { get; set; }
public List<ProductItem> Products { get; set; }
public bool Expanded { get; set; }
}
public class ProductItem
{
public string ProductName { get; set; }
public bool Expanded { get; set; }
}
//TREEVIEW /// <summary>
/// ////
/// </summary>
private void LoadHierarchical()
{
List<ProductItem> beverages = new List<ProductItem>()
{
new ProductItem { ProductName= "Chai" },
new ProductItem { ProductName= "Chang" },
new ProductItem { ProductName= "Guaraná Fantástica" }
};
List<ProductItem> condiments = new List<ProductItem>()
{
new ProductItem { ProductName= "Aniseed Syrup" },
new ProductItem { ProductName= "Chef Anton's Cajun Seasoning" },
new ProductItem { ProductName= "Chef Anton's Gumbo Mix" }
};
List<ProductCategoryItem> roots = new List<ProductCategoryItem>();
roots.Add(new ProductCategoryItem
{
Category = "Beverages",
Expanded = false,
Products = beverages
});
roots.Add(new ProductCategoryItem
{
Category = "Condiments",
Products = condiments
});
HierarchicalData = roots;
}
//LISTVIEW
List<ListView> SelectedItems { get; set; } = new List<ListView>();
ListView isChecked { get; set; }
public bool Expanded { get; set; } = true;
//Data generation for the ListView in Drawer
List<ListView> ListViewData { get; set; } = Enumerable.Range(1, 5).Select(x => new ListView
{
Id = x,
Option = $"Option {x}"
}).ToList();
//ListView data model
public class ListView
{
public int Id { get; set; }
public string Option { get; set; }
public bool isChecked { get; set; }
}
//Handling selection of items in Listview
void SelectedListViewItem()
{
var selectedItems = ListViewData.Where(itm => itm.isChecked == true);
if (selectedItems.Any())
{
SelectedItems = new List<ListView>(selectedItems);
}
}
void ValueChangedHandler(bool x, ListView item)
{
item.isChecked = x;
//SelectedListViewItem();
}
}
<style>
#demo-runner {
height: 600px;
}
.k-drawer-content {
padding: 20px;
}
.k-drawer-container {
position: relative;
width: 100%;
height: 95%;
}
.drawer-header, .drawer-footer {
margin: 10px 0;
}
.k-drawer-item {
align-items: center;
}
.weather {
margin: 0 auto 30px;
text-align: center;
}
.drawer-header .weather-icon {
display: block;
margin: 10px auto;
width: 36px;
height: 36px;
background-size: cover;
}
.weather-icon {
display: block;
margin: 30px auto 10px;
width: 128px;
height: 128px;
}
.k-drawer-item .item-icon {
height: 35px;
}
.custom-toolbar {
width: 100%;
background-color: #f6f6f6;
line-height: 10px;
border-bottom: inset;
border-bottom-width: 1px;
padding: 3px 8px;
color: #656565;
}
.sunny {
background: url('https://demos.telerik.com/kendo-ui/content/web/tabstrip/weather.png') transparent no-repeat 0 0;
}
.cloudy {
background: url('https://demos.telerik.com/kendo-ui/content/web/tabstrip/weather.png') transparent no-repeat -128px 0;
}
.item-descr {
margin-top: -5px;
white-space: nowrap;
overflow: hidden;
}
.item-descr-wrap > span {
font-size: 70%;
}
.item-descr-wrap {
display: flex;
flex-direction: column;
}
.flag {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-color: transparent;
}
.france-flag {
background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/france-flag.png');
}
.spain-flag {
background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/spain-flag.png');
}
.italy-flag {
background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/italy-flag.png');
}
.germany-flag {
background-image: url('https://demos.telerik.com/kendo-ui/content/web/drawer/germany-flag.png');
}
</style>
Hi Stuart,
The reason behind this behavior is called Event Bubbling, also known as one of the event Propagation phases.
Invoking an event from the child element (TelerikCheckBox in the example below) bubbles up to the button toggling the Drawer and also triggers its event.
You can check this article for reference as well.
Since you are currently experiencing the collapsing from clicking the checkboxes in the ListView section of the Drawer, you need to apply the stopPropagation on its elements as in the example below. The @onclick:stopPropagation is applied to the container holding the Checkbox and the Option text.
<TelerikListView Data="@ListViewData">
<HeaderTemplate>
<h5>Types</h5>
</HeaderTemplate>
<Template Context="contextListview">
<div @onclick:stopPropagation="true">
<TelerikCheckBox Value="@contextListview.isChecked"></TelerikCheckBox>
<p style="display:inline">@contextListview.Option</p>
</div>
</Template>
</TelerikListView>
Regards,
Nadezhda
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/.