ListView Templates
The ListView component is all about your templates - it does not have an item rendering of its own and lets you customize all aspects. You can define:
- Template - mandatory, this is what is used to display all items
- Edit Template - the rendering of an item in edit or insert mode
- Header Template - your own content above the list of items
- Footer Template - your own content after the list of items and before the pager
Template
This is the main building block of the listview component. You define the layout of each item through its Template and you can use the context which is the model from the data source in order to get the information for the item.
Item template in the ListView
<TelerikListView Data="@ListViewData" Pageable="true" PageSize="15">
<Template>
@{
SampleData currItem = context as SampleData;
<div class="listview-item">
<strong>@currItem.Name</strong> has ID: <strong>@currItem.Id</strong>
</div>
}
</Template>
</TelerikListView>
@code{
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
}
}
The result from the snippet above
Edit Template
This is the template that an item in edit or insert mode renders, instead of its item template. You can use it to add inputs or other editors so the user can modify the data. You can read more about editing data and see examples of using this template in the ListView Editing article.
Consider setting DebounceDelay="0" to the component inside the editor template. This is how the default editors in all Telerik Blazor components work. Otherwise, fast users may try to save changes before the data item in edit mode receives the new value.
Declaring an edit template in the ListView. Note: The CUD operations are not implemented in this example.
@* This example showcases a minimal edit template declaration. For more details on
the available commands and the event handlers you need to implement, see the following article:
https://docs.telerik.com/blazor-ui/components/listview/editing
*@
<TelerikListView Data="@ListViewData" Pageable="true" PageSize="15">
<EditTemplate>
<TelerikTextBox @bind-Value="@context.Name" DebounceDelay="0" />
<ListViewCommandButton Command="Save">Save</ListViewCommandButton>
</EditTemplate>
<Template>
<div>
item @context.Id
<ListViewCommandButton Command="Edit">Edit</ListViewCommandButton>
</div>
</Template>
<HeaderTemplate>
<ListViewCommandButton Command="Add">Add</ListViewCommandButton>
</HeaderTemplate>
</TelerikListView>
@code{
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
}
}
Header Template
This piece of code renders just above the items, but within the main listview wrapper. You would commonly use it to show a heading or other description of the data. You can also add buttons or other components that will invoke actions (such as filter or sort the data source, or edit data).
Header Template in the ListView
@* The item template is mandatory. You can also add other components in the header template. *@
<TelerikListView Data="@ListViewData" Pageable="true" PageSize="15">
<HeaderTemplate>
<h1>Employees</h1>
</HeaderTemplate>
<Template>
<div>item @context.Id</div>
</Template>
</TelerikListView>
@code{
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
}
}
The result from the code snippet above
Footer Template
This piece of code renders just below the items, but within the main listview wrapper, and before the pager. You would commonly use it to show a summary of the data or add components to invoke commands or business logic.
Footer Template in the ListView
@* As with the other templates, layout and nice visual distinctions are up to the application *@
<TelerikListView Data="@ListViewData" Pageable="true" PageSize="15">
<FooterTemplate>
A total of <strong>@ListViewData.Count</strong> items.
</FooterTemplate>
<Template>
<div>item @context.Id</div>
</Template>
</TelerikListView>
@code{
List<SampleData> ListViewData { get; set; } = Enumerable.Range(1, 250).Select(x => new SampleData
{
Id = x,
Name = $"Name {x}"
}).ToList();
public class SampleData
{
public int Id { get; set; }
public string Name { get; set; }
}
}
The result from the code snippet above
