Is there a way to change or change or enlarge treelist expand icon?

1 Answer 22 Views
TreeList
Ed
Top achievements
Rank 1
Veteran
Ed asked on 04 May 2021, 06:51 AM

THanks ... Ed

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 04 May 2021, 09:11 AM

Hello Ed,

You can use CSS to do both - just target the built-in font icon to increase its font-size and, optionally, to change the symbol or even font.

Here's an example I made for you:

<style>
    /* change size */
    .my-own-expand-icon td[role='gridcell'] .k-icon::before {
        font-size: 32px;
    }

    /* change icon */
    .my-own-expand-icon td[role='gridcell'] .k-icon.k-i-collapse::before {
        content: "\e00e";
    }

    .my-own-expand-icon td[role='gridcell'] .k-icon.k-i-expand::before {
        content: "\e00d";
    }
</style>

<TelerikTreeList Data=@TreeListData Class="my-own-expand-icon"
                 Pageable="true" Sortable="true" Resizable="true" Reorderable="true"
                 FilterMode="@TreeListFilterMode.FilterMenu"
                 Width="900px" Height="400px"
                 IdField="Id" ParentIdField="ParentId">
    <TreeListColumns>
        <TreeListColumn Expandable="true" Field=@nameof(Customer.FirstName) Title="First Name" Width="115px" />
        <TreeListColumn Field=@nameof(Customer.LastName) Title="Last Name" Width="105px" />
        <TreeListColumn Field=@nameof(Customer.CompanyName) Title="Name" />
        <TreeListColumn Field=@nameof(Customer.HasCompanyContract) Title="Has Contract" Width="115px" />
        <TreeListColumn Field="@nameof(Customer.Email)" Title="Email"></TreeListColumn>
        <TreeListColumn Field="@nameof(Customer.Phone)" Title="Phone" Width="120px"></TreeListColumn>
        <TreeListColumn Field="@nameof(Customer.City)" Title="City" Width="100px"></TreeListColumn>
        <TreeListColumn Field=@nameof(Customer.Id) Title="UserID" />
        <TreeListColumn Field=@nameof(Customer.PasswordHash) Title="Pass Hash" Width="100px" />
    </TreeListColumns>
</TelerikTreeList>
@code { public List<Customer> TreeListData { get; set; }
    public class Customer
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string PasswordHash { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string CompanyName { get; set; }
        public bool HasCompanyContract { get; set; }
        public string Email { get; set; }
        public string Phone { get; set; }
        public string City { get; set; }
    }
    // generation of dummy data
    protected override void OnInitialized()
    {
        TreeListData = GenerateData();
    }
    List<Customer> GenerateData()
    {
        var data = new List<Customer>();
        string[] fNames = new string[] { "Nancy", "John", "Orlando", "Jane", "Bob", "Juan" };
        string[] lNames = new string[] { "Harris", "Gates", "Smith", "Caprio", "Gash", "Gee" };
        string[] cNames = new string[] { "Acme", "Northwind", "Contoso" };
        string[] cities = new string[] { "Denver", "New York", "LA", "London", "Paris", "Helsinki", "Moscow", "Sofia" };
        Random rnd = new Random();
        for (int i = 0; i < 150; i++)
        {
            string fName = fNames[rnd.Next(0, fNames.Length)];
            string lName = lNames[rnd.Next(0, lNames.Length)];
            string cName = cNames[rnd.Next(0, cNames.Length)];
            data.Add(new Customer
            {
                Id = i,
                ParentId = GetParentId(i),
                PasswordHash = "not shown",
                FirstName = fName,
                LastName = lName,
                CompanyName = cName,
                HasCompanyContract = i % 3 == 0,
                Email = $"{fName}.{lName}@{cName}.com".ToLowerInvariant(),
                Phone = $"{rnd.Next(100, 999)}-555-{rnd.Next(100, 999)}",
                City = cities[rnd.Next(0, cities.Length)]
            });
        }
        return data;
    }
    int? GetParentId(int index)
    {
        if (index % 4 == 0) return null;
        return Math.Abs(index - (index % 4));
    } }

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

Tags
TreeList
Asked by
Ed
Top achievements
Rank 1
Veteran
Answers by
Marin Bratanov
Telerik team
Share this question
or