This is a migrated thread and some comments may be shown as answers.

add some css?

1 Answer 753 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Randy Hompesch
Top achievements
Rank 1
Randy Hompesch asked on 14 Oct 2019, 01:08 PM

Hi,

How do I add css to Telerik blazor widget markup?

Specifically, I am  interested in changing the back and fore color of the treeview.

Thanks … Ed

 

1 Answer, 1 is accepted

Sort by
0
Marin Bratanov
Telerik team
answered on 14 Oct 2019, 03:06 PM

Hi Ed,

The general approach is to examine the rendered HTML and add CSS rules that target the elements you want to alter, and override our default values with the results you desire. The following blog post could help you in this regard: https://www.telerik.com/blogs/improve-your-debugging-skills-with-chrome-devtools.

You may also want to Follow and Vote on this feature that would make this easier for the suite in general: https://feedback.telerik.com/blazor/1433654-component-specific-css-classes-and-ability-to-set-classes-per-instance.

That said, here's an example I made to help you get started:

<style>
    div.k-widget.k-treeview {
        background-color: red;
        
    }

    .k-item.k-treeview-item {
        color: yellow;
        background-color: blue;
    }

    span.k-in {
        background-color: green;
    }

    div.k-treeview span.k-in:hover{
        background-color: cyan;
        color: purple;
    }
</style>

<TelerikTreeView Data="@FlatData">
    <TreeViewBindings>
        <TreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" TextField="Text" HasChildrenField="HasChildren" IconField="Icon" />
    </TreeViewBindings>
</TelerikTreeView>

@code {
    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public int? ParentIdValue { get; set; }
        public bool HasChildren { get; set; }
        public string Icon { get; set; }
        public bool Expanded { get; set; }
    }

    public IEnumerable<TreeItem> FlatData { get; set; }

    protected override void OnInitialized()
    {
        LoadFlatData();
    }

    private void LoadFlatData()
    {
        List<TreeItem> items = new List<TreeItem>();

        items.Add(new TreeItem()
        {
            Id = 1,
            Text = "Project",
            ParentIdValue = null,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 2,
            Text = "Design",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "brush",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 3,
            Text = "Implementation",
            ParentIdValue = 1,
            HasChildren = true,
            Icon = "folder",
            Expanded = true
        });

        items.Add(new TreeItem()
        {
            Id = 4,
            Text = "site.psd",
            ParentIdValue = 2,
            HasChildren = false,
            Icon = "psd",
            Expanded = true
        });
        items.Add(new TreeItem()
        {
            Id = 5,
            Text = "index.js",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "js"
        });
        items.Add(new TreeItem()
        {
            Id = 6,
            Text = "index.html",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "html"
        });
        items.Add(new TreeItem()
        {
            Id = 7,
            Text = "styles.css",
            ParentIdValue = 3,
            HasChildren = false,
            Icon = "css"
        });

        FlatData = items;
    }
}

 

Regards,
Marin Bratanov
Progress Telerik

 UI for Blazor
Tags
General Discussions
Asked by
Randy Hompesch
Top achievements
Rank 1
Answers by
Marin Bratanov
Telerik team
Share this question
or