Drawer Events

This article explains the events available in the Telerik Drawer for Blazor:

• SelectedItemChanged
• 扩大Changed

SelectedItemChanged

TheSelectedItemChangedevent fires every time the user clicks on a new item from the Drawer. You can use it with one-way data binding to respond to the userselection. It receives an argument of the Drawer data model type.

@ *这个例子展示了如何使用单向数据绑定ing for the SelectedItem parameter *@   
 Content for the @selectedItem?.Text 
   @code { private void SelectedItemChangedHandler(DrawerItem item) { selectedItem = item; // if you don't update the view-model, the event will effectively be cancelled Console.WriteLine($"The user selected {item.Text}"); } protected override void OnInitialized() { //You can preselect an item in the lifecycle methods that the framework provides. selectedItem = Data.FirstOrDefault(); //Here you can use another LINQ expressions like Where() or else depending on your application needs. } public DrawerItem selectedItem { get; set; } public IEnumerable Data { get; set; } = new List { new DrawerItem { Text = "Counter", Icon = "plus"}, new DrawerItem { Text = "FetchData", Icon = "grid-layout"}, }; public class DrawerItem { public string Text { get; set; } public string Icon { get; set; } } }

扩大Changed

The扩大Changedevent fires every time the component's state is changed - to expanded or to collapsed. You can use it with one-way data binding for the扩大parameter. It takes an argument of thebooltype that corresponds to its new state - whether the drawer is expanded.

If you only need conditional markup based on the expanded/collapsed state of the drawer, use two-way binding (@bind-Expanded) - in this example, hiding the button conditionally can be achieved either way, but two-way binding requires less code.

@ *这个例子展示了如何使用单向数据绑定ing for the Expanded parameter and show/hide the Expand Drawer button based on the value of Expanded *@ @if (!Expanded) { Expand Drawer }   
 Content for the @selectedItem?.Text 
   @code { private void ExpandedChangedHandler(bool value) { Expanded = value; // if you don't update the view-model, the event will be effectively cancelled Console.WriteLine(string.Format("the user {0} the drawer.", Expanded ? "expanded" : "collapsed")); } public TelerikDrawer DrawerRef { get; set; } public DrawerItem selectedItem { get; set; } public bool Expanded { get; set; } = true; public IEnumerable Data { get; set; } = new List { new DrawerItem { Text = "Counter", Icon = "plus"}, new DrawerItem { Text = "FetchData", Icon = "grid-layout"}, }; public class DrawerItem { public string Text { get; set; } public string Icon { get; set; } } }

The event is anEventCallbackand it can be synchronous (returnvoid), or it can also be asynchronous and returnasync Task.

The lambda expression in the handler is required by the framework:https://github.com/aspnet/AspNetCore/issues/12226.