Trace events of listview in Blazor ListView Component
22 May 20235 minutes to read
The ListView control triggers events based on its actions. The events can be used as extension points to perform custom operations. Refer to the following steps to trace the ListView events:
-
Render the ListView with
DataSource
, and bind theOnActionBegin
,OnActionComplete
, andClicked
events. -
Perform custom operations in
OnActionBegin
,OnActionComplete
, andClicked
events. -
Provide event log details for
OnActionBegin
andOnActionComplete
events, and they will be displayed in the event trace panel when the ListView action starts and the dataSource bound successfully. -
Get the clicked item details from the
ClickEventArgs
in the Clicked event, and display the clicked list item text in the event trace panel while clicking list items. -
Use clear button to remove event trace information.
@using Syncfusion.Blazor.Lists
<div id="container">
<div class="flex vertical-center">
<div class="sample padding">
<SfListView DataSource="@DataSource">
<ListViewFieldSettings TValue="ListDataModel" Id="Id" Text="Text"></ListViewFieldSettings>
<ListViewEvents TValue="ListDataModel"
Clicked="@(e => Events.Add(e.Text +" is clicked"))"
OnActionBegin="@(e => Events.Add("OnActionBegin is triggered"))"
OnActionComplete="@(e => Events.Add("OnActionComplete is triggered"))">
</ListViewEvents>
</SfListView>
</div>
<div class="sample padding tracker">
<ul style="list-style: none">
@for (var i = Events.Count - 1; i >= 0; i--)
{
<li>@Events[i]</li>
}
</ul>
</div>
</div>
</div>
@code
{
List<string> Events = new List<string>();
List<ListDataModel> DataSource = new List<ListDataModel>() {
new ListDataModel { Id = "1", Text = "Text 1" },
new ListDataModel { Id = "2", Text = "Text 2" },
new ListDataModel { Id = "3", Text = "Text 3" },
new ListDataModel { Id = "4", Text = "Text 4" },
new ListDataModel { Id = "5", Text = "Text 5" },
new ListDataModel { Id = "6", Text = "Text 6" },
new ListDataModel { Id = "7", Text = "Text 7" },
};
public class ListDataModel
{
public string Id
{
get;
set;
}
public string Text
{
get;
set;
}
}
}
<style>
#container .e-listview {
box-shadow: 0 1px 4px #ddd;
border-bottom: 1px solid #ddd;
}
.tracker {
max-height: 250px;
overflow: auto;
}
.sample {
justify-content: center;
min-height: 280px;
width: 350px;
}
.vertical-center {
align-items: center;
}
.padding {
padding: 4px;
}
.flex {
display: flex;
}
.flex__center {
justify-content: center;
}
.margin {
margin: 10px;
}
</style>