Last Updated: 08 Oct 2020 15:36 by ADMIN
Release 2.18.0
Created on: 07 Oct 2020 08:49
Category: ListView
Type: Bug Report
ListViewCommandButton does not render the Title attribute
The command buttons for the ListView does not render the Title attribute.
1 comment
Svetoslav Dimitrov
Posted on: 07 Oct 2020 08:52


As a workaround for the time-being, you can wrap the command button in a span and pass the title HTML attribute to this span.

<TelerikListView Data="@ListViewData" Pageable="true"
                 OnCreate="@CreateHandler" OnDelete="@DeleteHandler" OnUpdate="@UpdateHandler"
                 OnEdit="@EditHandler" OnCancel="@CancelHandler">
        <div style="border: 1px solid green; margin: 10px; padding: 10px; display: inline-block;">
            <TelerikTextBox @bind-Value="@context.Name" Label="Name" /><br />
            <TelerikDropDownList Data="@Teams" @bind-Value="@context.Team" />
            <ListViewCommandButton Command="Save" Icon="@IconName.Save">Save</ListViewCommandButton>
            <ListViewCommandButton Command="Cancel" Icon="@IconName.Cancel">Cancel</ListViewCommandButton>
        <div style="border: 1px solid black; margin: 10px; padding: 10px; display: inline-block;">
            Employee: @context.Id <br />
            Name: @context.Name in team: @context.Team
        <span title="Edit">
            <ListViewCommandButton Command="Edit" Icon="@IconName.Edit">Edit</ListViewCommandButton>
            <ListViewCommandButton Command="Delete" Icon="@IconName.Delete">Delete</ListViewCommandButton>
        <ListViewCommandButton Command="Add" Icon="@IconName.Plus">Add Employee</ListViewCommandButton>
        <p>In this sample, the first item will not open for editing because of the code in the OnEdit handler</p>

    async Task CreateHandler(ListViewCommandEventArgs e)
        Employee insertedItem = e.Item as Employee;
        insertedItem.Id = ListViewData.Count + 1;
        ListViewData.Insert(0, insertedItem);

        // save to the actual data source here as well

    async Task DeleteHandler(ListViewCommandEventArgs e)
        Employee deletedItem = e.Item as Employee;


        // save to the actual data source here as well

    async Task UpdateHandler(ListViewCommandEventArgs e)
        Employee updatedItem = e.Item as Employee;

        int index = ListViewData.FindIndex(itm => itm.Id == updatedItem.Id);
        if (index > -1)
            ListViewData[index] = updatedItem;

        // save to the actual data source here as well

    async Task EditHandler(ListViewCommandEventArgs e)
        Employee currItem = e.Item as Employee;

        // prevent opening an item for editing on condition
        if (currItem.Id < 2)
            e.IsCancelled = true;

    async Task CancelHandler(ListViewCommandEventArgs e)
        Employee changedItem = e.Item as Employee;
        // this is the item as the user edited it, but chose to cancel editing/inserting
        Console.WriteLine($"user changed item {changedItem.Id} to have Name: {changedItem.Name} and Team: {changedItem.Team}");

    // data and models follow

    List<Employee> ListViewData { get; set; }

    protected override void OnInitialized()
        ListViewData = Enumerable.Range(1, 250).Select(x => new Employee
            Id = x,
            Name = $"Name {x}",
            Team = Teams[x % Teams.Count]

    List<string> Teams = new List<string> { "Sales", "Dev", "Support" };

    public class Employee
        public int Id { get; set; }
        public string Name { get; set; }
        public string Team { get; set; }

Svetoslav Dimitrov
Progress Telerik

Five days of Blazor, Angular, React, and Xamarin experts live-coding on, special prizes, and more, for FREE?! Register now for DevReach 2.0(20).