I have a TelerikButton within a PanelBarBinding element in an TelerikPanelBar, and i like to avoid the Panel to expand when i click the TelerikButton. However the Panel should expand if i click the Panel anywhere else.
how can i do this ? i use Telerik UI for Blazor ?
Thx
1 Answer, 1 is accepted
0
Hristian Stefanov
Telerik team
answered on 30 Oct 2024, 02:36 PM
Hi Paul,
Indeed, the button affects the state of the PanelBar. To avoid that, wrap the button within a div that stops its onclick event propagation. This prevents the event from bubbling up to the parent component and resolves the expand/collapse state conflict.
Here is an illustration of the approach:
<divstyle="width: 30%;"><TelerikPanelBarData="@Items"
@bind-ExpandedItems="@ExpandedItems"><PanelBarBindings><PanelBarBinding><HeaderTemplate>
@{
var item = context as PanelBarItem;
<divstyle="font-weight: bold; text-decoration: underline">
@item.Text
</div><div@onclick:stopPropagation><TelerikButtonOnClick="@TestHandler">Test</TelerikButton></div>
}
</HeaderTemplate></PanelBarBinding></PanelBarBindings></TelerikPanelBar></div>
@code {
public List<PanelBarItem> Items { get; set; }
public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();
private void TestHandler()
{
//test
}
public class PanelBarItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
public ISvgIcon Icon { get; set; }
public string Url { get; set; }
}
private List<PanelBarItem> LoadFlatData()
{
List<PanelBarItem> items = new List<PanelBarItem>();
items.Add(new PanelBarItem()
{
Id = 1,
Text = "Project",
ParentId = null,
HasChildren = false,
Icon = SvgIcon.Folder,
Url = "projectURL.url"
});
items.Add(new PanelBarItem()
{
Id = 2,
Text = "Implementation",
ParentId = null,
HasChildren = true,
Icon = SvgIcon.Code
});
items.Add(new PanelBarItem()
{
Id = 3,
Text = "C#",
ParentId = 2,
HasChildren = false,
Icon = SvgIcon.Cs
});
items.Add(new PanelBarItem()
{
Id = 4,
Text = "HTML 5",
ParentId = 2,
HasChildren = false,
Icon = SvgIcon.Html5
});
items.Add(new PanelBarItem()
{
Id = 5,
Text = "CSS",
ParentId = 2,
HasChildren = false,
Icon = SvgIcon.Css
});
return items;
}
protected override void OnInitialized()
{
Items = LoadFlatData();
ExpandedItems = new List<object>() { Items[1] };
base.OnInitialized();
}
}